URL 直接取决于表单选择答案

【问题标题】：URL direct depending on form selectionURL 直接取决于表单选择
【发布时间】：2014-08-14 15:31:40
【问题描述】：

我有一个简单的表单，我想将用户重定向到我网站中的特定 URL，具体取决于他们选择的值。到目前为止，我有这个，但不是指向 4 个网址之一，而是在我的地址栏中得到“http://mydomain.com/?ApplianceType=americano.html&sub=Submit”：

<form name="form1" method="get">
        <p>
          <label>
            <select name="ApplianceType" id="ApplianceType">
              <option value="americano.html">American Fridge Freezer</option>
              <option value="freezer.html">Freezer only</option>
              <option value="fridge.html">Fridge only</option>
              <option value="fridgefreezer.html">Fridge/Freezer</option>
            </select>
          </label>
          <label>
            <input type="submit" name="sub" id="sub" value="Submit">
          </label>
        </p>
      </form>

谁能给点建议？

【问题讨论】：

我怀疑您只是请求通过GET 方法处理数据。您将需要一些客户端 Javascript 或其任何库来将表单的“值更改”上的 action 属性更改为指定的 URL。您目前是否在使用任何 Javascript？
谢谢。一位朋友建议了下面的代码，但老实说，我不知道如何实现它（它在我的页面上，但我不确定单击提交按钮时如何运行它）：

标签： forms url redirect

【解决方案1】：

您可以更改您的 HTML：

<form name="form1" id="yourForm" action="americano.html" method="get"> <!-- Added an ID to the form, and set the default value of `action` to 'americano.html'. -->
    <p>
      <label>
        <select name="ApplianceType" id="ApplianceType" onchange="setURL(this)"> <!-- Assigned the `select` to run the function on value change. -->
          <option value="americano.html">American Fridge Freezer</option>
          <option value="freezer.html">Freezer only</option>
          <option value="fridge.html">Fridge only</option>
          <option value="fridgefreezer.html">Fridge/Freezer</option>
        </select>
      </label>
      <label>
        <input type="submit" name="sub" id="sub" value="Submit">
      </label>
    </p>
</form>

然后使用下面的Javascript函数：

<script>
    function setURL(selectedValue)
    {    
        var element = document.getElementById('yourForm'); // Change 'yourForm' to the actual ID you assign on your form.
        element.action = selectedValue.value;
    }
</script>

请注意代码中的cmets。

【讨论】：