web-dev-qa-db-ja.com

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

2つのボタンがあるフォームがあります。 1つはレコードを保存するためのもので、もう1つは保存手順をキャンセルするためのものです。私は_Rails.js_ （知らない人のための一般的なAJAX/jQueryプラグイン）控えめなjavascript/ajax呼び出しのためにjQueryで動作するjavascriptファイルを使用しています。フォームデータをajax経由で送信する場合、クリックされたボタンの名前と値を残りのデータと共に送信して、クリックされたボタンに基づいて何をするかを決定できるようにします。

_Rails.js_ファイルのメソッドは、サーバーにフォームデータを送信するために.serializeArray()を使用します。問題は、これにはクリックしたボタンの名前と値のペアが含まれていないことです。 jQueryのWebサイトでは、意図的にこれを行うと述べています（ただし、そうすべきだとの私の意見です）。

「.serializeArray()メソッドは、 成功したコントロール の標準W3Cルールを使用して、含める要素を決定します。特に、要素を無効にすることはできず、name属性を含める必要があります。送信ボタンなしフォームはボタンを使用して送信されなかったため、値はシリアル化されます。」

ボタンを使用してフォームが送信されなかったとどのように想定できますか？これは意味がなく、私が信じている間違った仮定です。

W3Cルールでは、フォームの送信のためにアクティブ化されたボタンは、成功した​​コントロールと見なされます。

JQueryの開発者はこれを意図的に行うことを決定したので、シリアル化でアクティブ化されたボタンをDOES N'T除外する別の方法があると仮定できますか？

編集：ここに私のフォームがどのように見えるかの簡単な例があります...

_<!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>
_
jqueryserializationw3cform-submit
55
aarona

ありません、動作はsubmitイベントに基づいていますof the _<form>_ではなく、of a button、例えばEnterキーを押すか、JavaScriptで .submit() を呼び出します。ここでは、2つの概念を組み合わせています。 .serialize() または .serializeArray() は、anything =ボタンのクリックで行う-それは完全に独立したイベントであり、接続されていません。それよりも高いレベルのこれらのメソッド：何らかの理由でいつでもフォーム（またはそのサブセット）をシリアル化できます。

ただし、たとえばボタンから送信する場合は、そのボタンから送信する通常のフォームのように、名前と値の送信ペアを追加できます。

_$("#mySubmit").click(function() {
  var formData = $(this).closest('form').serializeArray();
  formData.Push({ name: this.name, value: this.value });
  //now use formData, it includes the submit button
});
_
67
Nick Craver

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

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

これを解決するかなりきれいな方法：

<form>
    <input type="hidden" name="stuff" value="">
    <button type="submit" onclick="this.form.stuff.value=this.value" value="reset">reset</button>
    <button type="submit" onclick="this.form.stuff.value=this.value" value="delete">delete</button>
</form>
4
commonpike

このソリューションは、すべての入力送信を処理し、それぞれを送信時にフォーム変数として渡すため、「ユニバーサル」です。

$(document).ready(function(){
    $('input:submit').each(function(){
        $(this).click(function(){
            var formData = $(this).closest('form').serializeArray();
            formData.Push({ name: $(this).attr('name'), value: $(this).val() });
        });
    });
});
4
Robert Waddell
    var form = button.closest('form');
    var serialize = form.serialize();

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