Link to home
Create AccountLog in
Avatar of freezilla
freezilla

asked on

Convert HTML JavaScript link to form component

I've got a form using JavaScript that works fine, but instead of listing out HTML links, I want the links to appear in a dropdown menu.  I'm nearly there but keep getting the syntax wrong.

How would I convert this:
<a href="javascript:changer('Arizona')">Arizona</a>

to a form component?
Something like...
<select name="state">
<option value="javascript:changer('Arizona')">Arizona</select>
</select>
Avatar of Dave Baldwin
Dave Baldwin
Flag of United States of America image

As I see you need just Javascript to work. onchange you call JS function changer()

Two ways:
<select name="state">
<option value="onchange(changer('Arizona'))">Arizona</select>
</select>

Open in new window

or
<select name="state">
<option value="onchange(changer(this))">Arizona</select>
</select>

Open in new window

Avatar of freezilla
freezilla

ASKER

te-edu's are what I'm looking for, though I tried both of his formats and neither seem to work.  Basically these functional links run the script "changer" so when I hover over them, it reads:

Run script "changer('Arizona')"

Also I think the </select> tag should be </option> unless I'm totally mistaken.
Basically this code below works when I click on a state, the respective cities show up (so if I click on Arkansas I get Little Rock, Conway, Benton, etc.)

<a href="javascript:changer('Arkansas')">Arkansas</a> | 
<a href="javascript:changer('California')">California</a> | 
<a href="javascript:changer('Florida')">Florida</a> | 
<a href="javascript:changer('New York')">New York</a>

But I want it in a drop down menu and not listed out as hyperlinks.

The name of the form is "theForm" and the name of the select is "theState", but for some reason I can't get it to function properly.  Any ideas?

<select name="theState" OnChange="javascript:changer(theForm.theState.options[selectedIndex].value)">
     <option selected>Please Select a State</option>
     <option value="javascript:changer('Florida')">Florida</option>
</select>

This can't be too difficult.  This works as an HTML link, I just need it to function inside a dropdown menu as opposed to a text link.
My mistake

<select name="state" onchange(changer(this)) >
<option value="Arizona">Arizona</select>
</select>

Open in new window


Javascript

function changer(el){
alert(el);
}

Open in new window

Ok, this still isn't working.  Here's my code...

<script type="text/javascript" src="dynamicDropDown.js"></script>
<script type="text/javascript">
function changer(el){
alert(el);
}
</script>

<select name="theState" onchange(changer(this)) >
<option value="">--Select a State--</option>
<option value="Florida">Florida</option>
<option value="California">California</option>
</select>
Working code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript">
function changer(selectObj){
	 var idx = selectObj.selectedIndex; 
 // get the value of the selected option 
 var which = selectObj.options[idx].value; 

alert(which);
}


</script>
</head>

<body>

<select name="state"  onchange="changer(this)">
<option value="Arizona" >Arizona</option>
<option value="California">California</option>

</select>



</body>
</html>

Open in new window



or this both working
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript">
function changer(selectObj){

alert(selectObj);
}


</script>
</head>

<body>

<select name="state"  onchange="changer(this.options[selectedIndex].value)">
<option value="Arizona" >Arizona</option>
<option value="California">California</option>

</select>



</body>
</html>

Open in new window


ASKER CERTIFIED SOLUTION
Avatar of te-edu
te-edu
Flag of Serbia image

Link to home
membership
Create an account to see this answer
Signing up is free. No credit card required.
Create Account
YES!  I knew it wasn't that hard, but was stumped.  Thank you!