0

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

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

我已经做了一些研究，并正在考虑实施以下 jquery 解决方案来防止多次提交表单： 如何防止表单从客户端多次提交？

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

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

我必须使用委托函数的原因是因为单击表单#id1 上的提交会加载一个带有 id#2 的表单...我尝试使用onjquery 站点所说的取代委托函数的函数，但这似乎不起作用。我正在使用谷歌 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>
4

1 回答 1

0

只需将其放在提交按钮所在页面的 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()事件处理程序或进行其他修改，具体取决于表单是否在页面加载时生成。

于 2013-02-08T20:05:29.843 回答