CODEWITHSUNDEEP
javascriptforms
Chris Jones
Chris Jones

Reputation: 1

Form event onChange not working on dropdown selection

I have one form that works perfectly and changes the action of the form based on radio buttons:

 <form name="form1" method="post" action="[[base_urlnt]]/electricity-rate-plans">
 <input type="radio" name="energy" value="electricity" checked>
 <label for="electricity">Electricity</label>
 <input type="radio" name="energy" value="gas" onChange="if(this.checked){document.forms[0].action='[[base_urlnt]]/natural-gas-rate-plans'}">
 <label for="gas">Natural Gas</label>
 <input name="service_zip_5" type="text" id="search" placeholder="Enter ZIP Code"><button type="submit" class="bigButton">Get Rates</button>
 </form>

And I want to do the same thing, but change the action on another form by using onChange but not on radio buttons, but using a dropdown list seen below. What am I doing wrong?

<form name="form1" method="post" action="[[base_url]]alberta/electricity-plans">
<p>Choose Your Service</p>
<select name="service" id="service" title="Choose Your Service">
<option value="Electricity" selected="selected">Electricity</option>
<option value="Gas" onChange="if(this.selected){document.forms[0].action='[[base_url]]alberta/natural-gas-plans'}">Natural Gas</option>
<option value="Dual" onChange="if(this.selected){document.forms[0].action='[[base_url]]alberta/dual-fuel-plans'}">Dual Fuel</option>
</select>
<p>Enter Your ZIP Code</p>
<input name="service_zip_5" type="text" id="zipcode">
<button type="submit" id="submit">Get Started</button>
</form>

I tried onChange="if(this.checked) first and the thought that since it is a selection it should be onChange="if(this.selected) but neither work. Is this just not a function?

Upvotes: 0

Views: 652

Answers (1)

wildavies
wildavies

Reputation: 1317

You need to change it slightly.

Your onchange events should be bound to the select not the individual options.

I have also added an attribute "data-url" to each option to store the url that will need to be added to the form action onchange.

This "data-url" attribute can then be used by the javascript function to update the form action. It also means you don't have to repeat the same code in all of your onchange attributes. You can just call a function that extracts the corresponding "data-url".

See - http://jsfiddle.net/williamtdavies/8kxzaquw/

<form name="form1" method="post" action="[[base_url]]alberta/electricity-plans">
    <p>Choose Your Service</p>
    <select name="service" id="service" title="Choose Your Service" onChange="changeFormAction(this);">
        <option value="Electricity" data-url="[[base_url]]alberta/electricity-plans">Electricity</option>
        <option value="Gas" data-url="[[base_url]]alberta/natural-gas-plans">Natural Gas</option>
        <option value="Dual" data-url="[[base_url]]alberta/dual-fuel-plans">Dual Fuel</option>
    </select>
    <p>Enter Your ZIP Code</p>
    <input name="service_zip_5" type="text" id="zipcode"/>
    <button type="submit" id="submit">Get Started</button>
</form>

<script>
    function changeFormAction(elem){
    document.forms[0].action = elem.options[elem.selectedIndex].getAttribute("data-url"); 
    }
</script>

Upvotes: 1

Related Questions