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.

I am not certain what you are trying to do. You have 28 select elements, and you want to change the name to something different? Would all 28 have the same name? — James Black
– James Black, Commented Aug 29, 2009 at 4:59
yeah.. they would.. as i said its because javascript and php want them differently. — user165242
– user165242, Commented Aug 29, 2009 at 5:20

Christian C. Salvadó · Accepted Answer · 2009-08-29 05:28:54Z

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

edited Aug 29, 2009 at 5:28

answered Aug 29, 2009 at 5:00

Christian C. Salvadó

831k185 gold badges929 silver badges845 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Christian C. Salvadó Over a year ago

You're welcome, remember that there is almost always a way to avoid using eval... jslint.com/lint.html#evil

Glenn · Accepted Answer · 2009-08-29 05:06:25Z

0

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.

answered Aug 29, 2009 at 5:06

Glenn

5,3514 gold badges30 silver badges31 bronze badges

2 Comments

user165242 Over a year ago

I have about 28 select elements. if i dont add the [] after dropdown php will just take in the last (28th) element and leave the rest.

user165242 Over a year ago

Its like it needs to be notified that there would be tags with the same name, and will build up an array for that.

user165242 · Accepted Answer · 2009-08-29 05:12:28Z

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.

Amol M Kulkarni · Accepted Answer · 2013-09-11 11:38:01Z

0

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.

edited Sep 11, 2013 at 11:38

Amol M Kulkarni

21.7k34 gold badges125 silver badges165 bronze badges

answered Sep 11, 2013 at 11:11

jdlc

1

Collectives™ on Stack Overflow

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

4 Answers 4

1 Comment

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related