基于表单字段的不同页面

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>

这是我根据这篇文章使用的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 =符号

修改功能：

<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

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

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

2. select标记不是自封闭标记，因此您可以在/末尾删除/ ：

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

3. 一些额外的括号(根据您的情况。

4. 函数声明中缺少括号。

然后我看不到你在哪里打电话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函数。 因此，当您验证表单时，它将直接转到“操作”属性中提供的地址。

简单的解决方案

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

<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;
    });
});