Why is my form of script only working in the second view

Question

I am trying to add a script to my html form that will remove all unchecked checkboxes and replace them with a hidden field and a no. If the checkboxes are checked, they will show the value yes.

Please note: I cannot add this hidden field to the form because the site I host it does not allow two form fields with the same name as before: Post checked checkboxes

For some reason, the script only works when the page loads, submit the form with all the checkboxes checked, and then submit the form again. If I reload the page, I must do the same again. This shows what I mean: https://gfycat.com/HarshWaterloggedKestrel

Is it because I add an event listener after submitting the first form?

Here is a fiddle with sample code: https://jsfiddle.net/gvd1jr0o/6/

Here is my script:

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

I think that you are going about this completely wrong.

onLoad , . , , . , . , , .

jQuery , /.

Answer 2

( ). document.ready() ( ), , .

Answer 3

I changed the insertion of the input tag and preventDefault to submit, check the code below and let me know if you need to. There is no code written to install yes when checking it.

$(function() {
$("#foo").submit(
  function(e) {
    e.preventDefault();
  	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 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>

Run codeHide result