jQueryのserialize（）関数にボタンの値を含めるにはどうすればいいですか？

Question

フォームに2つのボタンがあります。

<button type="submit" class="btn btn-danger" value="Send Back" name="Save">Send Back</button> 
    <button type="submit" class="btn btn-primary" value="Approve" name="Save">Approve</button> 

私はjqueryの$.ajax()を使用してフォームデータを転記すると、フォームデータが最初にシリアル化されます。ここに私のconsole.log()の出力で

(function() { 
    'use strict'; 
    function process(event) { 
     event.preventDefault(); 
     var $form = $(this); 
     var data = $form.serialize(); 
     console.log('posted data', data); 

     $.ajax({ 
      type: 'POST', 
      url: url, 
      data: data 
     }).done(function(data) { 
      ... 
     }); 
    } 
    $(document).on('submit', 'form', process); 
})(); 

、私は、フォーム内の他のすべてのフィールドを見ることができるシリアル化されますが、送信ボタンの値が失われます。

serialize()関数のボタンの値をjQueryに含めるように指示する設定はありますか？

Answer 1

はmap()機能を試してみて、serialize()あなたがdocument.activeElementのおかげでクリックされたボタンを知って使用することができます

var res = $('form').children().map(function(){ 
 
if($(this).attr('name')) //prevent the element without name 
 
return $(this).attr('name')+'='+$(this).attr('value') 
 
}).get(); 
 

 
console.log(res.join('&'));

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<form> 
 
<input name="sss" value="ssss"> 
 
<input name="sss" value="ssss"> 
 
    <button type="submit" class="btn btn-danger" value="Send Back" name="Save">sss</button> 
 
    <p>ddddddddd</p> 
 
    <button type="submit" class="btn btn-primary" value="Approve" name="Save">sss</button> 
 
</form>

Answer 2

のような文字列を作成します。

ボタンの値が必要な場合は、value属性を使用してエンコードし、uriパラメータの最後に入力します。

(function() { 
    'use strict'; 
    function process(event) { 
     event.preventDefault(); 
     var $form = $(this); 
     var data = $form.serialize()+'&save='+encodeURI(document.activeElement.getAttribute('value')); 
     console.log('posted data', data); 

     $.ajax({ 
      type: 'POST', 
      url: url, 
      data: data 
     }).done(function(data) { 
      ... 
     }); 
    } 
    $(document).on('submit', 'form', process); 
})();