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

如果没有看到剩下的代码，我可以建议这样的事情：

$("#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"]}"); }

希望这有帮助

Answer 2

您可以创建一个隐藏的<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()方法...... *

按钮单击后重定向表单取决于下拉框选择

2 个答案: