AmanKumar AmanKumar - 2 months ago 7
Javascript Question

Select a specific form on change of dropdown option

I have 2 form that I want to show on change of dropdown option.

Means when select form1 in option Form1 should come and when select form2 in option form 2 should come.

How can I do that please give me suggestion

<!DOCTYPE html>
<html>
<head>
<title>Secelt Form</title>
<script type="text/javascript">
function fun1() {
document.getElementById('form1');
}

</script>
</head>
<body>

<label>Form 1</label>
<form method="post" name="firstform" id="form1" action="">
<button id="btn1" value="Select All">Select All</button>
<button id="btn3" value="Delete CheckBox">Delete CheckBox</button> <br><br>
<input type="checkbox" name="chk" value="One" id="ck1">One</input><br>
<input type="checkbox" name="chk" value="Two" id="ck2">Two</input><br>
<input type="checkbox" name="chk" value="Three" id="ck3">Three</input<br>
<input type="checkbox" name="chk" value="Four" id="ck4">Four</input>br>
<input type="checkbox" name="chk" value="Five" id="ck5">Five</input>br>
<button id="btn4" value="Status"">Status</button>
</form><hr>

<label>Form 2</label>
<form name="secondform" id="form2" action="">
Name : <input type="text" name="name" placeholder="Enter Your Name"><br><br>
Email : <input type="text" name="email" placeholder="Enter Email id"><br><br>
<button id="btn5" name="chk" >Submit</button>
</form><hr>

<label>Select Form</label>
<select id="select1" onchange="">
<option></option>
<option onselect="fun1()">Form 1</option>
<option>Form 2</option>
</select>

</body>
</html>

Answer

There are a number of problems with your posted code - but just in the interest of answering your original question - the following will allow you to toggle the display state of each form. I would strongly recommend reworking them - but the mechanism of the solution is to hide the forms on the load and then based on the selected option - display one or the other form.

$(document).ready(function(){
  
$('#selectForm').change(function(){
    var formID = $(this).val();
    $('form').css('display','none');
    $('#'+formID).css('display','block');
})
  
  })
form{display:none}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<title>Secelt Form</title>
</head>
<body>

<label>Select Form</label>
  <select id="selectForm">
    <option></option>
    <option value="form1">Form 1</option>
    <option value="form2">Form 2</option>
</select>
<hr/>

<form  method="post"  name="firstform" id="form1" action="">

<label>Form 1</label>
<button id="btn1" value="Select All">Select All</button>
<button id="btn3" value="Delete CheckBox">Delete CheckBox</button>  <br><br>
<input type="checkbox" name="chk" value="One" id="ck1">One</input><br>
<input type="checkbox" name="chk" value="Two" id="ck2">Two</input><br>
<input type="checkbox" name="chk" value="Three" id="ck3">Three</input><br>
<input type="checkbox" name="chk" value="Four" id="ck4">Four</input><br>
<input type="checkbox" name="chk" value="Five" id="ck5">Five</input><br>
<button id="btn4" value="Status">Status</button>
</form>

<form name="secondform" id="form2" action="">
<label>Form 2</label>
Name : <input type="text" name="name" placeholder="Enter Your Name"><br><br>
Email : <input type="text" name="email" placeholder="Enter Email id"><br><br>
<button id="btn5" name="chk" >Submit</button>
</form>
</body>
</html>