多個表單提交

只給一些方面，我是一個自學成才的程序員，沒有正規教育或經驗爲我提前代碼，以便道歉......下面多個表單提交

代碼試圖把設計的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

多個表單提交

回答

相關問題