CODEWITHSUNDEEP
phphtmlforms
s.K.
s.K.

Reputation: 75

Changing form based on choice

I am working on a project, where I want to have two different forms on the page depending on a user's choice. If one of the forms is active, the other one is hidden. I want also both to POST to another page.

Currently, this is my solution:

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

These are the two scripts I am using to hide/show the forms. This is where the user chooses which one to fill out - (I would rather have a dropdown menu or something)

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

And these are the hidden form divs

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

I am looking for a nicer solution because this feels very clunky.

Upvotes: 0

Views: 1183

Answers (1)

curious_coder
curious_coder

Reputation: 2468

One option is to change form attributes dynamically using 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>

Upvotes: 1

Related Questions