选择我的表单代码外的框 - select box outside my form code

select box outside my form code

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

<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>

请注意：这是一个简单的例子，我想知道如何将selectbox的值发送到表单之外。

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

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

使用javascript在更改时复制值。在jquery中，类似这样的东西：

$('#selection').on('change',function(){
     $('.hiddenselection').val($('#selection').val());
})

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

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

<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/

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

<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>