jQueryのserializeArrayには、クリックされた送信ボタンは含まれていません


Answers

私は以下のスニペットを使用し、基本的に同じ名前の隠し要素を追加します

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

私は2つのボタンを持つフォームを持っています。 1つはレコードを保存するためのもので、もう1つは保存手順をキャンセルするためのものです。 私はrails.js (共通のAJAX / jQueryプラグインを知らない人のために) jQueryと控えめなjavascript / ajax呼び出しで動作するjavascriptファイルを使用しています。 フォームデータをajaxで送信すると、クリックしたボタンの名前と値を残りのデータと共に送信して、どのボタンがクリックされたかに基づいて何をすべきかを判断できるようにします。

rails.jsファイルのメソッドは、 rails.js .serializeArray()を使用してフォームデータをサーバーに送信します。 問題は、これは私がクリックしたボタンの名前と値のペアが含まれていないことです。 jQueryのウェブサイトは、彼らが目的に応じてこれを行うと述べています。

" .serializeArray()メソッドは、 正常なコントロールのために標準のW3Cルールを使用して、どの要素に含めるべきかを判断します。特に、要素を無効にすることはできず、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>



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

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