私のフォームスクリプトは2回目の投稿でのみ機能するのはなぜですか

Question

私はすべての未チェックのチェックボックスを削除し、隠しフィールドと値を "いいえ"に置き換えるスクリプトを自分のHTMLフォームに追加しようとしています。チェックボックスがチェックされている場合、「はい」の値が表示されます。

私が前に提案し見てきたように私はそれをホストするサイトは、同じ名前を持つ2つのフォームフィールドを許可していないので、私は、フォームにこの隠しフィールドを追加することはできません、ご注意：いくつかのためにPost the checkboxes that are unchecked

を理由は、スクリプトは、ページを読み込んで、すべてのチェックボックスをオフにしてフォームを送信してからフォームを再送信するときにのみ機能します。私がページをリロードすると、私は同じことをやり直さなければならない。これは私が何を参照しているかを示しています：

私は最初のフォーム提出の後にイベントリスナーを追加していますか？ここで

は、サンプルコードとフィドルである：ここではhttps://jsfiddle.net/gvd1jr0o/6/

は私のスクリプトです：

$("#foo").submit(
    function() { 
    var formEl = $(this);//get the reference of the form 
    debugger; 
    // Add an event listener on #foo submit action... 
    // For each unchecked checkbox on the form... 
    formEl.find("input:checkbox:not(:checked)").each(

     // Create a hidden field with the same name as the checkbox and a value of 0 
     // You could just as easily use "off", "false", or whatever you want to get 
     // when the checkbox is empty. 
     function(index) { 
     var input = $("<input>"); 
     input.attr('type', 'hidden'); 
     input.attr('name', $(this).attr("name")); // Same name as the checkbox 
     input.attr('value', "no"); // or 'off', 'false', 'no', whatever 

     // append it to the form the checkbox is in just as it's being submitted 
     formEl.append(input); //$("#foo") is referring to the form 

     } // end function inside each() 
    ); // end each() argument list 

    return true; // Don't abort the form submit 

    } // end function inside submit() 
);       

Answer 1

あなたはこれについて間違った方法をとっていると思います。

まず、すべてのチェックされていないチェックボックスのチェックボックスを作成するフォームまたはページにonLoadイベントハンドラを追加します。次に、チェックボックスの要素にイベントハンドラを作成します。イベントハンドラは、チェックされた状態が変更されたときに、そのチェックボックスに関連する入力要素を作成または削除します。フォームを送信すると、チェックボックスはすでに作成されています。私は現在あなたのチェックボックスが作成される前にあなたのフォームが提出されている競合状態があると思います。

イベントハンドラをチェックボックスやフォーム/ページに追加する方法の詳細については、jQueryのドキュメントを参照してください。

Answer 2

あなたのフィドルが正常に動作し（私は理解されるように）。 document.ready（）に入れてもいいし、コンソールが開いているときにデバッガーを忘れていても構いません（愚かです）。私がチェックしたときにはいを設定するために書かれた何のコードはありません。..コードの下にチェックし、必要な場合は私に知らせて、提出するための入力タグとのpreventDefaultを追加変更した

Answer 3

..

$(function() { 
 
$("#foo").submit(
 
    function(e) { 
 
    e.preventDefault(); 
 
    \t var formEl = $(this);//get the reference of the form 
 
    debugger; 
 
    // Add an event listener on #foo submit action... 
 
    // For each unchecked checkbox on the form... 
 
    formEl.find("input:checkbox:not(:checked)").each(
 

 
     // Create a hidden field with the same name as the checkbox and a value of 0 
 
     // You could just as easily use "off", "false", or whatever you want to get 
 
     // when the checkbox is empty. 
 
     function(index) { 
 
     var input = $("<input/>"); 
 
     input.attr('type', 'hidden'); 
 
     input.attr('name', $(this).attr("name")); // Same name as the checkbox 
 
     input.attr('value', "no"); // or 'off', 'false', 'no', whatever 
 

 
     // append it to the form the checkbox is in just as it's being submitted 
 
     formEl.append(input); //$("#foo") is referring to the form 
 

 
     } // end function inside each() 
 
    ); // end each() argument list 
 

 
    return true; // Don't abort the form submit 
 

 
    } // end function inside submit() 
 
);             
 
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<form id="foo"> 
 
    <input type=checkbox name="c1"/> 
 
    <input type=checkbox name="c2"/> 
 
    <input type=checkbox name="c3"/> 
 
    <input type=submit value=submit /> 
 
</form>