Solved

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

Posted on 2011-03-08
2
299 Views
Last Modified: 2012-05-11
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

0
Comment
Question by:pda4me
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
2 Comments
 
LVL 15

Accepted Solution

by:
ncoo earned 500 total points
ID: 35072187
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
 

Author Closing Comment

by:pda4me
ID: 35072306
U R A ROCKSTAR!!!!!  THANKS SO MUCH!!!
0

Featured Post

Don't Cry: How Liquid Web is Ensuring Security

WannaCry is just the start. Read how Liquid Web is protecting itself and its customers against new threats.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

These days socially coordinated efforts have turned into a critical requirement for enterprises.
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
This tutorial will teach you the core code needed to finalize the addition of a watermark to your image. The viewer will use a small PHP class to learn and create a watermark.
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

695 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question