0

我正在编写一个表单，希望用户能够根据选择重定向到四个单独页面之一。为此，我实现了一个包含所有选项的下拉选择框。我想要的是在此框中进行的选择以在单击按钮提交时更改表单重定向 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>
4

2 回答 2

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

希望这可以帮助

于 2013-09-11T19:32:29.140 回答
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()andwindow.location.replace()方法...... *

于 2013-09-11T20:20:49.217 回答