Ajax post serialize（）不包含按鈕名稱和值

My $ .ajax（）不會序列化按鈕名稱和值。Ajax post serialize（）不包含按鈕名稱和值

我有一個非常簡單的形式。它有一個按鈕和一個文本框。

<form action="/MyController/MyAction" data-ajax-method="post" 
    data-ajax-mode="replace" data-ajax-target="#mypartial" id="myform" 
    method="post"> 
     <button type="submit" class="positive" name="button" value="click1"> 
      <img src="/Id/Images/Icons/16/enabled/tick.png" title="click1"> 
      Click 
     </button> 
     <input id="txtBlah" name="txtBlah" type="text" value="hello"> 
    </div> 
</form>

當我打電話$(this).serialize()，文本框包含在字符串中而不是按鈕。

Debug.Log($(this).attr('id')); //== 'myform' 
Debug.Log("data: " + $(this).serialize()); //== data: txtBlah=hello

我在研究中指出，在其他問題中，主要原因是按鈕上缺少名稱元素。我有一個名稱元素。

我也嘗試了一個非常簡單的<input type="submit" name="mysubmit" />，它沒有改變任何東西。

的解決方案，我用

var buttonSubmit = (function (e) 
{ 
    e.preventDefault(); 
    var form = $(this).closest('form'); 
    form.attr('data-button-name', $(this).attr('value')); 
    form.closest('form').submit(); 
});

來源

2012-03-26 Valamas - AUS

jQuery的serialize()是相當明確的關於不編碼按鈕或輸入提交，因爲他們不認爲是「成功的控制」。這是因爲serialize（）方法無法知道單擊了哪個按鈕（如果有的話）。

我設法通過捕捉按鈕單擊，序列化表單，然後將單擊按鈕的編碼名稱和值添加到結果來解決問題。

$("button.positive").click(function (evt) { 
    evt.preventDefault(); 

    var button = $(evt.target);     
    var result = button.parents('form').serialize() 
     + '&' 
     + encodeURI(button.attr('name')) 
     + '=' 
     + encodeURI(button.attr('value')) 
    ; 

    console.log(result); 
});

來源

2012-03-26 04:55:42 slashingweapon

您還可以讓按鈕單擊事件冒泡到表單，然後使用event.srcElement來確定哪個按鈕導致提交。 – slashingweapon 2012-03-26 05:15:30

感謝您的幫助。我的解決方案受到你的啓發。我更新了我原來的問題。 – 2012-03-26 06:18:12

這是一個全面的解決方案，它將在按鈕的包含窗體中查找輸入。如果它存在，它將設置該值，否則它將創建一個隱藏的輸入並設置其值。如果您不想立即提交表單，這也可能很有用。

$(document).on('click', '[name][value]:button', function(evt){ 
    var $button = $(evt.currentTarget), 
     $input = $button.closest('form').find('input[name="'+$button.attr('name')+'"]'); 
    if(!$input.length){ 
     $input = $('<input>', { 
      type:'hidden', 
      name:$button.attr('name') 
     }); 
     $input.insertAfter($button); 
    } 
    $input.val($button.val()); 
});

來源

2014-02-28 07:01:46 stephenr85

最好的全方位解決方案！ – 2015-12-30 09:21:51

Ajax post serialize（）不包含按鈕名稱和值

回答

相關問題