Warum funktioniert mein Formularskript nur bei der zweiten Übermittlung?

Question

Ich versuche, meinem HTML-Formular ein Skript hinzuzufügen, das alle nicht aktivierten Kontrollkästchen entfernt und sie durch ein verstecktes Feld und den Wert "Nein" ersetzt. Wenn Checkboxen aktiviert sind, werden sie den Wert "Ja" anzeigen.

Bitte beachten Sie, dass ich dieses versteckte Feld in das Formular nicht hinzufügen kann, weil die Seite, die ich es Host auf nicht zwei Formularfelder mit dem gleichen Namen erlauben, wie ich schon vorgeschlagen gesehen habe: Post the checkboxes that are unchecked

Für einig Der Grund dafür ist, dass das Skript nur funktioniert, wenn ich die Seite lade, das Formular mit allen Kontrollkästchen unmarkiert abschicke und dann das Formular erneut absende. Wenn ich die Seite neu lade, muss ich dasselbe noch einmal machen. Dies zeigt, was ich beziehe: https://gfycat.com/HarshWaterloggedKestrel

Liegt es daran, dass ich den Ereignis-Listener nach der ersten Formularübergabe hinzufügen?

Hier ist eine Geige mit Beispielcode: https://jsfiddle.net/gvd1jr0o/6/

Hier mein Skript ist:

$("#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

Ich denke, du gehst das völlig falsch.

Fügen Sie Ihrem Formular oder Ihrer Seite zunächst einen onLoad-Ereignishandler hinzu, der Kontrollkästchen für alle nicht aktivierten Kontrollkästchen erstellt. Erstellen Sie dann einen Event-Handler für Ihre Checkbox-Elemente, der das relevante Eingabeelement für dieses Kontrollkästchen erstellt oder löscht, wenn sich der Status des Checks ändert. Auf diese Weise werden Ihre Kontrollkästchen bereits beim Absenden des Formulars erstellt. Ich denke, Sie haben derzeit eine Race-Bedingung, bei der Ihr Formular eingereicht wird, bevor Ihre Checkboxen erstellt werden.

Weitere Informationen zum Hinzufügen von Ereignishandlern zu Kontrollkästchen oder einem Formular/einer Seite finden Sie in der jQuery-Dokumentation.

Answer 2

Ihre Geige richtig funktioniert (wie ich verstanden). Sie können alles in document.ready() wickeln oder (es ist dumm) Sie vergessen Debugger wenn Konsole geöffnet ist.

Answer 3

i geändert hatte den Input-Tag hinzufügen und prevent für einreichen, prüfen Code unten und lassen Sie mich wissen, wenn Sie benötigen .. Es gibt keinen Code geschrieben ja zu setzen, wenn geprüft ..

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