). You create a beautiful page with CSS and XHTML. To make it easy to use, you include fieldsets, titles, a reset button, and JavaScript error checking. Finally, you're done! You put it up and that night get an angry email. "What happened?!?" your fellow classmate asks. "I just typed in my paper clicked a button and it disappeared but it's due tomorrow!!!!!" Uh oh--he clicked the reset button instead of the submit button!
Thankfully though, that didn't really happen. Reset buttons are horrible in design since there's no confirmation if you really want to erase all of what you entered. Today, let's look at how we could fix that using JavaScript. We'll create a pop-up box that asks the user if he really wants to reset the form. If he or she says "yes" or "okay," the form will reset. If he or she says "no" or "cancel," the form will not reset and the cursor will go back to the field.
First, we'll look at the entire script and then go over it line by line. (This tutorial assumes you're familiar with basic HTML.)
- Code: Select all
<html>
<head>
<title>Taming Your Form's Reset Button with JavaScript</title>
<script language="JavaScript" type="text/javascript">
<!--
function reset_form()
{
if ( confirm("Are you sure that you want to reset this form?") )
{
window.document.myform.reset();
}
else
{
window.document.myform.search.focus();
}
}
//-->
</script>
</head>
<body>
<form action="script.php" method="post" name="myform">
Search: <input type="text" name="search" value="" />
<input type="submit" name="submit" value="Submit" />
<script language="JavaScript" type="text/javascript">
<!--
window.document.write("<input type='button' name='resetbutton' value='Reset' onClick='reset_form();' />");
//-->
</script>
</form>
</body>
</html>
Ok, above is a pretty generic HTML page with a single text field to enter text to search for. To save space, I'm not going to go over that. Let me just point out a few things.
1. Notice this line:
- Code: Select all
<form action="script.php" method="post" name="myform">
See the name attribute?
You need to add that to your form so JavaScript can know how to access it.
2. Now, let's go back up to the top. Here we start the function that handles the reset button confirmation: reset_form()
3. Here's a simple if/else statement. If you've used JavaScript before, you know that the confirm() function generates an OK/Cancel dialog box. However, what you may not know is that it returns a value: either true (OK) or false (Cancel). So, if the user clicks OK, confirm() returns true, so JavaScript would see this:
- Code: Select all
if ( true )
which of course will be executed.
4. Here's the line that does all the magic:
- Code: Select all
window.document.myform.reset();
Remember that I told you your form needs a name? Here's where that comes into play. You can now access your form by window.document.myform.something. The JavaScript's reset() function does what it says: it resets the form. It does the exact same thing as the traditional <input type="reset"> button.
5. Let's look at this bit:
- Code: Select all
else
{
window.document.myform.search.focus();
}
This is completely optional. If the user clicks "Cancel" the field get the cursor back. It's just a nice little touch.
6. Finally, let's put your new reset button in the form.
- Code: Select all
<script language="JavaScript" type="text/javascript">
<!--
window.document.write("<input type='button' name='resetbutton' value='Reset' onClick='reset_form();' />");
//-->
</script>
Notice that we put the reset button in a JavaScript document.write()?
Why?
If the user doesn't have JavaScript, the button won't show up at all and that will prevent confusion. The final step is to add the onClick='reset_form();' part which will trigger that function when clicked.
Well, that's all for this tutorial; hope you learned something interesting and useful!
Have fun (and safe) forms!
