单击按钮后根据下拉框选择重定向表单

Question

我正在编写一个表单，希望用户能够根据选择重定向到四个单独页面之一。为此，我实现了一个包含所有选项的下拉选择框。我想要的是在此框中进行的选择以在单击按钮提交时更改表单重定向 url。我已经看到了这个问题的其他一些例子，但遇到了一些错误。例如，我尝试了一个我看到的 jQuery 修复程序，但是一旦选择了下拉选项，它就会将用户重定向到一个新页面。

这是我的表单代码

<form action="" id="search-form" method="post" onChange="">
    <input name="retURL" value="thankyou.html" type="hidden">
        <label for="firstname" class="half first-half">
      <input type="text" name="First Name" id="firstname" placeholder="FIRST NAME*" autofocus required>
    </label>
    <label for="lastname" class="half second-half">
      <input type="text" name="Last Name" id="lastname" placeholder="LAST NAME*" required>
    </label>
     <label for="email" >
      <input type="email" name="Email" id="email" placeholder="EMAIL*" required>
    </label>
    <label for="phone" >
      <input type="tel" name="Phone" id="phone" placeholder="PHONE*" required >
    </label>
    <label>
    <select id="selectbox" name="">
        <option value="0" selected>PROPERTY OF INTEREST*</option>
        <option value="thankyou1.html">Adako Crossing</option>
        <option value="thankyou2.html">Hayes Haven</option>
        <option value="thankyou3.html">Pinion</option>
        <option value="thankyouall.html">All Properties</option>
    </select>
    </label>
      <textarea name="comments" id="comments" placeholder="COMMENTS"></textarea>
        <button type="submit" id="get_info" name="submit"></button>
</form>

Answer 1

您可以创建一个隐藏的<input> 字段，如下所示：

<input type="hidden" id="myHiddenField">

在用户选择一个选项后，将 URL 保存到隐藏的输入字段中：

$("#selectbox").on("change", function(){
    $('#myHiddenField').val(this.value);
});

然后，您的 javascript 可能看起来 类似于（未经测试）：

$('#search-form').submit(function(e) {
    var url = $('#myHiddenField').val();
    alert(url);
    window.location.replace(url);
    //e.preventDefault(); //<== prevent form submission, IF DESIRED
});

jsFiddle

---

就个人而言，我更喜欢使用type="button" 的提交按钮（而不是type=submit），然后在我准备好时使用jQuery 提交表单。这解决了使用preventDefault()等的所有问题。

<input type="button" value="Submit It" id="get_info">

然后是 jQuery：

$('#get_info').click(function() {
    var url = $('#myHiddenField').val();
    alert(url);
    window.location.replace(url);
    $('#search-form').submit();
});

再说一次，我不确定你是否可以结合 submit() 和 window.location.replace() 方法...*

Answer 2

没有看到其余的代码，我可以建议如下：

$("#selectbox").on("change", function(){   
    window.location.replace(this.value); 
});

如果您使用的是 php，请将选项的值更改为 "?goto=0..1,2,3" 等并在 php 中重定向它们（我认为这是更好的选择）

编辑

更新小提琴http://jsfiddle.net/wS6EZ/3/

这是另一个解决方案：

在 html 中，在提交表单中添加隐藏字段。例如，我在小提琴中添加了 type=text。

<input type="hidden" id="redirect" value="NULL"/>

在 jquery

中

$("#selectbox").on("change", function(){
    $("#redirect").val(this.value);
});

在 php 中，添加这个，这几乎意味着：提交表单时重定向到隐藏字段值（我们用 jquery 更改）

if(!empty($_POST))
{
     header("Location: {$_POST["redirect"]}"); 
}

希望对你有帮助