HTML drop down lists.

Hello, I want to include a list on my site like the example below. I want it to appear at the top of the page and the bottom. However when I do this the go button does not work.

I know why it is. It is because the list is repeated and the form names are conflicting.

Does anyone know how I could get it to appear twice and avoid this problem?
I don't really want to have to created two lists the same with different names.

<form name="htmlMenu">

<select name="htmlList" size="1" style="width:180px;">

<option value="">Please select...</option>
<option value="http://www.google.com">Google</option>

</select>
                                                                  
<input type="button" onClick="document.location = document.htmlMenu.htmlList.options [document.htmlMenu.htmlList.selectedIndex].value;"value="GO" style="width:50px;">
                                                                  
</form>                                                           
                    

Code (markup):

 

1. Take name off of the form, its not a valid form attribute.
2. Give each form a different id, such as id="form1" and id="form2".
3. While I would never use javascript for something so simple to do in PHP (more accessible), just replace

onClick="document.location = document.htmlMenu.value;"

Code (markup):

with

onclick="document.location = document.getElementById('form1').htmlList.value;"

Code (markup):

Notice the lowercase onclick (just for neatness and validity, uppercase attributes are invalid xHTML). Also notice I got rid of that selected index crap, as all you need to do is get the value of the actual select.

Then replace ('form1') with whatever the id of your first form is, each form will need a separate id.

 

Ok, thanks. I got the code from somewhere else.

However it doesn't solved the problem.

What I actually have is the list in a php file and I include it on the page.

At the moment I have to have 2 files with the same content, but different ids.

I need to use one file to be included on the same page.

 

Well then getting it to work won't be easy, unless you just create another file...

You will need to include both forms separately.

I'd recommend just using a simple PHP function:

<?php
function outputForm($id,$name){

return "
	<form id='".$id."'>

		<select name = '".$name."' style=\"width:180px;\">
			<option value=\"\">Please select...</option>
			<option value=\"http://www.google.com\">Google</option>
		</select>
                                                                  
		<input type=\"button\"
		onclick=\"document.location = document.getElementById('".$id."').".$name.".value;\"
		value=\"GO\" style=\"width:50px;\">
                                                                  
</form>";
} 
?>

PHP:

Then just echo it like this:

<?php echo outputForm("form1","selectbox1"); ?>

and

<?php echo outputForm("form2","selectbox2"); ?>

That will output the forms, both with different ids and names on the selectbox.

 

thanks for the help

do you know how to include a target="_blank" in this:

onclick="document.location = document.getElementById('form1').htmlList.value;"

 

If you're JS is inside of the href tag try this.target='_blank';

 

Its inside the input tag:

<input type="button" onclick="document.location = document.getElementById('mylist1').List1.value;"value="GO" style="width:50px;">