Hello there, I have created simple HTML page with 2 dropdown button. Can anyone tell me how to pass the query strings in HTML. E.g. If I choose Service1(from dropdown 1) and Location1(from dropdown 2) then it should redirect to specific page. Likewise, if I choose Service 2(from dropdown 1) and Location 1(from dropdown 2) it should redirect to specific page. Please your help appreciated. <form accept-charset="UTF-8" action="#" class="simple_form form new-user-form" data-remote="true" id="new_user" method="post"> <section> <div class="fleft"> <select id="cd-dropdown6" class="cd-select"> <option value="-1" selected>Please Select a Service</option> <option value="1" class="icon1">Service1</option> <option value="2" class="icon1>Service2</option> <option value="3" class="icon1">Service3</option> <option value="4" class="icon1">Service4</option> <option value="5" class="icon1">Service5</option> <option value="6" class="icon1">Service6</option> <option value="7" class="icon1">Service7</option> </select> </div> </section> </div> </div> <div class='col'> <div class='field'> <section class="mainx clearfix"> <div class="fleft"> <select id="cd-dropdown5" class="cd-select"> <option value="-1" selected>Select City</option> <option value="1" class="icon-loc">Location1</option> <option value="query.cleaning.html" class="icon-loc">Location2</option> <option value="2" class="icon-loc">Location3</option> <option value="2" class="icon-loc">Location4</option> </select> </div> </section> </form> Please, Your help appreciated
Process the data server-side -- it's a form, that's what forms are FOR -- using a language like ASP or PHP, and return the correct page as the result... If you want to skip the page load because you buy into the page-loads are evil lie, you can add a ton of code bloat for nothing to enhance the already functioning submit with AJAX... but again you should make it work WITHOUT scripting before you waste time throwing javascript at it -- by processing it on the server with a server-side language. Now that said -- you don't seem to have LABELS and instead have the accessibility rubbish of the stupid malfing 'default' value that describes the dropdown, you have classes on elements that should not be receiving classes since they can't be styled (OPTION), and even if they did if they all get the same class off a parent with a ID or a class, NONE of them need classes... You've got extra DIV for nothing, a train wreck of garbage classes on the form (lemme guess, turdpress?), and of course the prerequisite HTML 5 bloat -- which even AS HTML 5 there is no reason to be wasting DIV and SECTION on these elements... much less that you seem to be closing more DIV than are being opened. You've got buggy/broken/bloated markup with HTML 5 rubbish hooked to it... so I'd suggest cleaning that up first.
HTML/CSS problems with this aside... You will first need a way to submit the form. Right now I don't see a button to submit it... unless you are using Javascript to submit it once the second dropdown has a change. Additionally, there are some usability problems with this... for example what if they don't choose a first item? You might need to disable the second dropdown by default, then use some javascript to enable it once a choice is made on the first menu. You can avoid that whole process by just making the default for the first menu "service1" and the default for the second menu "location1" and add a "go!" button. Then you won't need Javascript at all. Once submitted, you will need to have the form go to a "handler" page. That means you will need to set the "action" attribute for the form. Point it to this handler file (action="handler.php"). The handler is a pure server-side coded page that will process the results and then forward the user on to the correct page based on the form results. I'd do this in PHP. The handler file would look something like this: <? if ( $_POST['cd-dropdown6'] == "1" && $_POST['cd-dropdown5'] == "1" ) $theNextPageURL = "http://www.theurlgoeshere.com"; if ( $_POST['cd-dropdown6'] == "1" && $_POST['cd-dropdown5'] == "2" ) $theNextPageURL = "http://www.adifferenturlgoeshere.com"; if ( $_POST['cd-dropdown6'] == "1" && $_POST['cd-dropdown5'] == "3" ) $theNextPageURL = "http://www.andanotheronehere.com"; header("location:".$theNextPageURL) ?> PHP: As you can see, this would take the form results and do some "if then" processing on it. IF the first dropdown's value is "1" AND the second dropdown's value is "1" THEN set the variable to a specific URL. Of course you would have an IF statement for each possible outcome. Then you finish up with a header redirect. -- This isn't a simple thing for beginners as you'd need some understanding of HTML/CSS, Javascript and PHP, but perhaps that helps?