Question

我有一个表单，我想基于状态表单字段根据我选择的内容重定向到不同的页面。

<form action="capture.php" method="post">

  <input type="text" name="_FirstName" required/>
  <input type="text" name="_LastName" required/>
  <input type="tel" id="phone" name="_Phone" required/>
  <input type="email" name="Email" required/>

  <select name="_State" id="state" required>
    <option value="AL">Alabama</option>
    <option value="AK">Alaska</option>
    <option value="AZ">Arizona</option>
    <option value="AR">Arkansas</option>
    <option value="CA">California</option>
    <option value="CO">Colorado</option>
    <option value="CT">Connecticut</option>
    <option value="DE">Delaware</option>
    <option value="DC">District of Columbia</option>
    <option value="FL">Florida</option>
  </select>

  <input id="submit" type="submit">

</form>

这是我在this帖子后面使用的JavaScript代码。问题是无论我选择哪种状态选项，我都会直接进入'capture.php'页面。

<script type="text/javascript">
function submit   {
    if(document.getElementById('state').value == 'AZ' ||
   document.getElementById('state').value == 'AR' || 
   document.getElementById('state').value == 'CA') ||
   document.getElementById('state').value == 'CO') ||
   document.getElementById('state').value == 'CT')
{
window.location.href == "warranty.php";
}
else
{
window.location.href == "capture.php";
}
</script>

有什么想法吗？谢谢！

编辑：JavaScript代码应该在html页面的标题中吗？

Answer 1

而不是设置window.location.href而是尝试设置表单的action属性。

document.getElementById("myForm").action = "form_action.asp";

http://www.w3schools.com/jsref/prop_form_action.asp

Answer 2

submit()函数中存在语法错误：

您缺少功能的()。
有一些额外的括号'CO')或'CA')。
对window.location使用single = sign

修改功能：

<script type="text/javascript">
function submit()   {
  if(document.getElementById('state').value == 'AZ' 
    || document.getElementById('state').value == 'AR' 
    || document.getElementById('state').value == 'CA' 
    || document.getElementById('state').value == 'CO' 
    || document.getElementById('state').value == 'CT')
  {
    window.location.href = "warranty.php";
  }
  else
  {
    window.location.href = "capture.php";
  }
}
</script>

旁注：

您也可以使用window.open之类的：

window.open('capture.php');

Answer 3

您的代码中有几个错误，例如：

用于比较的两个等号==，而不是用于值分配。

select代码不是自封闭代码，因此您最终会删除/：

<select name="_State" id="state" required/>
_________________________________________^

您的条件中有一些额外的括号(。
在函数声明中缺少括号。

然后我看不到你在哪里打submit()。

IMO添加submit事件会更好，点击提交按钮后更改操作然后以编程方式提交表单：

$('form').on('submit', function(e){

    if(document.getElementById('state').value == 'AZ' ||
       document.getElementById('state').value == 'AR' || 
       document.getElementById('state').value == 'CA' ||
       document.getElementById('state').value == 'CO' ||
       document.getElementById('state').value == 'CT')
    {
        $('form').prop('action', "warranty.php");
    }
    else
    {
     $('form').prop('action', "capture.php");
    }

    return true;
});

希望这有帮助。

Answer 4

问题是没有任何内容可以将表单提交链接到您的javascript函数。因此，当您验证表单时，它会直接转到“action”属性中提供的地址。

简单解决方案

将按钮的标记更改为此，因此单击将链接到函数调用：

<input id="submit" type="submit" onclick="submit()">

使用Jquery：

在页面中加载jquery，并在表单中添加一个id：

<form id="myform" action="capture.php" method="post">

在您的文档中添加此代码：

$(document).ready(function() {
    $('#myform').submit(function(e) {
        e.preventDefault(); // this prevent the form from going to capture.php
        submit();
        return false;
    });
});

基于表单域的不同页面

4 个答案: