<option in <select statement needs to use onChange event to change action

I have the following form where the options will in some cases dictate a change in action.  This is not working, how do I get this form to work?  I cannot put the onChange on the select statement because I need it to change based on the <option selected.

<form style="margin:0px;" action="/lee-county/residential?frame=RESI" method="post">
<table width="100%" border="0" cellspacing="0" cellpadding="3">
    <tr>
      <td><div style="padding-bottom:4px;">City: <select name="search_city">
        <option value="Alva">Alva</option>
        <option value="Bonita Springs" onChange="this.form.action='?frame=RESI&base=frames-collier';" >Bonita Springs</option>  
        <option value="Another" onChange="this.form.action='?frame=LOTL&base=frames-sanibel';" >Another</option>  
      </select></div>                   
<input type="image" id="WADbSearch1" name="WADbSearch1" src="/images/search.png" value="Submit">
		</form>                                                            
                        </td>
    </tr>
  </table>	
</form>

Open in new window

pda4meAsked:
Who is Participating?
 
ncooConnect With a Mentor Commented:
Add the following javascript to your page:

 
<script>
function dosomething() {
	var search_city = document.getElementById('search_city');
	var form = document.getElementById('form');
	if (search_city.value=='Bonita Springs') {
		form.action='?frame=RESI&base=frames-collier';
	} else if (search_city.value=='Another') {
		form.action='?frame=LOTL&base=frames-collier';
	}
	//comment out line, for testing only
	alert(form.action);
}
</script>

Open in new window


Update the html as follows:  

<form style="margin:0px;" action="/lee-county/residential?frame=RESI" method="post" id="form">
<table width="100%" border="0" cellspacing="0" cellpadding="3">
    <tr>
      <td><div style="padding-bottom:4px;">City: <select id="search_city" name="search_city" onchange="dosomething()">
        <option value="Alva">Alva</option>
        <option value="Bonita Springs">Bonita Springs</option>
        <option value="Another">Another</option>
      </select></div>
<input type="image" id="WADbSearch1" name="WADbSearch1" src="/images/search.png" value="Submit">
		</form>
                        </td>
    </tr>
  </table>
</form>

Open in new window


The onchange is on the select but we're checking the value each time.

Comment out the alert, it's only there for testing.
0
 
pda4meAuthor Commented:
U R A ROCKSTAR!!!!!  THANKS SO MUCH!!!
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.