This is a small issue but sometimes important. Well this is not a major post by me nor a major find, but I did run into some trouble while trying this particular thing out. Hence thought of recording it somewhere, so that I do not have to re-invent the wheel again. Here is the use case – there is an HTML form which is to be filled up and submitted to a server side script (let’s say some PHP code). After successful submission the user hits the back button of the browser. All the form fields and values should be reset and set to its initial configuration.
I tried several different techniques and implementations but ran into some or the other problems mainly because of browsers – different browsers behaving differently. On some browsers something works while on the others it does not. Thanks to these differences in spite of a universal and a common W3C standard. But I finally found a rather easy solution and cached onto it. This post will talk on that particular method with an example.
So the clue is very simple – reset the form after it is submitted so that when the user hits the back button every field in the form is initialized and reset (no previous values are left behind). How?? Let’s see in this example,
First I have a simple HTML form with a checkbox, two input fields and a button,
<body>
<form method="get" name="myForm" action="submit.php">
Salaried: <input type="checkbox" name="salaried"/>
<br/>
First Name: <input type="text" name="input1"/>
<br/>
Last Name: <input type="text" name="input2"/>
<br/>
<input type="button" value="Submit" onclick="submitForm()"/>
</form>
<script type="text/javascript" src="form_submit_script.js"></script>
</body>
Note that the button is not a submit button, but a normal push button. I have a onclick event handler attribute assigned to it which calls a function submitForm() when user clicks on it. Inside this function I do a small validation and then finally submit the form. The trick to remove the previous values when you hit the back button in the browser is inside this function. Let’s check it out,
function testSubmit()
{
var x = document.forms["myForm"]["input1"];
var y = document.forms["myForm"]["input2"];
if(x.value =="" || y.value=="")
{
alert('Not allowed!!');
return false;
}
return true;
}
function submitForm()
{
if(testSubmit())
{
document.forms["myForm"].submit(); //first submit
document.forms["myForm"].reset(); //and then reset the form values
}
}
You can see the submitForm(){} function definition in the code block above. First I do a form validation for empty fields, which is very simple and I will not go inside it. After successful validation the form is submitted using the standard submit() method and then I reset the form using the standard form reset() method. This ensures that every form field is reset and there are no values left behind in the text boxes. You van verify this by first checking the checkbox, putting some values in the text boxes and clicking on the button. This will take you tot he submit php page (The PHP page is not in my server, so you get a 404 error). Then click the back button of your browser and see that the checkbox and text inputs are reset. Try the same with the last line in the script commented as shown below,
//document.forms["myForm"].reset();
You will notice previous values being left behind. So, a very simple way to tackle this, but an effective one.
And this way of resetting works on all major browsers.
Great, it helped me a lot. Thanks
You are welcome. Great to hear that!
I discovered that even though the reset code works to reset the form it has the unintended result of preventing the field required messages to work. Normally a user will be prompted to complete empty compulsory fields before submitting the form, but after adding the reset function, you simply get a cgi error message if there are any empty fields, i.e. it skips the step of prompting you to complete the form.
Erna,
Thanks for pointing this out. I did not try the use case that you mentioned here. So might have missed out on it. I will try to update my post though.
Joseph
This article will help the internet people for setting
up new web site or even a weblog from start to end.
we need create a explicit code for submit and reset function or else it is standard functions
I’m using this for a login form that’s loaded into a modal window. When the form is submitted, it opens the resulting page in a new window, thus leaving the login window open. So this works excellent for my needs. Thanks a lot!