Ajax post serialize() non include il nome e il valore del pulsante

Question

Il mio $ .ajax() non sta serializzando il nome e il valore del pulsante.

Ho una forma molto semplice. Ha un pulsante e una casella di testo.

<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> 

quando chiamo $(this).serialize(), la casella di testo è incluso nella stringa, ma non il pulsante.

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

Ho notato durante la ricerca che con altre domande il motivo principale era un elemento nome mancante sul pulsante. Ho un elemento del nome.

Ho anche provato a creare un semplice <input type="submit" name="mysubmit" /> che non ha modificato nulla.

soluzione che ho usato

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

Answer 1

di jQuery serialize() è piuttosto esplicito di non codifica pulsanti o inviare ingressi, perché non sono considerati come "controlli di successo". Questo perché il metodo serialize() non ha modo di sapere quale pulsante (se esiste!) È stato cliccato.

Sono riuscito ad aggirare il problema catturando il clic del pulsante, serializzando il modulo e quindi attaccando sul risultato il nome e il valore codificati del pulsante cliccato.

$("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); 
}); 

Answer 2

Ecco una soluzione completa che cercherà un input nel modulo contenente il pulsante. Se esiste, imposterà il valore, altrimenti creerà un input nascosto e ne imposterà il valore. Questo può anche essere utile se non vuoi inviare il modulo immediatamente.

$(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()); 
});