save and restore dynamic form value after ajax refresh - javascript

Got a page where users make comments on any desired post. Each post has a form with just one textarea field created dynamically from js and I'm wondering if anyone has an idea on how to save and restore the comment being typed by a user (i.e save whatever a user has typed so far before ajax refreshes the div holding all the post and comments and then restore back after the div refresh)
Tried creating something around this but not getting it to work:
<textarea id="comment_field" onKeyUp="return saveAndRestoreTypedStrings(this)"></textarea>
or
<textarea id="comment_field" onchange="saveAndRestoreTypedStrings(' + id + ');"></textarea>
The function:
function saveAndRestoreTypedStrings(id){
document.getElementById("post_comment").onchange = function() {
localStorage['post_comment'] = document.getElementById(id).value;
}
window.onload= function(){
if(localStorage['post_comment'])
document.getElementById(id).value = localStorage['post_comment'];
}
}
To identify the form a user is on, a unique id for that form had to be passed to the saveAndRestoreTypedStrings(id) function.
For clarity, ajax only refreshes the div holding all the posts and comments made on each post. So, that div is refreshed for latest posts and comment every 3 seconds and if a user is typing to make a comment on a post and ajax reloads the div content, the user loses whatever is being typed.
Would be pleased to get ideas around this....

window.onload fires up when the page is completly loaded soo i dont think this would apply for your case.
why dont you try using a callback function after AJAX is complete so you can "restore" the info by calling localStorage ?
Note: sorry, i cant comment yet.

Related

Passing script variable to the next page

I've got spinning wheel script that I'm trying to use to give away small prizes to visitors when they login to a website. The wheel animation all works great and the script puts the 'result' into a variable and displays that in a modal on the page. You can see it in action here...
https://ezclix.club/wheel2/index.asp
The result value shows up as the third line in the modal, inserted t oa span #displayprice.
var response = "";
response += selectedSegment.winResult;
$("#displayprice").html(response);
I just need to get that value to the next page, so I can actually 'award' the prize, but so far nothing I've tried seems to work.
I tried setting a cookie but that doesn't make it through.
setCookie("Prize", response, 1)
I've tried adding a form to the modal, and using jquery to update an input with the result value, but that doesn't want to work either.
$('input[id=passprize]').val(response);
$('input[name=passprize]').val(response);
I've tried adding a whole new form input, but no go there as well.
I don't do much with jquery and my experience is mostly limited to minor edits to existing scripts, but the edits above are all things I've done in the past, so I'm stumped.
Any ideas at all much appreciated!
Here's the full function...
function alertWinResult(selectedSegment) {
jQuery(".spin_pin").rotate(0);
$("#spinWinResult").text(globlefuncgeneral.gameover_text);
$(".power_controls").hide();
var response = "";
response += selectedSegment.winResult;
$("#displayprice").html(response);
// My variousattempts...
setCookie("Prize", response, 1)
$('input[id=passprize]').val(response);
$('input[name=passprize]').val(response);
}
You can use url parameter to pass the prize when redirect to next page url/action?prize={response}
enter code here
//Using cookie
setCookie("Variable", response, value)
//using url redirect
next page url/action?Variable=value
I'm not sure how or why, but the form part of this is now working. The snippet above is populating the field so that's getting passed to the next page.
I left it for a while, came back a few hours and it worked without any further changes. So guessing there's some caching going on maybe?
Either way, sorry to waste people's time on this and thanks for your suggestions.

Added an Image"A". Want to Display the image in div"A" , div"B" and div"C". How?

-
I am making an order form with a review page.
when order form is fully filled, then it automatically send each data to
each div on the review page. This is what I want.
I know I can copy a data into another div by using javascript like
<script>
function filling() {
var something = $('#input').val();
document.getElementById("divbox").innerHTML = something;
}
</script>
but when it's not a data that can be displayed with text(for example, an image or a video), then how can I send the data into another div?
Thanks to digging really hard the internet, I found an open source contact form with the image attachment function. what's cool about this is, when I attach an image, it resizes and show to client-side.
(http://webreflection.blogspot.kr/2010/12/100-client-side-image-resizing.html)
So, I am modifying this into an order form, and I want, when a client attach an image, it shows to the client the resized version of it, and it also shows in the div on review page.
How can I do this?
getElementbyClassName or Name did not work because of the "auto resizing script"
-
I'm sorry for my english being to poor. and thank you for your patient to have read this last line. Have a nice day.
Few ways:
<script>
function filling() {
var something = $('#source').html(); // Can be some element, like another DIV
$("#divbox").append(something);
}
</script>
Depending on what you need, can also use clone() (https://api.jquery.com/clone/):
function filling(){
$("#source").clone().append("#divbox");
}

Keep textarea contents after navigating away from page?

I have a simple textarea input element:
<textarea name="comment" id="comment"></textarea>
It's on a page that a user will add items to, thus it will be navigated to and away from frequently. If a user types stuff in the textarea element and navigates away, they'll have to retype everything.
How can I make it such that whatever typed in the textarea element will store even if a user navigates away from the page? I don't want there to be a "save" button which then stores it in $_SESSION or SQL, I'm hopeful there's a method that keeps text there without also having to navigate to a new page. To clarify, sessions are A-OK, but I just don't want the user to have to press anything to store it, I'd like it automatically.
Solution
Use localStorage
window.onbeforeunload = function () {
localStorage.setItem('comment-save', document.getElementById('commment').value);
}
Then when the page is loaded
window.onload = function () {
document.getElementById('comment').value = localStorage.getItem('comment-save');
}
Explanation
window.onbeforeunload will run code before the page is closed. You can always change the event, for example
document.getElementById('comment').input
should save the value every time the user types something. The next line will store the textarea value in a localStorage item called comment-save
The code block will run when the page loads. It will locate the #comment textarea and set it's value to the saved comment.
One Last Problem
If the user submits the comment, you probably don't want to store it anymore. In your submit code, add
localStorage.removeItem('comment-save');
Why
Why use this over PHP? PHP is over-kill to save client-side data. It also wastes server-side resources.

divs hide correctly on page load, but need to show when back button is clicked

I have several divs that are to be hidden on page load on a html form I am designing. Some contain text fields, some contain dropdown boxes. The are shown based on when certain radio buttons are clicked in the form. I am using javascript to hide the divs. Here is the code I am using:
<script language="JavaScript">
function start() {
hide('hideablearea');
hide('nontenant');
hide('conftype');
hide('rec_roomlayout');
hide('req_roomlabel');
hide('req_roomdrpdwn');
}
window.onload = start;
</script>
It works perfectly. My problem is...when the form is submitted and there is an error (for example, the user forgets to complete a required field) and clicks the back button, this function fires again and hides everything..and I want the hidden divs which have info inthem to show at this point. Any idea on how to achieve this?
Thanks in advance!
K
You might want to re-think your design if once you display an error message, the user needs to click Back to go to the previous page and correct the information. The previous page will have no concept of the error message. I can see two ways to correct this.
1) Do all error checking in JavaScript
If you implement your error handling in script, you can immediately inform users of errors and missing information before the page is submitted. You would then only submit the form if everything checks out.
2) Re-display the form on post back
When the user submits the form, you'd do required error checking on the server. You would then re-render the form again, with all the user-entered information, and display error messages. On this page, you'd write something like:
<script>var hasErrors = true;</script>
If the page has errors, your client side script could avoid hiding the relevant information. No-where in this model does the user need to click the Back button to correct their mistakes.
You can put id attribute to your divs and then control if your div has a message to show then you didn't hide them.
Like this:
<script type="text/javascript">
function start() {
if (document.getElementById('hideablearea') == "") {
hide('hideablearea');
}
...
}
</script>

Insert javascript variable into a form on another page?

I am wondering if there's a good way to take a variable built in Javascript and then insert it into a form that's on another page.
My application is a survey: I've got it so that at the end of the survey, all the results are displayed so they can look over their answers. Now I want to have the user click a link and have the answers of the survey show up automatically in the body of the form where they'll then add their email and contact info and click "send."
Any ideas?
Knowing that this ISN'T possible is fine too...if not, what alternate methods might I accomplish the end result?
You can create a hidden field in first page and change that value from javascript variable. When you post that page it can be another page where you need to display in form element.
EDIT
If you need without form in first page you need to link with hyperlink like below.
<a href='#' onClick='OpenPage()'> Go To Result </a>
<script>
var val=20 ; // say this is the value you want to pass to second page
function OpenPage ()
{
window.location.href = "resultpage.php?param=" + val;
}
</script>
After you need to read that param in resultpage either with javascript through URL string or from server side (in PHP $_GET).
Hope it helps.

Categories