How do we change the name of a html select element using javascript and only the tags' name to reference to?

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

Answer 2

I think you're approaching this problem wrong. You should probably use "id" to uniquely identify elements. Then you can use one of the many libraries available for free (jQuery, dojo query, ....) to provide you a nicer way to select elements from the page. Either by giving your specific "<select>" elements class names, or just by finding all the "select" elements on the page.

I'm completely in the dark as to why "[]" at the end of the name would make a difference for you. But I'm not familiar with php.

Answer 3

Using this box because i could display the code.

If i named the element as "dropdown[]" I would be getting an error like in this case:-

function addup(){
var tot=0;
for(i=0;i<(document.payment.dropdown.length);i++)
    {
        //alert(i);
        var find=document.payment.dropdown[][i];
        var check=find.options[find.selectedIndex].value;
        //alert(check);

                    if(check.substring(0,3)=='pay')
                    {
                    var other="document.payment."+check.substring(4)+"_amount.value";
                    var tot1=eval(other);
                    //alert(tot1);
                    tot+=parseInt(tot1);

                    }

                    document.payment.total_amount.value=tot;
                    calcTotal();


    }

}

Pardon the shabby code, but this doesnt seem to work if i name it as "dropdown[]". So i need the name to be "dropdown" in the beginning and then it should change to "dropdown[]" onsubmit.

Answer 4

I've just found your question.

Why to just add a id (example 'itsID') tag to your select and then point it to change its name with:

var ref = document.getElementById('itsID');
        ref.name = "dropdown[]";

It works for me with ref.