Question

只是为了给出一些背景，我是一名没有正规教育或经验的自学程序员，所以提前为我的代码道歉......

以下代码尝试将专为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站点说这个函数取代了委托函数但是这个似乎没有用。我正在使用谷歌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>

Answer 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()事件处理程序或进行其他修改，具体取决于是否在页面加载时生成表单。

多个表单提交

1 个答案: