CODEWITHSUNDEEP
javascriptjqueryhtmlforms
cgrouge
cgrouge

Reputation: 177

How to assign value to unchecked checkboxes

I'm creating a form with multiple checkboxes and I want to value of the checked checkboxes to be "yes" and the value of unchecked checkboxes to be "no". The site I'm hosting my form on does not let me add the hidden field with the same name and a different value so I have to find script that will add the hidden checkbox on submission and include the value of "no". Currently, when I submit the form the unchecked boxes are recorded as undefined but for data purposes I need it to be filled with "no".

Here is what I found:

$(document).ready($("#foo").submit(
  function() {

    // Add an event listener on #foo submit action...
    // For each unchecked checkbox on the form...
    $(this).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
        var form = $(this)[0].form;
        $(form).append(input);

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

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

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

Why is the script not working?

Upvotes: 0

Views: 469

Answers (4)

cgrouge
cgrouge

Reputation: 177

I was able to use this much simpler script. Works perfectly.

$('#foo').click(function () {
    $(this).find('input[type="checkbox"]').each( function () {
        var checkbox = $(this);
        if( checkbox.is(':checked')) {
            checkbox.attr('value','yes');
        } else {
            checkbox.after().append(checkbox.clone().attr({type:'hidden', value:'no'}));

        }
    });
});

Upvotes: 0

Z.Z.
Z.Z.

Reputation: 704

  1. You need to check out the jQuery API documents

$(document).ready(function(){}); it takes function callback, which may not needed here.

$("#foo").submittakes function callback, which will be called right before the form is submitted.

No need to wrap selector in $.find

  1. You need to figure out the context of this

The this in $(this).attr("name") is referring the input box

The this in $(this)[0].form is still the input box

I guess you are trying to get the reference of forms. You may use document.forms

Upvotes: 2

bormat
bormat

Reputation: 1379

It isn't normal to have severals input with same name you can put the value directly in checkbox 

 $(this).find($("input:checkbox:not(:checked)")).each(function(){
    $(this).val($(this).is(':checked') ? "yes" : "no")
 })

Upvotes: 0

Nitin Misra
Nitin Misra

Reputation: 76

You need to change the input with $(this). Within the .each function $(this) will refer to the checkbox itself.

Upvotes: 0

Related Questions