Question

HI! I have a problem with changing the name of a select element. I have about 28 select elements generated on the page. Each of these select elements has been given the name “dropdown”. I use this name to calculate the total based on the option selected.

But when i pass this information to a php page, it shows only the last select element. To overcome this i need to have all the select tags labelled as “dropdown[]” onsubmit. This is because i need “dropdown” for javascript to read it and i need “dropdown[]” for php to process it.

<select name="dropdown">
<option>
<option>
<option>
</select>

should be changed to :

<select name="dropdown[]">
    <option>
    <option>
    <option>
    </select>

while validating the form in the end. How do i go about it? I dont use ids along with the name, because I think it might make it complex.

Answer 1

I would recommend you to stay with the ‘dropdown[]’ name, then you can use the getElementsByName function, which will return you an array that you can iterate, of elements with the given name in the document:

var dropdownArray = document.getElementsByName('dropdown[]'),
    i, element, n = dropdownArray.length;

for (i = 0; i < n; i++) {
  element = dropdownArray[i];
  // you can check the value of each element here...
}

Edit: Modifying your code:

function addup(){
  var tot = 0, i, // i declaration was missing
      dropdowns = document.payment.elements['dropdown[]'];

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

    //alert(i);
    var find = dropdowns[i];
    var check = find.options[find.selectedIndex].value;
    //alert(check);

    if(check.substring(0,3)=='pay') {
      // not using eval anymore
      var tot1 = document.payment.elements[check.substring(4)+'_amount'].value; 
      //alert(tot1);
      tot += +tot1; // unary plus operator to convert to number
    }
    document.payment.total_amount.value=tot;
    calcTotal();
  }
}