jQuery的serializeArray不包括被點擊的提交按鈕

我有一個窗體，有兩個按鈕。一個用於保存記錄，另一個用於取消保存過程。我正在使用rails.js（這是您不熟悉的那些常用AJAX/jQuery插件） JavaScript文件，與jQuery一起使用，用於不顯眼的javascript/ajax調用。當我通過ajax發送表單數據時，我希望我單擊的按鈕的名稱和值與其餘數據一起提交，以便我可以根據單擊哪個按鈕來決定做什麼。jQuery的serializeArray不包括被點擊的提交按鈕

rails.js文件中的方法使用.serializeArray()將表單數據發送到服務器。問題是這不包括我點擊的按鈕的名稱/值對。 jQuery的網站上說，他們這樣做的目的（eventhough他們應該在其個人意見）：

「的.serializeArray()方法使用標準的W3C規則successful controls，以確定哪些元素應該包括;特別元素不能被禁用，必須包含一個name屬性，因爲沒有使用按鈕提交表單，因此沒有提交按鈕值被序列化。「

他們怎麼能假定表單沒有用按鈕提交？我相信這是毫無意義和錯誤的假設。

根據W3C規則，爲提交表單而激活的按鈕被視爲成功控件。

由於jQuery的開發者已經決定這麼做，我可以假設有另一種方法，不是排除序列化中激活的按鈕嗎？

編輯：這是我的形式可能是什麼樣子簡單的例子...

<!DOCTYPE html5> 
<html> 
<head> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js" type="text/javascript"></script> 
<script type="text/javascript"> 
    $(document).ready(function() { 
    $('#form').submit(function(e) { 
     // put your breakpoint here to look at e 
     var x = 0; 
    }); 
    }); 
</script> 
</head> 
<body> 
    <form id="form"> 
    <input name="name" type="text"><br/> 
    <input name="commit" type="submit" value="Save"/> 
    <input name="commit" type="submit" value="Cancel"/> 
    </form> 
</body>

來源

2010-10-24 DJTripleThreat

對於大家有沒有發現，同樣的問題與''

沒有，行爲是基於<form>，不的submit事件例如按鈕在JavaScript中輸入或撥打.submit()。您在這裏混合使用2個概念，.serialize()或.serializeArray()可能會或可能不會有任何東西做一個按鈕點擊 - 它只是一個單獨的事件，他們沒有連接。這些方法的級別高於此：您可以出於任何原因隨時序列化表單（或其子集）。

但是，您可以添加提交名稱/值對像一個正常的形式從該按鈕提交會的，如果你從一個按鈕提交例如：

$("#mySubmit").click(function() { var formData = $(this).closest('form').serializeArray(); formData.push({ name: this.name, value: this.value }); //now use formData, it includes the submit button });

來源

2010-10-24 11:04:30

@尼克，感謝您的快速回復。我將編輯'rails.js'（並可能提交補丁）以完成此工作。我會給這個鏡頭。 – DJTripleThreat 2010-10-24 11:10:57

@DJTripleThreat - 我不熟悉他們的代碼，是否有可能在外部替換事件處理程序？如果你可以發佈它，我會看看 – 2010-10-24 11:12:06

@Nick - 檢查gh上的文件：http://github.com/rails/jquery-ujs/blob/master/src/rails.js。看看第34行和第76行的處理程序。有沒有辦法找出在'.submit（function（e）{}）''傳遞的'event'對象中單擊了哪個按鈕？ – DJTripleThreat 2010-10-24 11:49:25

我用下面的代碼片段，基本上是增加與同名的隱藏元素

var form = $("form"); 
$(":submit",form).click(function(){ 
      if($(this).attr('name')) { 
       $(form).append(
        $("<input type='hidden'>").attr({ 
         name: $(this).attr('name'), 
         value: $(this).attr('value') }) 
       ); 
      } 
     }); 

$(form).submit(function(){ 
    console.log($(this).serializeArray()); 
});

來源

2012-06-30 05:57:31 digitalPBK

這個解決方案是「通用」作爲它會處理所有的輸入提交，每個傳遞上提交一個表單變量。

$(document).ready(function(){ 
    $('input:submit').each(function(){ 
     $(this).click(function(){ 
      var formData = $(this).closest('form').serializeArray(); 
      formData.push({ name: $(this).attr('name'), value: $(this).val() }); 
     }); 
    }); 
});

來源

2013-03-20 21:44:01

你不需要'each'調用 - 直接在代表所有輸入元素的jquery對象上直接調用'click' – SpoonMeiser 2014-05-01 14:16:55

var form = button.closest('form'); 
    var serialize = form.serialize(); 

    if (button.attr('name') !== undefined) { 
     serialize += '&'+button.attr('name')+'='; 
    }

來源

2017-08-18 20:12:39 kjdion84

jQuery的serializeArray不包括被點擊的提交按鈕

回答

相關問題