Ajax post serialize() не включает имя и значение кнопки

My $.ajax() не сериализует имя и значение кнопки.

У меня очень простая форма. Он имеет кнопку и текстовое поле.

<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

В ходе исследования я отметил, что с другими вопросами основная причина заключалась в отсутствии элемента имени на кнопке. У меня есть элемент name.

Я также пробовал сделать очень простой <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();
});

Ответы

Ответ 1

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

Ответ 2

Здесь доступно решение, которое будет искать входной сигнал в кнопке, содержащей форму. Если он существует, он установит значение, иначе он создаст скрытый ввод и установит его значение. Это также может быть полезно, если вы не хотите немедленно отправлять форму.

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