I have a situation where for some reason a Web page might refresh while a user is filling out a form. The unwanted effect is to wipe out the data already entered by the user.
Is there a solution to have the form data persist on page refresh?
The form includes text input and selects.
You say "I have a situation where for some reason a Web page might refresh", do you mean that the user might refresh the page, or is it some other script that refreshes the page? If the case is the latter, you should probably try to fix the issue that causes the refresh instead of trying to preserve the form data. If it is the former, JavaScript will probably be the solution for you.
You could listen for every keyup-event on any of the form elements. When a keyup-event is fired you serialize the form data and write it to a cookie (or a webstorage, depending on what browsers you need to support), to preserve the most up-to-date data. If the page reloads, or if the user leave the page and comes back, the cookie can be deserialized on document-ready, and you can re-populate the form with the data from the cookie. When you post the form, you make sure to also clear the cookie, to make sure the form isn't filled the next time the user loads the page.
Update
Here is a good blog post about how to use GSerializer for serialization an deserialization with JavaScript.
A suggested approach
As the user is filling out the form, have JavaScript running that caches the entered values in LocalStorage, a cookie, or a session variable via AJAX.
On page load, check for the presence of these entries, and populate the form with JavaScript.
On form submit, clear the entries.
Use HTML5 web storage- it is faster and more secure than cookies. You can check out the W3Schools website for some quick and basic samples: http://www.w3schools.com/html5/html5_webstorage.asp
Related
I've got a php database driven website and I want to implement a feature where there is a section on the navigation bar which displays a history of previous pages visited (with their urls) on the website. I plan on using a $_SESSION array to store this list.
That should be easy enough, but I also want to have a delete button next to every history entry so the user can remove pages from the history bar. The problem with this is that to update the $_SESSION array and remove the entry, it will need to reload the page, and if the user is on a page such as a search results page it will come up with errors because the page generated relies on a submitted form. There would be other examples of this issue on other pages.
I'd rather not have to store the search etc. in a session variable to get around this so was wondering if there would be some way of using javascript to delete the entry on the history bar and then somehow update the php session variable from the javascript when the user navigates away from or refreshes the page... but I'm not sure how the js could change the php session variable. Could this work or is there another solution?
You can follow below steps:
Make an ajax call to a PHP file and destroy SESSION variables related to user's page visited history.
On ajax success, hide / remove HTML elements or container that display page history URLs on the web page using JavaScript.
Since your search page is dependent on POST values, this will ensure that user's page history is cleared without the need to refresh the page. When user navigates to some other link, page will get reloaded and user will not get older links.
Hope this helps!
You can use AJAX, for example if you push logout button ajax will send information to the server side but php will do all the work of destroying that session. The are many examples of ajax on stackoverflow.
I'm new to web development and I'm trying to make small projects to better understand how javascript works and how interactive websites are made. So I wanted to make a simple website that would save links that you would enter using input/form submission. but what are the ways which I can use to store it on the server so when I open the page next time the website retrieves the saved information and displays it?
I know this question is pretty open, but I'm really lost in this part of web development because I'm seeing too many completely different things on the internet like PHP, ASP.net and what not. Can someone help me out?
It would be very thankful if someone can send me a link to a related tutorial or some similar resource, as well.
If you to do that, you will need a server side program with a Database.
Here is a tutorial for PHP, a popular language to do web pages http://www.w3schools.com/php/
When you submit your data in the form, That data will be sent to the file mentioned in the action attribute of the form. Now, each input element of your form will have a name attribute which you can use to refer as a key in your GET or POST super global array depending on the method attribute of your form tag.
I know it may sound confusing without example. But, This is explained at many links on the web. Try searching for form submission with post.
Decide on which technologies that you want to work with. I prefer you to use ajax with instead of just using javascript.
Link for flask tutorial http://www.fullstackpython.com/flask.html
Store the data in the client side is much simple I think. While storage in client, you can use localStorage sessionStorage and cookie.
localStorage you can storage whatever you want and it has no expiration time
sessionStorage the difference between localStorage is that it has a expiration time, A page session lasts for as long as the browser is open and survives over page reloads and restores
Cookie is much simple and can store limited value in string format
I need to fill up form in another website which is not in my control. I have some datas filled in my website, I need to pass those data and fill the existing form in another website. Is it possible to fill the form using php, jquery?
For simplicity,
I want to redirect user after filling up form in my site abc.com save it in my database and redirect to external website xyz.com and fill the existing form there.
Your best bet would probably be to replicate their form 1:1 on your site and submit it using <form action="their_form_url">. This would work, however, only if they don't have XSRF countermeasures in place (most sites don't, some do).
You will not be able to manipulate the form with JavaScript in pretty much any way unless the iframe target (i.e., their site) is in your domain.
If you only want to fill the data in without submitting, you are out of luck. Both JS and cookies follow the same-origin policy, which explicitly dictates defenses against this kind of behavior.
It all depends on the target website. If they pre-fill their form with $_GET data or $_POST data, you can just pass on that data. A good shot may be to try to post wrong data (like a wrong captcha value) manually and see how they fill their form again. Maybe you could use that in your favor.
Although, another possibility is to load their site in an iframe, and put the data with Javascript, by accessing the iframe code. I'm not sure about this, though. I just think it can be done. (Please correct me, if I'm wrong)
I have a online web application form which I have to open every time and have to fill data and Submit.. So, I have got an idea of making a Google Chrome extension, that will make that page stored inside localStorage So that I can access it like a desktop page.. Is this possible.. I do not have any permissions to change the web site at server side.. I am just a client side programmer.. Is it possible? if yes please let me know how can I achieve this..
in theorie, yes, you could. Practically, it won't work out like you want. The reason are the external resources the website is going to be needing.
Storing just the html (document.body.innerHTML) would be possible. BUt if you want the formatting/layout to be happening, you'd need to save the computedStyles for each element as well. And if an image, you'd need to Base64 encode the image and save it.
Even if you'd succeed in saving the page, you'd need to know when to expire your localStorage cache and refetch the resources to stay compliant to the server side parsing of the form data (if they'd change something).
if its just about submitting a form, you also could just trigger the forms post-action-url directly by writing a script that resends the data you want sent.
I want to use Facebook's log in, and then I need to display some data related to the user, which is in my databases.
The problem is that I have several pages, and I don't want all pages to load the data using Ajax, rather I want them to be created by JSP based on the user id from the first time the user logged in. The problem is how to set the user id parameter in the server side, and keep it safe?
JavaScript can't set the session, and it is very annoying and have poor performance to load the page and then wait for the id from the Facebook session just to send it to server and process it --> send data back. This is good behavior for the first time user logged in only.
I am using Jaxcent as the framework for Ajax which is based on servlets. For some reason, I can't get to work with the session object there which only works with forms inputs. And when I tried to put a hidden filed in, it is not getting into the session, only if I type the value myself.
How do I solve this issue?
I thought about a table in the database which I could quote the session id, and userid from, but then again I have the session id in JSP but the userid in JavaScript, I can't find a way to combine them.
You could create a page that you would pass the user id (when you get it from facebook) and that page would store a cookie on the client, with the necessary redirecting of course.
You might be able to do that with AJAX to get rid of the redirection.
Just set a cookie from your JavaScript code, and read that on the server. Note that you should include the full signed request if you need definitive values, as opposed to the user being able to modify them.