多个表单提交答案

【问题标题】：Multiple form submissions多个表单提交
【发布时间】：2013-02-09 05:15:13
【问题描述】：

只是为了提供一些背景信息，我是一名自学成才的程序员，没有受过正规教育或经验，所以提前为我的代码道歉......

下面的代码试图将专为 iphone 设计的网站转变为单页网站（即使用 ajax）。我在提交多个表单时遇到问题...看起来这是在单击表单#id2 上的提交按钮时发生的。

我已经做了一些研究，并正在考虑实施以下 jquery 解决方案来防止多个表单提交： How to prevent form from submitting multiple times from client side?

还有这个用于防止服务器端提交多个表单的 php 解决方案： http://www.ideologics.co.uk/programming/how-to-prevent-multiple-form-submissions-in-php

还有一些网站建议 ajax 邮政编码应将 async 设置为 false 并将 cache 设置为 false，但我不完全确定原因以及这是否适用于我的情况。

我必须使用委托函数的原因是因为单击表单#id1 上的提交会加载一个带有 id#2 的表单...我尝试使用 on 函数，jquery 网站称该函数取代了委托函数，但这并没有t 似乎工作。我正在使用谷歌 CDN 加载版本 1.8.2。

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();        

});
}

下面是索引页：

<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>

【问题讨论】：

标签： php jquery ajax forms

【解决方案1】：

只需将其放在提交按钮所在页面的 JS 中

<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>

您可能需要使用on() 事件处理程序或进行其他修改，具体取决于表单是否在页面加载时生成。

【讨论】：

我仍然收到两次提交的表单 - 但我喜欢将按钮更改为请稍候！
表单加载时是在页面上硬编码的，还是通过其他Javascript动态生成的？
表单是从 PHP 脚本生成的……看来表单提交的次数越来越多……我想我可能需要取消绑定提交事件或将它们移出的加载页面功能。