用于提交基于多个变量重定向的表单的JavaScript

JavaScript for submitting a form that redirects based on multiple variables

本文关键字：表单 JavaScript 重定向 变量 提交 于多个 用于      更新时间：2024-03-24

我确信这只是我错过了一些非常明显的东西，但我已经坐在这里玩了几个小时了，仍然没有骰子。我要使用的表格的修订版本是：

<html>
  <head>
    <script language="javascript;" type="text/javascript">
    function setAction() {
        var country = document.getElementById("FormCtrl_1").value;
        var business = document.getElementById("FormCtrl_2").value;
        if (country === "Afghanistan" && business === "Yes") {
            window.location = "http://www.google.com";
        }
    }
    </script>
</head>
  <body>
    <form>
      <div class="row"> <label for="FormCtrl_1">Where are you going?</label>
        <select id="FormCtrl_1" name="FormCtrl_1">
          <option value="Afghanistan">Afghanistan</option>
          <option value="Albania">Albania</option>
          <option value="Algeria">Algeria</option>
        </select>
      </div>
      <div class="row">
        <fieldset>
          <legend>Is this a business trip?</legend>
          <span>
            <input value="Yes" id="FormCtrl_2_1" name="FormCtrl_2" type="radio">
            <label for="FormCtrl_2_1">Yes</label></span>
            <span>
              <input value="No" id="FormCtrl_2_2" name="FormCtrl_2" type="radio">
              <label for="FormCtrl_2_2">No</label>
            </span>
          </fieldset>
      </div>
      <div class="row">
        <input value="Submit" onclick="setAction()" type="button">
      </div>
    </form>
  </body>
</html>

这是对其他问题和答案的几次不同迭代的混合，所以完全有可能在某一时刻我比现在更接近了，但这一切对我来说都开始像胡言乱语，所以我说"叔叔"，并问你们这些很棒的人。提前感谢！

从提交按钮中删除.onclick事件，而在表单元素上使用.onsubmit事件。像这样：

<form onsubmit="return setAction()" method="post" action="">
  <div class="row">
    <label for="FormCtrl_1">Where are you going?</label>
    <select id="FormCtrl_1" name="FormCtrl_1">
      <option value="Afghanistan">Afghanistan</option>
      <option value="Albania">Albania</option>
      <option value="Algeria">Algeria</option>
    </select>
  </div>
  <div class="row">
    <fieldset>
      <legend>Is this a business trip?</legend>
      <span>
        <input value="Yes" id="FormCtrl_2_1" name="FormCtrl_2" type="radio">
        <label for="FormCtrl_2_1">Yes</label>
      </span>
      <span>
        <input value="No" id="FormCtrl_2_2" name="FormCtrl_2" type="radio">
        <label for="FormCtrl_2_2">No</label>
      </span>
    </fieldset>
  </div>
  <div class="row">
    <input value="Submit" type="submit" />
  </div>
</form>

你的JavaScript也有一些问题。第一个问题是，你得到的无线电输入值总是"是"，而我们需要检查它是否被选中。下一个问题是你需要返回false，这样表单就无法提交，页面也不会重新加载。试试看：

function setAction() {
    var country = document.getElementById("FormCtrl_1").value;
    var business = document.getElementById("FormCtrl_2_1").checked;
    if (country === "Afghanistan" && business === true) {
        window.location = "http://www.google.com";
    }
    return false;
}

JSFiddle示例：http://jsfiddle.net/eF2wH/2/

JSFiddle注意：除非您使用Google以外的URL，否则重定向将不起作用

相关文章：