How to manipulate form field values in javascript

Question

I'm trying to get the value of a few checkboxes and enter them in a hidden form field.

My checkboxes look like this:

<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="">
   <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.

I'm using the following javascript

function SetHiddenFieldValue()
{
  var checks = document.getElementsByName("checkbox");
  var hiddenFieldVal = "";

  for(i = 0; i < checks.length; i++)
  {

    if(hiddenFieldVal != "")
       hiddenFieldVal += ",";
    hiddenFieldVal += checks[i].value;
  }

  document.getElementById('my-item-name').value = hiddenFieldVal;
}

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,

Answer 1

for(i = 0; i < checks.length; i++)
{
    if (!checks[i].checked)
        continue;
    ....
}

Answer 2

You need to give the checkboxes the same name to have them grouped:

<input type="checkbox" name="food[]" id="chicken" value="chicken"/>Chicken
<input type="checkbox" name="food[]" id="meat" value="meat"/>Meat

And in your JavaScript function:

function SetHiddenFieldValue() {
    var checks = document.getElementsByName("food[]");
    var hiddenFieldVal = "";
    for (var i=0; i<checks.length; i++) {
        if (checks[i].checked) {
            if (hiddenFieldVal != "")
                hiddenFieldVal += ",";
            hiddenFieldVal += checks[i].value;
        }
    }
    document.getElementById('my-item-name').value = hiddenFieldVal;
}

Answer 3

You forgot to test for checks[i].checked

function SetHiddenFieldValue() { 
  var checks = document.getElementsByName("checkbox");
  var hiddenFieldVal = ""; 
  for(i = 0; i < checks.length; i++) {
    if (checks[i].checked) {
      if(hiddenFieldVal != "")
        hiddenFieldVal += ",";
      hiddenFieldVal += checks[i].value;
      }
    }
  }
  document.getElementById('my-item-name').value = hiddenFieldVal; 
}

Answer 4

Hi your best to put the values into an array, makes it easier to then create the comma separated value. Also makes it a lot easier if you add more options later.

function SetHiddenFieldValue()
{
    var checks = document.getElementsByName("checkbox");
    var foods = new Array();
    for (i = 0; i < checks.length; i++)
    {
        if (checks[i].checked)
        {
           foods[i] = checks[i].value; 
        }
    }
    document.getElementById('my-item-name').value = foods.join(",");
}