CODEWITHSUNDEEP
javascriptjqueryhtmlforms
user2770714
user2770714

Reputation: 129

Redirect to URL depending on form select drop down option

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.

http://jsfiddle.net/D9x42/3/

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

Answers (2)

Matthew Eskolin
Matthew Eskolin

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

amit_g
amit_g

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

Related Questions