How to use jQuery to grab the values of checkboxes and spit them into a different form field

Question

I have a form that contains a bunch of checkboxes. Before submitting the form, I'd like to grab the values of the checkboxes and stick them into a text field, then submit that.

So I might have: Red Orange X Yellow Blue X Green

And I'd like my textfield to end up with the content "Yellow, Green" .

This doesn't seem too complicated, but I am totally out of my league. I already use jQuery for a few other things so I have the framework ready, if that makes it easer.

Thanks for any advice --

Answer 1

(Doh, that was supposed to be a list. 5 colors, with only two of them checked. You'd think I'd look at the preview box, but that's too easy... :)

Answer 2

First hack at it (without testing):

var serializedCheckboxes = '';
$("input type='checkbox'").each(function() {
 if($(this).attr("checked")) {
  serializedCheckboxes += $(this).attr("value") + ',';
 }
});

$("input name='allchecks').attr("value", serializedCheckboxes);

Answer 3

fix to Josh code:

var serializedCheckboxes = '';
$("input[type=checkbox]").each(function() {
 if($(this).attr("checked")) {
  serializedCheckboxes += (serializedCheckboxes != '' ? ', ' : '') + $(this).attr("value");
 }
});

$("input[name=allchecks]").attr("value", serializedCheckboxes);

After my fix you should not get extra "," after last option.

Answer 4

Wow, cool. What do I do to make that fire when the form is submitted?

Answer 5

Just use this code:

$(function(){
    $('#YourFormID').bind('submit',function(){
     var serializedCheckboxes = '';
     $("input[type=checkbox]").each(function() {
      if($(this).attr("checked")) {
      serializedCheckboxes += (serializedCheckboxes != '' ? ', ' : '') + $(this).attr("value");
      }
     });
     $("input[name=allchecks]").attr("value", serializedCheckboxes);
    });
});

It starts when page is loaded and bind to "submit" event of your form correct function

Answer 6

Ah, OK. I knew it had to be something simple like that! One last tiny question... I only want this code to fire if the form in question has checkboxes. So if the form is checkbox-free, I don't want the code to fire at all. Is there an equivalent to a php "ifexists"?

Answer 7

So, more improvements. Add a class name (in my example "colorCheckBoxes") to all checkboxes with colors in your form (if checkboxes exists) - this help avoid problems when you want to use different additional checkboxes in your form for other purposes than selecting colors. Then use this code:

$(function(){
    $('#YourFormID').bind('submit',function(){
     var serializedCheckboxes = '';
     $(this).find("input[type=checkbox]").filter('.colorCheckBoxes').each(function() {
      if($(this).attr("checked")) {
      serializedCheckboxes += (serializedCheckboxes != '' ? ', ' : '') + $(this).attr("value");
      }
     });
     if (serializedCheckboxes != '')
      $(this).find("input[name=allchecks]").attr("value", serializedCheckboxes);
    });
});

Answer 8

Oh, that's great! Thank you so much -- you have totally saved my bacon. :)