Reputation: 1
I want to create a form from my website where the user has two dropdown boxes with values say body height
and type of build
. Depending on their selection, they would be directed to a page with information about their specific/selected build.
To have an idea of what I want to create, here is the form i wish to display.. the use if for a BMX bike guide
function goToPage() { var type = document.getElementById("type").value; var height = document.getElementById("height").value; if(type !== 0 && height !== 0) { window.location = "http://www.maltabmx.com/About.html?jtype=" + 1 + "&height=" + 1;window.location = "http://www.maltabmx.com/Footage.html?jtype=" + 1 + "&height=" + 2; window.location = "http://www.maltabmx.com?jtype=" + 1 + "&height=" + 3; window.location = "http://www.maltabmx.com/About.html?jtype=" + 1 + "&height=" + 4; window.location = "http://www.maltabmx.com/Footage.html?jtype=" + 1 + "&height=" + 5; window.location = "http://www.maltabmx.com?jtype=" + 1 + "&height=" + 6; } }
<form> <p> Type of Terrain: </p>
Select Street/Park Dirt Racing
<p>Body Height</p> <select id="height"> <option value="0" id="Select">Select</option> <option value="1" id="5ft">4ft</option> <option value="2" id="5.5ft">4.25ft</option> <option value="3" id="5.5ft">4.50ft</option> <option value="4" id="6ft">4.75ft</option> <option value="5" id="5ft">5ft</option> <option value="6" id="5.5ft">5.25ft</option> <option value="7" id="6ft">5.50ft</option> <option value="8" id="5ft">5.75ft</option> <option value="9" id="5.5ft">6ft</option> <option value="10" id="6ft">6.25ft</option> </select> <br /><br /> <input onclick="goToPage();" type="button" value="Submit" /> </form>
Upvotes: 0
Views: 2074
Reputation: 1225
<html>
<head>
$(document).ready(function() {
$('#submit').click(function(){
var type= $("#type").val();
var height = $("#height").val();
window.location.href = 'http://www.someweb.com/page.php?type='+type+'&&height='+height;
});
});
</head>
<body>
<form>
<p> Type of Terrain: </p>
<select id="type">
<option value="1" id="Street">Street</option>
<option value="2" id="Dirt">Dirt</option>
<option value="3" id="Park">Park</option>
<option value="4" id="Racing">Racing</option>
</select>
<p>Body Height</p>
<select id="Height">
<option value="1" id="5ft">5ft</option>
<option value="2" id="5.5ft">5.5ft</option>
<option value="3" id="6ft">6ft</option>
</select>
<br /><br />
<input id="submit" type="submit" value="Submit" />
</form>
</body>
</html>
So, i changed the code above. Let me know if you still hve some questions.
PS: normally to redirect or pass values to other pages you would want to use the jquery $.post, $.get or $.ajax methods instead of windows.location.href.
Have a look here http://net.tutsplus.com/tutorials/javascript-ajax/5-ways-to-make-ajax-calls-with-jquery/
EDITED - Working solution: http://jsfiddle.net/YXW7K/13/
Upvotes: 1