• Skip to main content
  • Skip to primary sidebar
  • Skip to footer

Matt Doyle | Elated Communications

Web and WordPress Development

  • About Me
  • Blog
    • Design & Multimedia
      • Photoshop
      • Paint Shop Pro
      • Video & Audio
    • Online Marketing
      • E-Commerce
      • Social Media
    • Running a Website
      • WordPress
      • Apache
      • UNIX and Linux
      • Using FTP
    • Web Development
      • HTML
      • CSS
      • JavaScript
      • PHP
      • Perl and CGI Scripting
  • Portfolio
  • Contact Me
  • Hire Me
Home / Blog / Web Development / JavaScript / Preventing Multiple Form Submits

Preventing Multiple Form Submits

4 April 2005 / 4 Comments

Forms on websites are a handy way to get information from your visitors. However it’s easy for a visitor to accidentally send more than one copy of a form by clicking on the form’s “submit” button more than once. The end result can be that identical emails get sent to the Webmaster, or identical records get added to a database.

This handy little tutorial shows how you can use JavaScript in your Web pages to avoid forms being submitted more than once by a visitor.

As not all browsers support JavaScript, this technique won’t be able to prevent all multiple form submits. Therefore you shouldn’t rely on this technique for anything really critical, such as e-commerce systems where two form submits would mean two card payments being made!)

How does it work?

The basic approach is to use a JavaScript variable to keep a record of whether the form has already been submitted. If it has then we prevent it from being submitted again.

The JavaScript

Here’s the JavaScript that we’re going to use. This should be placed in the <head></head> area of your Web page:


<script type="text/javascript">
<!--

var form_submitted = false;

function submit_form ( )
{
  if ( form_submitted )
  {
    alert ( "Your form has already been submitted. Please wait..." );
    return false;
  }
  else
  {
    form_submitted = true;
    return true;
  }
}

// -->
</script>

The script initially sets a variable, form_submitted, to false when the page first loads. Then, when the submit_form() function is called (see below), it sets form_submitted to true and submits the form by returning true. However, if the form has already been submitted once, form_submitted will already be true. In this case, the function displays a warning, and returns false to stop the form being submitted again.

The Form

Here’s the HTML for a simple form to show our JavaScript in action:


<form onsubmit="return submit_form()">

<p>Your Name:<br />
<input type="text" name="visitor_name" /></p>

<p>Your Email Address:<br />
<input type="text" name="visitor_email" /></p>

<p><input type="submit" name="submit" value="Submit Form" /></p>

</form>

You’ll notice the onsubmit="return submit_form()" attribute inside the <form> tag. This sets our submit_form() JavaScript function to handle the onSubmit event for the form. This is the event that is triggered when the visitor tries to submit the form. If our function returns true, the form will be submitted. If it returns false, the form will not be submitted.

Allowing Changes to the Form

There’s one small problem with our script. It would be nice if we could let the visitor change one or more fields in the form and re-submit the form. This could be useful if, for example, they want to submit two different entries, or if there was a validation error that they need to correct. Currently, the only way to re-submit the form in this situation is to reload the page first, which isn’t very intuitive.

By resetting the form_submitted variable back to false whenever a field is changed, we can allow the visitor to re-submit the form provided they have changed at least one of the fields since they last submitted. We can do this by adding an onChange attribute to each form field’s tag – for example:


<p>Your Name:<br />
<input type="text" name="visitor_name"
onchange="form_submitted=false" /></p>

<p>Your Email Address:<br />
<input type="text" name="visitor_email"
onchange="form_submitted=false" /></p>
That’s all there is to it! Feel free to take any of the above code snippets and use them in your Web forms to prevent those pesky multiple submits.

Filed Under: JavaScript Tagged With: development, form posts, java script, programming, Tutorial

Reader Interactions

Comments

  1. kaushik says

    26 November 2010 at 9:01 pm

    Hi ,
    i want to know can i pass vaiable from javascript to html .say i hv a prompt box of javascript and i want to enter my name and it should show in html twxt box or any variable which is in javascript can i send it to html text box.

    secondly
    how document.formname.submit() ; works
    if any thing inside the html text under formname and after using above statement will the content of tect box will go to server side .

    thanks a lot to help .

    Reply
  2. matt says

    29 November 2010 at 1:29 am

    @kaushik: To store a value from prompt() in a form field then you can write something like this:

    var response = prompt( "Please enter a value", "" );
    document.getElementById('textBoxID').value = response;
    

    I didn’t understand your second question – can you rephrase?

    Reply
  3. kaushik says

    29 November 2010 at 11:56 am

    Dear Matt ,
    thanks a lot ,but i didnt gor exact output ……coz i not didnt understand .here i tried the code
    =============================
    <html>
    <head>
    <script language=”javascript”>
    var response = prompt( “Please enter a value”, “” );
    document.getElementById(‘textBoxID’).value = response;
    </script>
    <head>
    <body>
    <input type=text id=`textBoxID` >
    </body>
    </html>
    ===================================
    i guess we should give value attribute in textbox so tht it will dispaly the value fetched by document.get id …i tried tht one also .pls give sight on this.

    secondy wht i asked ……was like …

    <html>
    <head>
    <script language=”javascript”>
    function add(a1,a2)
    {
    var a3= a1+a3;
    //how to send value of a3 in textbox t3
    }
    </script>
    <head>
    <body>
    <form onsubmit=add(t1,t2)>
    <input type=text name=t1 >
    <input type=text name=t2 >
    <input type=text name=t3 >
    <input type=”buttom ” value=ok>
    </body>
    </html>
    =======================================
    lastly i hv one one problem ,i hv a drop down box with 3 elements from a table fieild .i want when i click a element of drop down box a message ” field name where ” with a blank text box .means message and text box should display on choose of a element.
    <html>
    <head>
    <script language=”javascript”>

    function pick(value)
    {
    if value.selected=”item-name”
    {
    \————–\
    }
    }

    </script>
    </head>
    <body>
    <form name=”f1″>

    <SELECT NAME=”s1″ onChange=”document.form.index.value=document.form.index.options[document.form.index.selectedIndex].value
    <OPTION VALUE=”Item-Name”>Item-Name</OPTION>
    <OPTION VALUE=”Item-num”>Item-num</OPTION>
    <OPTION VALUE=”cat-description”>cat-description</OPTION>
    </SELECT>
    </form>

    thanks a lot .
    Kaushik

    Reply
  4. matt says

    1 December 2010 at 9:08 pm

    Please post the URL of your form.

    Reply

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

To include a block of code in your comment, surround it with <pre> ... </pre> tags. You can include smaller code snippets inside some normal text by surrounding them with <code> ... </code> tags.

Allowed tags in comments: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre> .

Primary Sidebar

Hire Matt!

Matt Doyle headshot

Need a little help with your website? I have over 20 years of web development experience under my belt. Let’s chat!

Matt Doyle - Codeable Expert Certificate

Hire Me Today

Call Me: +61 2 8006 0622

Stay in Touch!

Subscribe to get a quick email whenever I add new articles, free goodies, or special offers. I won’t spam you.

Subscribe

Recent Posts

  • Make a Rotatable 3D Product Boxshot with Three.js
  • Speed Up Your WordPress Website: 11 Simple Steps to a Faster Site
  • Reboot!
  • Wordfence Tutorial: How to Keep Your WordPress Site Safe from Hackers
  • How to Make Awesome-Looking Images for Your Website

Footer

Contact Matt

  • Email Me
  • Call Me: +61 2 8006 0622

Follow Matt

  • E-mail
  • Facebook
  • GitHub
  • LinkedIn
  • Twitter

Copyright © 1996-2023 Elated Communications. All rights reserved.
Affiliate Disclaimer | Privacy Policy | Terms of Use | Service T&C | Credits