根据选择改变形式

Question

我正在处理一个项目，我希望根据用户的选择在页面上显示两种不同的表单。如果其中一种形式处于活动状态，则另一种形式被隐藏。我也希望两者都发布到另一个页面。

目前，这是我的解决方案：

<script type="text/javascript">
 function showHide() {
   var div = document.getElementById("CSGO_");
   if (div.style.display == 'none') {
     div.style.display = '';
   }
   else {
     div.style.display = 'none';
   }
 }
</script>

<script type="text/javascript">
 function showHide1() {
   var div = document.getElementById("LOL");
   if (div.style.display == 'none') {
     div.style.display = '';
   }
   else {
     div.style.display = 'none';
   }
 }
</script>

这是我用来隐藏/显示表单的两个脚本。 这是用户选择填写哪一个的地方 - （我宁愿有一个下拉菜单或其他东西）

<table width="200" border="0">
<tr>
<td><form onsubmit="showHide(); return false;"><input type="submit" name="CSGO" value="Counter Strike"></form></td>
<td> <form onsubmit="showHide1(); return false;"><input type="submit" name="LOL" value="League of Legends"></form></td>
</tr>
</table>

这些是隐藏的表单 div

 <div id="CSGO_" style="display: none;">
 <form name="reg2" action="confirm_reg2.php" method="post"  >
 <input type="text">
 </form>
 </div>

 <div id="LOL"  style="display: none;">
 <form name="reg2" action="confirm_reg2.php" method="post"  >
 <input type="text" value="league!">
 </form>
 </div>

我正在寻找更好的解决方案，因为这感觉很笨拙。

Answer 1

一种选择是使用 javascript 动态更改表单属性。

<form name="form1" action="" method="post">
    <select id='dropdown' onchange="change_attributes(this.form)">
      <option value="1">first</option>
      <option value="2">second</option>
    </select>
    <input id = "text1" type="text" value="MyValue1">
    <input id = "text2" type="text" value="MyValue3">
</form>

<script>
function change_attributes(myform){
    if(myform.dropdown.selectedIndex === 0){
        myform.action = "page1.php";
        myform.text1.value = "MyValue1";
        myform.text2.value = "MyValue3";
    }else{
        myform.action = "page2.php";
        myform.text1.value = "MyValue2";
        myform.text2.value = "MyValue4";
    }
 }  
</script>