Question

我的表单外有一个选择框，当用户选择一个选项时，会显示正确的表单。但我想将所选选项的值与表单一起发送。

<select id="selection" onchange="showForm()">
<option value="iphone">iPhone</option>
<option value="Android">Android</option>
</select>

<form action="iphone.php" method="post" id="form1">
<input type="text name="username" required>
</form>

<form action="android.php" method="post" id="form2">
<input type="text name="username" required>
</form>

请注意：这是一个简单的示例，我想知道如何在表单外发送选择框的值。

Answer 1

为每个表单添加一个隐藏的输入元素：

buffer_s

使用javascript复制更改后的值。在jquery中是这样的：

<input type="hidden" name="selection" class="hiddenselection" />

Answer 2

function showForm(value) {

    $.ajax({
            type: "POST",
         success: function(value){
                if(value =='iphone'){
                  $("#form2").hide();
                 }else{
                  $("#form1").hide();
                 }
                }
            });
}

将所选值保留在隐藏字段form1和form2

中

Answer 3

<select id="selection" onchange="showForm(this)">
<option value="iphone">iPhone</option>
<option value="Android">Android</option>
</select>

<form action="iphone.php" method="post" id="form1">
    <input type="text" name="username" required />
    <input type="hidden" name="selection" id="iphone_selection" />
</form>

<form action="android.php" method="post" id="form2">
    <input type="text" name="username" required />
    <input type="hidden" name="selection" id="android_selection" />
</form>

<script>
function showForm(THIS){
    var thisVal = $(THIS).val();
    if(thisVal == 'iphone'){
        $('#form2').hide();
        $('#form1').show();
        $('#iphone_selection').val(thisVal);
        //$("#form1").submit();        
    }
    if(thisVal == 'Android'){
        $('#form1').hide();
        $('#form2').show();
        $('#android_selection').val(thisVal);
        //$("#form2").submit();        
    }
}
</script>

<style>
#form1{
    display:none;
}
#form2{
    display:none;
}
</style>

https://jsfiddle.net/9tms99p5/

Answer 4

尝试在您的代码中包含此脚本。

<script type="text/javascript">
    window.onload = function(){
        document.getElementById("selection").onchange();
    };

    function showForm(){
        if(document.getElementById("selection").value == "iphone"){
            document.getElementById("form1").style.display = "block";
            document.getElementById("form2").style.display = "none";
        }else if(document.getElementById("selection").value == "Android"){
            document.getElementById("form1").style.display = "none";
            document.getElementById("form2").style.display = "block";
        }
    }
</script>

选择我的表单代码之外的框

4 个答案: