Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 8 years ago.
Improve this question
I have a two page form, when a user fills out the first page he/she can either click Save For Later, or click Next and proceed to the next page and continue filling out the form. It is done through jquery. What I cannot figure out how to do is, how can I save the user input in the form, so if the browser crashes, internet goes out, or user simply wants to save form and come back to it later, the filled out information sits in the input fields. What is a method to accomplish that?
This is more or less general solution to your problem: use localStorage to store the user input:
<body onload="if(localStorage.userEdits){document.getElementById('name').value=localStorage.userEdits}" id="myForm">
<form>
<input id="name" type="text" onkeyup="localStorage.userEdits=this.value"/>
</form>
</body>
It will store the value of your input every time you press a button on your keyboard to type something, and retrieve this info on load.
There are various ways you can easily achieve this behavior.
One of them, is to provide draft feature. This feature will allow user to save the form data when...
a) They click next
b) they leave and session is timed out
c) Complete the form and don't want to submit it
This way is more secure and reliable.
It think that you can realise it with storing the login credintials with PHP in a session or something like this. If the user visits the website again your PHP-script sees that there is a session with credentials and you can show them to the user.
An other method would be to save this data in a localStorage on the device of the visitor but I wouldn't use this method because not all browser are accepting localStorages.
Related
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 4 years ago.
Improve this question
I want to store user changes in my webpage so that user can go to next page then come back on that page so that elements which he added should be there when he comes back for editing the webpage. I do not want to store data to the database until he submits the form.
let me explain with the example
in this image user add a new item to list by entering the name in input field I want to store these new items so that user can go to next and can come back with the list item present
You can use JavaScript to set a cookie with all the changes you want to keep. If the user returns to the page later, restore the changes from the cookie.
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 5 years ago.
Improve this question
I am trying to find out how I can make a program in JavaScript/HTML that takes a user's input and automatically enters this information onto a different web page. I am new to JavaScript/HTML so any help would be appreciated!
You specified the website as:
Supreme
Now, when you go to checkout, right click and click Inspect Elements. Then find all of the input fields on the website. For example, I found the Full Name input field. The field has a name: order[billing_name]
What you want to do next is in your URL do something like this:
https://www.supremenewyork.com/checkout?order[billing_name]=yourname
Now if you want multiple values (most likely) you need to find the names of the other fields and add the values to the URL, as so:
https://www.supremenewyork.com/checkout?order[billing_name]=yourname&order[email]=youremail
This way you can pass the values from your application and fill in the form on that website.
Hope this helps.
Use localstorage. see working demo in the link below;
Note: localStorage won't work in snippet; hence I made a fiddle.
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 6 years ago.
Improve this question
I have a ASP.Net page which includes a search input
search input takes a value
button fills a table with data
each data has a link button to go to another page
when I press this link I can go to the another page
when I press back button of the browser it return me again to the search page and the search input still saved the value
I need to create a button when I click it behave as browser back button.
You can use history.go(-1) or history.back()
Here is a link you may find helpful: How to emulate browser back button using javascript
<input type="button" value="Back" onclick="window.history.back();" />
This input tag will go back in the Browser history by one page unless there isn't anything in the history to go back to.
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 7 years ago.
Improve this question
I am making a HTML form where I need my users to be able to get back whatever data that they have filled up, after closing the window/tab and reopening it.
If I do it with JavaScript cookies or HTML 5 local storage, Then I will have to write code for every single input tag there is, even if its like thousands.
So, what would be the most efficient way to accomplish this?
P.S. I am using PHP for back end processing.
I want the function just like we have in the browser like restoring the session in firefox or chrome.
you can use like this with localstorage.
localStorage.setItem('formData', JSON.stringify($('form').serialize())); //comfortable java script way.
or with cookies you can like this
$.cookie('formData', JSON.stringify($('form').serialize())); //can support old browsers also.
please read the excellent accepted answer at storage-vs-cookies you will know which one to use.
LocalStorage is your best option.
I will have to write code for every single input tag there is, even if it's like thousands.
That is not true. You can use a JS loop, or a jQuery each, to do that:
$("input").each(function(){
$(this).val(storage.getItem($(this).attr("id")));
})
.change(function(){
storage.setItem($(this).attr("id"), $(this).val());
});
When the page loads, you loop through each input on the page and put content into it based on the input's ID.Then you attach an event listener to all the inputs, which saves any changes into local storage.
I have not tested this, and it is only for illustrations purposes. This code probably won't work straight away, but I hope you understand the concept.
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 8 years ago.
Improve this question
I'm building a very basic website, and am currently working user creation. The user fills out a form, which then has the inputs validated and written to a MYSQL DB if valid.
I'd like to add some basic error checking while the user is inputting data - for example:
Validate the username the user is attempting to select against the Users table in the database.
Validate that the FirstName/LastName/Email fields contain values.
Validate that the password fields match.
You get the idea...if any of the above conditions fails, I'd like the label for the textbox to turn red, bold, and a slightly different size than the form otherwise, as well as provide a simple error message for the user somewhere on the page.
I've written a simple javascript function that can perform #2 and #3 above, and change the appropriate text to the "error" style.
My questions are:
How do I query the MYSQL db when the cursor exits the username field (to check if the username is still available)? I can easily do this when the user actually submits the form, but I'd like to query once it appears that the user is done typing, i.e. when the cursor leaves the textbox.
How do I display the simple error message on the page (and control what it says)?
How do I get the "default" or "standard" font size/weight/color values from the css stylesheet that controls the webpage's layout, so that I can then change the element back once the user corrects the error condition?
Is javascript even the right way to do this? I'm not incredibly familiar with it, but it seems similar enough to other languages I've worked with that I can kind of muddle through it.
Thank you in advance - if for some reason you think this question has been previously asked/answered, please provide a link for my benefit, as I was unable to find any questions directly on point.
First and foremost you need to understand that pure javascript in client side only. Something that the client could even turn off if the so desired.
Javascript is for display (like having fancy input validation or anything that could change the DOM after the page is loaded).
Server side languages like PHP is the only way you could talk to a MYSQL database. (Not saying that php is the only one-- others might include Ruby/Python/Node.js)
But everything you laid out here is a question/project itself.
If you want to check some information without refreshing the page, you'll need to look into AJAX.
The most basic message would be something like alert('That name is taken!').
You could add a new class to the form element with the error, so that it gets some additional CSS properties. Then once the user corrects the error, remove that class from the element and the browser will redraw the element with the original properties.
JavaScript will handle the AJAX request part and the changing styles part. Obviously the actual database querying will happen through your server-side language of choice. But it sounds like you're okay with that side.