CODEWITHSUNDEEP
javascript
amir
amir

Reputation:

How to manipulate form field values in javascript

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,

Upvotes: 1

Views: 2660

Answers (4)

James
James

Reputation: 82096

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(",");
}

Upvotes: 0

S&#233;bastien Nussbaumer
S&#233;bastien Nussbaumer

Reputation: 6452

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; 
}

Upvotes: 0

Gumbo
Gumbo

Reputation: 655239

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;
}

Upvotes: 0

Greg
Greg

Reputation: 321638

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

Upvotes: 1

Related Questions