select onchange with same ID

General PHP Help
#1

I have two dropdown lists. One at the top of the page and one at the bottom. They both have the following code :

[php]function setNumberPerPage() {

echo"<form name = 'form' action = 'indexbody.php' method = 'GET'>
	<select id='amount' name='amount' onchange='test()'>
	<option  value = '12'>12</option>
	<option  value = '24' selected>24</option>
	<option  value = '36'>36</option>
	<option  value = '48'>48</option>
	</select></form>";

}[/php][code][/code]

If one of the dropdown lists change, the other with the same ID should get the same value. How can I do this ?

Thanks in advance.

#2

Having the same ID twice is just asking for trouble, you’re get different behaviors in different browsers when walking the DOM with Javascript.

#3

As topcoder said. ID in the html dom is used to identify one unique object, that’s the whole reason to use ID. Use class if you want to apply something to multiple elements.

[php]

12
24
36
48

12 24 36 48 [/php]

GET is default in forms so no reason to send it in. It is also default to submit to the same URL you’re on, so if indexbody is the current page then action can be left out as well.

First of all I added “this” to the onchange function call, so that we can get the form element that calls the function. We need this in order to know which form field has the new value.

Then we get the selected field, like you did before

Then we get all other fields with the class amount

Lastly we loop through all those other fields and set their “selectedIndex” to the selected fields

[hr]

I highly recommend using the development tools in your browser. Both FF and Chrome support breaking in javascript which will then allow you to write javascript in the console. What’s great about it is that it will auto-complete, so you can write “field.” and it will suggest a lot of available options, like “field.selectedIndex”, hitting enter will give you the value, just like in JS.

#4

I did it like this :

[php]function setNumberPerPage($id) {

echo"<form name = 'form' action = 'indexbody.php' method = 'GET'>
	<select id='$id' name='amount' onchange='test(this)'>
	<option  value = '12'>12</option>
	<option  value = '24' selected>24</option>
	<option  value = '36'>36</option>
	<option  value = '48'>48</option>
	</select></form>";

}[/php]

[code][/code]

And it works !

#5
var other = document.getElementsByClassName('amount');

This doesn’t work in Internet Explorer 8 and earlier!

#6

They have some workarounds listed here…

But I wouldn’t worry to much about older browsers… Someplace you have to draw the line

Sponsor our Newsletter | Privacy Policy | Terms of Service