多个表单提交

只给一些方面，我是一个自学成才的程序员，没有正规教育或经验为我提前代码，以便道歉......下面多个表单提交

代码试图把设计的iphone网站进入单页面网站（即使用ajax）。我遇到了多个表单提交问题......看起来像是在点击表单＃id2上的提交按钮时发生的。

我已经做了一些研究，并打算实施防止多表单提交以下的jQuery解决方案： How to prevent form from submitting multiple times from client side?

和防止多形式submissionson服务器端的PHP解决方案： http://www.ideologics.co.uk/programming/how-to-prevent-multiple-form-submissions-in-php

还有一些网站建议，阿贾克斯邮政编码应将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>

来源

2013-02-08 Ryan Hough

只是把这个在您的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-08 20:05:29 adamdehaven

我仍然收到表单两次提交 - 但我喜欢按钮更改请稍候！ – 2013-02-08 21:04:53

表单在加载时是在页面上硬编码的，还是通过其他Javascript动态生成的？ – adamdehaven 2013-02-08 21:07:42

该表格是从PHP脚本生成的......看起来，表单提交次数逐渐变差......我想我可能需要解除绑定提交事件或将它们移出加载页面函数。 – 2013-02-09 04:46:21

多个表单提交

回答

相关问题