Multiple form submissions

Question

Just to give some context I'm a self taught programmer with no formal education or experience so apologise for my code in advance...

Code below attempts to turn a site designed for an iphone into a single page site (i.e. using ajax). I'm having an issue with multiple form submissions... looks like this is occurring when clicking the submit button on form #id2.

I've done some research and was thinking of implementing the below jquery solution for preventing multiple form submissions: How to prevent form from submitting multiple times from client side?

and this php solution for preventing multiple form submissionson the server side: http://www.ideologics.co.uk/programming/how-to-prevent-multiple-form-submissions-in-php

Also some sites suggest that the ajax post code should set async to false and cache to false but I'm not entirely sure of the reason and whether this is applicable in my case.

The reason I had to use the delegate function is because clicking submit on form #id1 loads a form with id#2... I tried using the on function which jquery site says supersedes the delegate function but this didn't seem to work. I'm loading version 1.8.2 using google CDN.

var startUrl = 'menu.php';

$(document).ready(function(){
    loadPage(startUrl);
});

function loadPage(url) {
    $('body').append('<div id="progress">Loading...</div>');
    scrollTo(0,0);
    if (url == startUrl) {
        var element = ' #header ul';
    } else {
        var element = ' #content';
    }

    $('#container').load(url + element, function(){
        var title = $('h2').html() || 'Menu';
        $('h1').html(title); 
        $('h2').remove();
        $('.leftButton').remove();

        if (url != startUrl) {
            $('#header').append('<div class="leftButton">Menu</div>');
            $('#header .leftButton').click(function(e){
                $(e.target).addClass('clicked');
                loadPage(startUrl);
            });     
        } 

        $("#container").delegate("a", "click", function(e){
    var url = e.target.href;
            if (url.match(/example.com/)) { 
                    e.preventDefault();
                    loadPage(url);
                }
    });

    $("#container").delegate("form", "submit", function(event){
        event.preventDefault();
    });

        $('#id1').submit(function(){
    var formData = $(this).serialize();
    $.post('processform1.php',formData,processResults);     

    function processResults(data) {
        $('#id1').remove();
        $('#container').html(data);
    }

        });

        $("#container").delegate("#id2", "submit", function(event){
        var formData = $(this).serialize();
    $.post('processform3.php',formData,processResults);     

    function processResults(data) {
        $('#id2').remove();
        $('#container').html(data);
    }

        event.preventDefault();
    });                 

        $('#progress').remove();        

});
}

Below is the index page:

<html>
<head>
    <title>Title</title>
    <meta name="viewport" content="user-scalable=no, width=device-width" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    <link rel="apple-touch-icon-precomposed" href="myCustomIcon.png" />
    <link rel="apple-touch-startup-image" href="myCustomStartupGraphic.png" />
    <link rel="stylesheet" href="iphone.css" type="text/css" media="screen" />
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
    <script type="text/javascript" src="iphone.js"></script> 

</head>
<body>
    <div id="header">
        <h1>Menu</h1>
    </div>
    <div id="container"></div>

</body>
</html>

score 0 · Answer 1 · answered Feb 08 '13 at 20:05

0

Just place this in your JS for the page the submit button is on

<script type="text/javascript">
  $(document).ready(function(){
    $("input[type='submit']").attr("disabled", false);
    $("form").submit(function(){
      $("input[type='submit']").attr("disabled", true).val("Please wait...");
      return true;
    })
  })
</script>

You may need to use an on() event handler or do other tinkering depending on if the form is generated on page load.

answered Feb 08 '13 at 20:05

adamdehaven

5,890
10
61
84

I'm still getting the form submitted twice - but I like the button changing to please wait! – Ryan Hough Feb 08 '13 at 21:04
Is the form hard-coded on the page when it loads, or are you generating it dynamically through other Javascript? – adamdehaven Feb 08 '13 at 21:07
The form is generated from a PHP script... it appears that the number of times the form is submitted gets progressively worse... I think I may need to unbind the submit events or move these out of the load page function. – Ryan Hough Feb 09 '13 at 04:46

Multiple form submissions

1 Answers1