Chai's Blog

In HTML, reset is used to well reset the form.This means the form will be reverted to the way it was as soon as it got loaded. Here are 2 important cases.

[1] You loaded an empty form which has some fields like text boxes, check boxes, combos etc.
So when you hit on reset, as per the above definition of reset, all these fields will be reverted to the way they were as soon as the form got loaded. That means, all the fields get blank values.

[2] Assume your form has two text boxes, and two combos which I call textbox1, textbox2, combo1 and combo2 in the same order.Now the form is coded such that the values to be loaded in combo2 depends on the value selected in combo1.Very prevalent in many web applications.

Now you started filling the form, entered some text in textbox1 and textbox2, selected some value in combo1 and combo2 got loaded accordingly.Now you changed your mind and hit on reset button to reset the form but you see that the form didn’t get reset and the old values are still there in the fields. why?

The trick is this: read the definition of reset again. It will revert the form to the way it was as soon as it got loaded.Hope now you understood why it happened like that.If not, please read on.

As soon as you select some value in combo1, the form gets submitted to get the values in combo2.That means , the form is loaded again. So by the time you hit the reset button, the loaded form is not the one which has blank values for all it’s fields but the one with some text in in textbox1, textbox2 and combo1.And reset button has reset the form to that state.So what is the workaround?

Just don’t use the HTML provided reset button. Instead code your own reset button which sets the fields to blank values.

Code may look some thing like below:

DONT use

<input type=”reset” >

Instead use

<input type=”button” onclick=”ResetForm()”>

Code for ResetForm() may look something like this:

<script type=”text/javascript”></script>
function ResetForm()
{
document.yourForm.name.value = “”;
document.yourForm.description.value = “”;
document.yourForm.projectId.selectedIndex =0;
document.yourForm.projectId.disabled =true;
document.yourForm.comments.value = “”;
document.yourForm.name.focus();
}
</script>