Question

我创建了一个包含两个下拉框或选择选项的表单。如果在第一次向下淹没中选择了选项1，并且在第二次下拉中选择了任何选项，则用户单击提交按钮并将其发送到第1页的谢谢。

但是，如果用户从第一个下拉列表中选择选项2，则第二个下拉列表将消失，点击提交后，用户将被带到第2页。

我已经创建了表单和js来隐藏下拉列表，它工作正常。我需要帮助才能让提交按钮按照规定工作。

HTML

<form action="http://www.google.com" target="_blank">
<select id="selection">
    <option value="1">1</option>
    <option value="2">2</option>
</select>
<br/>
<div id="show">
    <select>
        <option value="1">1</option>
        <option value="2">2</option>
    </select>
</div>
<div><input type="submit" value="SUBMIT"></input></div>

的Javascript

$(document).ready(function() {

//Show the field
$("#show").show();

//Hide the field only when option 2 is selected in second drop down
$('#selection').change(function() {
    if ($("#selection").val() == "2") {
        $("#show").hide();

    }

    else {

        $("#show").show();

    }
});
});

在我的js小提琴示例中，表单默认为google.com提交时，为了论证，这可以感谢第1页。

Answer 1

您的输入缺少名称属性。没有这些，浏览器不会将值提交给服务器。更改HTML以包含名称

<form action="http://www.google.com" target="_blank">
    <select id="selection" name="selection">
        <option value="1">1</option>
        <option value="2">2</option>
    </select>
    <br/>
    <div id="show">
        <select name="show">
            <option value="1">1</option>
            <option value="2">2</option>
        </select>
    </div>
    <div>
    <input type="submit" value="SUBMIT"></input>
    </div>
</form>

更新了fiddle

Answer 2

将此代码添加到您的javascript中。当用户单击提交按钮时，此代码将检查第一个下拉列表的值并相应地修改表单操作。

$("#id-submit").click(function() {
     if ($("#selection").val() == 2)
     {
         $("#id-form1").attr("action","http://bing.com");            
     }
    document.getElementById('id-form1').submit(); 
}

为了实现这一点，我给了表单一个名称，在提交按钮中添加了一个id，并将其更改为按钮类型。

HTML

<form id="id-form1" name="form1" action="http://www.google.com" target="_blank">
    <select id="selection">
        <option value="1">1</option>
        <option value="2">2</option>
    </select>
    <br/>
    <div id="show">
        <select>
            <option value="1">1</option>
            <option value="2">2</option>
        </select>
    </div>
    <div><input id="id-submit" type="button" value="SUBMIT"></input></div>
</form>

更新了Fiddle

根据表单选择下拉选项重定向到URL

2 个答案: