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

时间:2012-07-27 11:13:11

标签: javascript select options

我无法找到有关我需要在网站上实施的脚本的任何帮助。

  1. SELECT ONE
  2. 访问者选择a,b,c或d
  3. SELECT TWO,然后他们
  4. 选择1,2,3,4,5,6-至14
  5. GO
  6. 然后,他们点击go,将他们带到与他们的选择相对应的页面。

    我应该补充一点,选项不是链接的,因为选择选项1不会改变选项2的选择。他们保持不变。

    任何帮助表示赞赏。

1 个答案:

答案 0 :(得分:0)

如果要处理服务器上的表单输入,则必须使用PHP之类的服务器端语言。 这是实现此目的的简单教程:http://www.tizag.com/phpT/forms.php/

如果要在客户端处理表单,请使用JavaScript收集表单中的选定值,然后对这些值执行某些操作。您无需重定向到另一个页面,因为您可以将事件处理程序附加到表单“提交”按钮。

例如:

HTML表单如下所示:

<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>

检查表单的提交按钮:

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

当用户点击提交按钮时,此代码块将执行的操作是触发javasript函数processForm()。此外,它还会阻止页面重定向。

处理函数如下所示:

<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>

您可能执行的操作示例是隐藏/显示页面上的某些结果div,显示表单处理的结果等。