CODEWITHSUNDEEP
jqueryhtmlforms
John Ruggiero
John Ruggiero

Reputation: 61

Redirect form after button click depending on dropdown box selection

I am writing a form in which I want the user to be able to redirect to one of four individual pages based on a selection. To do this I have implemented a dropdown select box with all of my options. What I want is the selection made in this box to change the form redirect url when the button is hit to submit. I have seen a few other examples of this problem but have encountered some errors with them. For example I attempted a jQuery fix that I saw but it redirected the user to a new page as soon as the dropdown option was selected.

Here is my form code

<form action="" id="search-form" method="post" onChange="">
    <input name="retURL" value="thankyou.html" type="hidden">
        <label for="firstname" class="half first-half">
      <input type="text" name="First Name" id="firstname" placeholder="FIRST NAME*" autofocus required>
    </label>
    <label for="lastname" class="half second-half">
      <input type="text" name="Last Name" id="lastname" placeholder="LAST NAME*" required>
    </label>
     <label for="email" >
      <input type="email" name="Email" id="email" placeholder="EMAIL*" required>
    </label>
    <label for="phone" >
      <input type="tel" name="Phone" id="phone" placeholder="PHONE*" required >
    </label>
    <label>
    <select id="selectbox" name="">
        <option value="0" selected>PROPERTY OF INTEREST*</option>
        <option value="thankyou1.html">Adako Crossing</option>
        <option value="thankyou2.html">Hayes Haven</option>
        <option value="thankyou3.html">Pinion</option>
        <option value="thankyouall.html">All Properties</option>
    </select>
    </label>
      <textarea name="comments" id="comments" placeholder="COMMENTS"></textarea>
        <button type="submit" id="get_info" name="submit"></button>
</form>

Upvotes: 0

Views: 4276

Answers (2)

Tatarin
Tatarin

Reputation: 1298

Without seeing the rest of the code, I can suggest something like this:

$("#selectbox").on("change", function(){   
    window.location.replace(this.value); 
});

If you are using php, change value of options to "?goto=0..1,2,3" etc and redirect them in php(which is better option, I think)

EDIT

Updated fiddle http://jsfiddle.net/wS6EZ/3/

here's another solution:

in html, add hidden field inside your submit form. I've added type=text in fiddle for example sake.

<input type="hidden" id="redirect" value="NULL"/>

in jquery

$("#selectbox").on("change", function(){
    $("#redirect").val(this.value);
});

in php, add this, which pretty much mean: when form is submitted redirect to hidden field value (which we change with jquery)

if(!empty($_POST))
{
     header("Location: {$_POST["redirect"]}"); 
}

Hope this helps

Upvotes: 1

cssyphus
cssyphus

Reputation: 40106

You can create a hidden <input> field, like this:

<input type="hidden" id="myHiddenField">

and upon user selecting an option, save the URL into the hidden input field:

$("#selectbox").on("change", function(){
    $('#myHiddenField').val(this.value);
});

Then, your javascript can look something like this (untested):

$('#search-form').submit(function(e) {
    var url = $('#myHiddenField').val();
    alert(url);
    window.location.replace(url);
    //e.preventDefault(); //<== prevent form submission, IF DESIRED
});

jsFiddle

personally, I prefer to use a submit button that is type="button" (instead of type=submit) and then use jQuery to submit the form when I am ready. That gets around all the issues of using preventDefault(), etc.

<input type="button" value="Submit It" id="get_info">

and then the jQuery:

$('#get_info').click(function() {
    var url = $('#myHiddenField').val();
    alert(url);
    window.location.replace(url);
    $('#search-form').submit();
});

Then again, I'm not sure if you can combine the submit() and window.location.replace() methods...*

Upvotes: 1

Related Questions