Reputation: 61
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
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
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
});
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