Reputation: 129
I've created a form which has two drop down boxes or select options. When option 1 is chosen in the first down drown and any option is chosen in the second drop down, the user clicks on the submit button and is sent to Thank you page 1.
If however the user selects option 2 from the first drop down, the second drop down should disappear, and on clicking submit the user is taken to Thank you page 2.
I've created the form and js for hiding the drop down which works fine. I need help on getting the submit button to work as stated.
HTML
<form action="http://www.google.com" target="_blank">
<select id="selection">
<option value="1">1</option>
<option value="2">2</option>
</select>
<br/>
<div id="show">
<select>
<option value="1">1</option>
<option value="2">2</option>
</select>
</div>
<div><input type="submit" value="SUBMIT"></input></div>
Javascript
$(document).ready(function() {
//Show the field
$("#show").show();
//Hide the field only when option 2 is selected in second drop down
$('#selection').change(function() {
if ($("#selection").val() == "2") {
$("#show").hide();
}
else {
$("#show").show();
}
});
});
In my js fiddle example the form defaults to google.com when it's submitted, this can be Thank you page 1 for arguments sake.
Upvotes: 0
Views: 2287
Reputation: 658
Add this code to your javascript. When the user clicks the submit button, this code will check the value of the first drop down and modify the form action accordingly.
$("#id-submit").click(function() {
if ($("#selection").val() == 2)
{
$("#id-form1").attr("action","http://bing.com");
}
document.getElementById('id-form1').submit();
}
For this to work, I gave the form a name, added an id to the submit button as well as changing it to type button.
HTML
<form id="id-form1" name="form1" action="http://www.google.com" target="_blank">
<select id="selection">
<option value="1">1</option>
<option value="2">2</option>
</select>
<br/>
<div id="show">
<select>
<option value="1">1</option>
<option value="2">2</option>
</select>
</div>
<div><input id="id-submit" type="button" value="SUBMIT"></input></div>
</form>
Updated Fiddle
Upvotes: 2
Reputation: 31270
Your inputs are missing name attribute. Without those the browser won't submit the values to the server. Change the HTML to include the name
<form action="http://www.google.com" target="_blank">
<select id="selection" name="selection">
<option value="1">1</option>
<option value="2">2</option>
</select>
<br/>
<div id="show">
<select name="show">
<option value="1">1</option>
<option value="2">2</option>
</select>
</div>
<div>
<input type="submit" value="SUBMIT"></input>
</div>
</form>
Updated fiddle
Upvotes: 1