Log in

View Full Version : Dropdown Parent & Child option list and on submit load a page


Sellar
12-18-2016, 06:07 AM
Hi

i am new to here, and i am trying to create a list of team member & their location in two different dropdown list, and on submit it should load a new page where it should list appropriate people according the options selected on the list,

i got the drop down selected with the following code but i don't know how to get a page load


<!DOCTYPE html>
<html>
<body>

<form action="demo_form.asp">
<select name="Region">
<option value="London">London</option>
<option value="saab">Saab 95</option>
<option value="mercedes">Mercedes SLK</option>
<option value="audi">Audi TT</option>
</select>

<select name="Area of Tax:">
<option value="Private Clients">Private Clients</option>
<option value="saab">Individual Tax Returns</option>
<option value="mercedes">US Business Expansion</option>
<option value="audi">Corporate Tax</option>
<option value="audi">Trusts & Estates</option>
<option value="audi">FATCA</option>
<option value="audi">Tax Consultancy</option>
</select>



<input type="submit" value="Submit">
</form>

<p>Choose a Region and Area of Tax your looking for and click the "Submit" button </p>

</body>
</html>

i may be wrong on the above code, please correct me.
thank you
Sellar
styxlawyer
12-18-2016, 02:31 PM
You should start by reading this page and trying the examples:

http://www.w3schools.com/php/php_forms.asp
jscheuer1
12-18-2016, 02:50 PM
In the html code from your post all the action would take place on the demo_form.asp page. That's assuming your host supports asp. If it does, that page could do various things based upon the GET request that the form would deliver to it. It could load various pages, or load (present) content based upon it. There are various ways one could utilize a form like that, with or without asp. Do you have asp or another server side language? If not, or if you don't want to use server side code, javascript could be used.

Here's a working example using javascript and jQuery:


<!DOCTYPE html>
<html>
<head>
<title>Example redirect using jQuery</title>
</head>
<body>

<form id="redirectform">
<select name="Region">
<option value="london">London</option>
<option value="paris">Paris</option>
<option value="rome">Rome</option>
<option value="salerno">Salerno</option>
</select>

<select name="Area_of_Tax">
<option value="private_clients">Private Clients</option>
<option value="individual_tax_returns">Individual Tax Returns</option>
<option value="us_business_expansion">US Business Expansion</option>
<option value="corporate_tax">Corporate Tax</option>
<option value="trusts_and_estates">Trusts &amp; Estates</option>
<option value="FATCA">FATCA</option>
<option value="tax_consultancy">Tax Consultancy</option>
</select>



<input type="submit" value="Submit">
</form>

<p>Choose a Region and Area of Tax your looking for and click the "Submit" button </p>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>
jQuery(function($){
$('#redirectform').submit(function(e){
window.location.href = this.elements.Region.value + '_' + this.elements.Area_of_Tax.value + '.html';
e.preventDefault();
});
});
</script>
</body>
</html>