Taming Your Form's Reset Button with JavaScript

Samples of JavaScript code.

Moderator: Moderators

Taming Your Form's Reset Button with JavaScript

Postby pentapenguin on Sun May 15, 2005 4:12 am

Since you're so good in web design, your school has asked you to create an online homework submission page (so no more eaten homework ;) ). 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! :mrgreen:
User avatar
pentapenguin
Moderator
Moderator
 
Posts: 1466
Joined: Tue Sep 14, 2004 4:15 pm
Location: Georgia, USA

Postby Thatbitextra on Sun May 15, 2005 4:30 am

Thanks for the tutorial pentapenguin! :)
I was wanting to do something like this the other day.
How would I make it so when a link button is clicked, if user click OK on the confirm, it continues to the linked to page, but if they click Cancel, it just makes the confirm dialog box disappear and nothing else, no movement of the page?
Thanks.
User avatar
Thatbitextra
Moderator
Moderator
 
Posts: 1821
Joined: Thu Mar 24, 2005 1:11 pm
Location: A place where something is or could be located; a site.

Postby pentapenguin on Sun May 15, 2005 5:37 am

Try this:
Code: Select all
<a href="javascript:void('');" onclick="if(confirm('Do you want to go here now or later?')){window.location='http://www.phpbbstyles.com';}else{return false;}">phpBBStyles</a>

If you have many to do you should use a function.
User avatar
pentapenguin
Moderator
Moderator
 
Posts: 1466
Joined: Tue Sep 14, 2004 4:15 pm
Location: Georgia, USA

Postby fahraeus on Tue Sep 27, 2005 5:58 pm

I would like to add confirm, but what should I do when link is like this?

$ignore = '<a href="' . $temp_url . '">' . $lang['Ignore_user'] . '</a>';
User avatar
fahraeus
Registered User
Registered User
 
Posts: 419
Joined: Wed Dec 01, 2004 3:27 pm

Postby UseLess on Tue Sep 27, 2005 7:26 pm

Greetings,

Try this;

Code: Select all
$ignore = '<a href="javascript:void(\'\');" onclick="if(confirm(\'' . $lang['Ignore_user'] . '\')){window.location=\'' . $temp_url . '\';}else{return false;}">' . $lang['Ignore_user'] . '</a>';
Movie Quote:
It's not the years honey, it's the mileage...

I do not provide any install services for phpBB, Mods or Styles.
Please do not pm me for support/scripting help - you won't get any reply. If you have a question then make a post in the appropriate forum.
User avatar
UseLess
Registered User
Registered User
 
Posts: 6220
Joined: Mon Sep 27, 2004 2:14 am
Location: North East, UK

Postby fahraeus on Tue Sep 27, 2005 8:11 pm

I realized I needed to add to this code instead.

$ignore_img = '<a href="' . $temp_url . '"><img src="' . $images['icon_ignore'] . '" alt="' . $lang['Ignore_user'] . '" title="' . $lang['Ignore_user'] . '" border="0" /></a>';


so I tried changing according to your example to this:

$ignore_img = '<a href="javascript:void(\'\');" onclick="if(confirm(\'' . $lang['Ignore_user'] . '\')){window.location=\'' . $temp_url . '\';}else{return false;}"><img src="' . $images['icon_ignore'] . '" alt="' . $lang['Ignore_user'] . '" title="' . $lang['Ignore_user'] . '" border="0" /></a>';


It loads the javascript confirmation window, but when OK is clicked nothing happens, the $temp_url does not load.

full code is like this:


if ($userdata['session_logged_in'] && $poster_id != $userdata['user_id'] && $postrow[$i]['user_level'] == USER)
{
$temp_url = append_sid("viewtopic.$phpEx?mode=ignore&amp;t=" . $postrow[$i]['topic_id'] . "&amp;ignoree_id=" . $postrow[$i]['user_id']);
$ignore_img = '<a href="' . $temp_url . '"><img src="' . $images['icon_ignore'] . '" alt="' . $lang['Ignore_user'] . '" title="' . $lang['Ignore_user'] . '" border="0" /></a>';
$ignore = '<a href="' . $temp_url . '">' . $lang['Ignore_user'] . '</a>';
}
else
{
$temp_url = "";
$ignore_img = "";
$ignore = "";
}
User avatar
fahraeus
Registered User
Registered User
 
Posts: 419
Joined: Wed Dec 01, 2004 3:27 pm

Postby UseLess on Wed Sep 28, 2005 12:07 am

Greetings,

Try this;

Code: Select all
if ($userdata['session_logged_in'] && $poster_id != $userdata['user_id'] && $postrow[$i]['user_level'] == USER)
{
   $temp_url = append_sid("viewtopic.$phpEx?mode=ignore&amp;t=" . $postrow[$i]['topic_id'] . "&amp;ignoree_id=" . $postrow[$i]['user_id']);
   $ignore_action = 'return confirm(\'' . $lang['Ignore_user'] . '\')';
   $ignore_img = '<a href="' . $temp_url . '" onclick="' . $ignore_action . '"><img src="' . $images['icon_ignore'] . '" alt="' . $lang['Ignore_user'] . '" title="' . $lang['Ignore_user'] . '" border="0" /></a>';
   $ignore = '<a href="' . $temp_url . '">' . $lang['Ignore_user'] . '</a>';
}
else
{
   $temp_url = "";
   $ignore_img = "";
   $ignore = "";
}
Movie Quote:
It's not the years honey, it's the mileage...

I do not provide any install services for phpBB, Mods or Styles.
Please do not pm me for support/scripting help - you won't get any reply. If you have a question then make a post in the appropriate forum.
User avatar
UseLess
Registered User
Registered User
 
Posts: 6220
Joined: Mon Sep 27, 2004 2:14 am
Location: North East, UK

Postby fahraeus on Wed Sep 28, 2005 5:08 am

It works perfect! Really needed this one. Thank you.

edit:
Works like a charm, but I can't for the life of me figure out how you know to place the backslashes like that in this case:

Code: Select all
$ignore_action = 'return confirm(\'' . $lang['Ignore_user'] . '\')';
User avatar
fahraeus
Registered User
Registered User
 
Posts: 419
Joined: Wed Dec 01, 2004 3:27 pm


Return to JavaScript Tutorials

Who is online

Users browsing this forum: No registered users and 1 guest

cron