How to manipulate form field values in jQuery

Question

I'm trying to get the value of a few checkboxes and enter them in a hidden form field, is there a way to do that in jQuery,

my checkboxes look like this

<form>
    <input type="checkbox" name="chicken" id="chicken" />Chicken

    <input type="checkbox" name="meat" id="meat" />Meat
</form>

<form method="post" action="">
    <input type="hidden" name="my-item-name" value="" />
    <input type="submit" name="my-add-button" value=" add " /> 
</form>

I only need to submit the hidden field data so I'd like the value of the hidden field change when the checkbox is ticked. So if the first checkbox is ticked I'd like the value of the hidden field to become chicken and if both of them are ticked the value should be chicken,meat.

thanks for your help.

Answer 1

I think this is a cleaner approach to what has been offered so far...

var values = [];
$('#chicken, #meat').filter(':checked').each(function() {
    values.push($(this).attr('id'));
});
$('#hidden_field').val(values.join(','));

Instead of updating the hidden field when a user checks one of the boxes, you should run the above code in the form's submit event, so it only has to do it once when the form is finally being sent:

$('#myform').submit(function() {
    // update the hidden field...
    var values = [];
    $('#chicken, #meat').filter(':checked').each(function() {
        values.push($(this).attr('id'));
    });
    $('#hidden_field').val(values.join(','));

    // and submit the form
    return true;
});

Also, as it is right now the only place where I could easily tell the value you want is coming from is the id attribute of the checkboxes. The solutions that are using val() that were posted would return blank because you have no value="" attribute in your checkboxes. If you wanted to update the hidden field with the value="" attribute (which is the expected behavior) you should add the attribute in and then change $(this).attr('id') to $(this).val() in the code above.

EDIT (in response to comment):

If you have more than the 2 checkboxes that you show, you need to change the selector. Above I used $('#chicken, #meat'). If you wanted to include all the checkboxes in the document, you would change it to $('input:checkbox'), but probably the best way (to avoid unexpected behavior later on) is to give all the checkboxes you want to include in the hidden field a common class and then make your selector something like $('input.myclass:checkbox'). Finally, as long as you match your form's ID to ID I used above (myform) then the updating of the hidden field should be taken care of for you automatically when the form is submitted (assuming also the hidden field has an id of hidden_field and the user has Javascript enabled...). Also, you need to make sure the form binding code above is wrapped around $(document).ready(function() { // code here }); otherwise the code will run before the DOM is ready and you will be binding the event to a non-existent element.

Answer 2

I think you can do this another way, if you can work with a single form, you should do like that :

<form method="post" action="">
    <label><input type="checkbox" name="food[]" value="chicken" /> Chicken</label>
    <label><input type="checkbox" name="food[]" value="meat" /> Meat</label>
    <input type="submit" name="my-add-button" value=" add " /> 
</form>

You'll get an array by accessing $_POST['food'] in PHP, but it works nearly the same in other server side languages :

$food = $_POST['food'];

$food will be :

['chicken', 'meat']; // If both are checked

Answer 3

give the "my-item-name" hidden field an id (can be the same as name) give the checkboxes the same name! Then in the checkbox's onclick events call a function like so onclick="SetHiddenFieldValue();"

the javascript function woudl then be something like:

function SetHiddenFieldValue()
{
  var checks = document.getElementsByName("checkboxesname");
  var hiddenFielVal = "";
  for(i = 0; i < checks.length; i++)
  {
    if(hiddenFielVal != "")
     hiddenFielVal += ",";
    hiddenFielVal += checks[i].value;
  }
  document.getElementById('hiddenfieldid').value = hiddenFielVal;
}

Answer 4

You could set the value of the hidden field just before submitting the form using onsubmit event:

<head>

<script type="text/javascript">
function check() {
    var isChicken = document.getElementById('chicken').checked;
    var isMeat = document.getElementById('meat').checked;
    if (isChicken && isMeat) {
        document.getElementById('my-item-name').value = 'chicken,meat';
    } else if (isChicken) {
        document.getElementById('my-item-name').value = 'chicken';
    }
    return true;
}
</script>
</head>
<body>

<form>
    <input type="checkbox" name="chicken" id="chicken" value="chicken"/>Chicken
    <input type="checkbox" name="meat" id="meat" value="meat"/>Meat
</form>

<form method="post" action="" onsubmit="return check();">
    <input type="hidden" name="my-item-name" id="my-item-name" value="" />
    <input type="submit" name="my-add-button" value=" add " /> 
</form>

</body>

Answer 5

Give the "my-item-name" hidden field an id

<input type="checkbox" id="chkBox" value="chicken" onclick="setHiddenControlValue('chicken');"/>Chicken
<input type="checkbox" id="chkBox" value="meat" onclick="setHiddenControlValue('meat');"/>Meat

and use the following JS function:-

function setHiddenControlValue(selectedValue) {
    document.getElementById("my-item-name").value = selectedValue;
}

Answer 6

Hi Colin, thanks for the reply, but when I add the items, it adds both of them, it doesn't check which one's been checked, is there a way to fix that, so when the first item is checked it'll only add that item and if both of them are checked, it'll add 2 items separated by comma,

thanks