选择两个选项-单击转到-重定向到url

Question

I cannot find any help on a script I need to implement on a website.

1. SELECT ONE
2. The visitor selects a, b, c or d
3. SELECT TWO , they then
4. select 1, 2, 3, 4, 5, 6 - to - 14
5. GO

they then click go which takes them to a page that corresponds with their selections.

I should add that the options are not chained in that selecting option 1 does not alter option 2's selects. They stay the same.

Any help appreciated.

Answer 1

If you want to process the form inputs on the server, you must use a server-side language like PHP. Here's simple tutorial to achieve this: http://www.tizag.com/phpT/forms.php/

If you want to process the form on the client side, use JavaScript to gather selected values in the form and then do something with those values. You do not need to do redirect to another page because you can attach an event handler to the form Submit's button.

For example:

The HTML forms looks like this:

<form>
    <select name="firstSelect" id="firstSelect"> ...
      ...
    </select>
    <select name="secondSelect" id="secondSelect">
      ...
    </select>
    <input type="submit" name="submit" id="submit" value="Submit form" onclick="javascript: return processForm();" />
</form>

Inspecting the submit button of the form:

<input type="submit" name="submit" value="Submit form" 
 onclick="javascript: return processForm();" />

What this code block will do is trigger javasript function processForm() when the user clicks on the submit button. Also, it will prevent a page to redirect.

The processing function looks like this:

<script>
   function processForm()
   {
       // fetch selected values from the form and do actions based on that
       var firstValue = $('form select#firstSelect').val();
       var secondValue = $('form select#secondSelect').val();

       // prevent form redirection 
       return false;
   }
</script>

Example of actions you might perform are hide/show certain resulting divs on the page, display results of the form processing etc.