基于表单字段的不同页面

Different Pages Based On Form Fields

本文关键字：字段 于表单 表单      更新时间：2023-09-26

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

<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代码。 问题是无论我选择什么状态选项，我都会直接进入"捕获.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页面的标题中吗？

不要设置window.location.href而是尝试设置窗体的 action 属性。

document.getElementById("myForm").action = "form_action.asp";
  • http://www.w3schools.com/jsref/prop_form_action.asp

您的submit()函数中有一些语法错误：

  • 您缺少函数的()。
  • 有一些额外的括号'CO')或'CA')。
  • 对窗口使用单个 = 符号。位置

修改功能： 

<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');
问题是没有

任何东西将表单提交链接到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;
    });
});

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

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

希望这有帮助。

相关文章：