Tricky RESET

In HTML, reset is used to well reset the form.This means the form will be revert­ed to the way it was as soon as it got loaded. Here are 2 impor­tant cas­es.

[1] You loaded an emp­ty form which has some fields like text box­es, check box­es, com­bos etc.
So when you hit on reset, as per the above def­i­n­i­tion of reset, all these fields will be revert­ed to the way they were as soon as the form got loaded. That means, all the fields get blank val­ues.

[2] Assume your form has two text box­es, and two com­bos which I call textbox1, textbox2, combo1 and combo2 in the same order.Now the form is cod­ed such that the val­ues to be loaded in combo2 depends on the val­ue select­ed in combo1.Very preva­lent in many web appli­ca­tions.

Now you start­ed fill­ing the form, entered some text in textbox1 and textbox2, select­ed some val­ue in combo1 and combo2 got loaded accordingly.Now you changed your mind and hit on reset but­ton to reset the form but you see that the form did­n’t get reset and the old val­ues are still there in the fields. why?

The trick is this: read the def­i­n­i­tion of reset again. It will revert the form to the way it was as soon as it got loaded.Hope now you under­stood why it hap­pened like that.If not, please read on.

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

Just don’t use the HTML pro­vid­ed reset but­ton. Instead code your own reset but­ton which sets the fields to blank val­ues.

Code may look some thing like below:

DONT use

<input type=“reset” >

Instead use

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

Code for Reset­Form() may look some­thing like this:

<script type=“text/javascript”></script>
func­tion Reset­Form()
{
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>