Tricky RESET

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>

What do you think?

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s