Выберите конкретную форму при изменении раскрывающегося списка

У меня есть 2 формы, которые я хочу показать при изменении выпадающего меню.Выберите конкретную форму при изменении раскрывающегося списка

Значения при выборе формы1 в опции Form1 должны появиться и при выборе формы2 в форме опции 2 должны прийти.

Как я могу это сделать, пожалуйста, дайте мне внушение

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

источник

2016-09-08 AmanKumar

скопировать код сниппета, так что это будет ясно решить –

, что вы пытаетесь сделать? – Amy

Вы хотите отобразить форму на основе выбранной опции –

Try please this code 

<!DOCTYPE html> 
<html> 
<head> 
<title>Secelt Form</title> 
<script type="text/javascript"> 
function setForm(value) { 

    if(value == 'form1'){ 
       document.getElementById('form1').style='display:block;'; 
       document.getElementById('form2').style='display:none;'; 
      } 
      else { 

       document.getElementById('form2').style = 'display:block;'; 
       document.getElementById('form1').style = 'display:none;'; 
      } 

} 

</script> 
</head> 
<body> 
<div id="form1"> 
<label>Form 1</label> 
<form method="post" name="firstform" 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> 
    </div> 
<div id="form2" style="display: none"> 
<label>Form 2</label> 
<form name="secondform" 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> 
</div> 
<label>Select Form</label> 
<select id="select1" onchange="setForm(this.value)"> 
<option value="form1">Form 1</option> 
<option value="form2">Form 2</option> 
</select> 

</body> 
</html>

источник

2016-09-08 06:11:41

Есть целый ряд проблем с публикуемым кодом - но только в интересах ответить на ваш первоначальный вопрос - следующий позволят переключать отображение состояния каждой формы. Я бы настоятельно рекомендовал их переработать, но механизм решения заключается в том, чтобы скрыть формы на загрузке, а затем на основе выбранного варианта - отобразить одну или другую форму.

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

источник

2016-09-08 06:10:19 gavgrif

Спасибо @gavgrif ... – AmanKumar

согласно моему пониманию о вашем вопросе. Вы хотите показать форму, выбранную в раскрывающемся списке.

Здесь я изменяю ваш код для того же.

<!DOCTYPE html> 
<html> 
<head> 
<title>Secelt Form</title> 
<script type="text/javascript"> 
function HidebothForm() 
{ 
document.getElementById("form2id").style.visibility = "hidden"; 
      document.getElementById("form1id").style.visibility = "hidden"; 
} 
function fun1() { 

    var e = document.getElementById('select1'); 
    var selectedOption = e.options[e.selectedIndex].value; 
    if(selectedOption == "frm1") 
      { 
      document.getElementById("form2id").style.visibility = "hidden"; 
      document.getElementById("form1id").style.visibility = "visible"; 
      } 

     else if(selectedOption == "frm2") 
      { 
      document.getElementById("form2id").style.visibility = "visible"; 
      document.getElementById("form1id").style.visibility = "hidden"; 
      } 
else 
{ 
HidebothForm(); 
} 



} 

</script> 
</head> 
<body onload="HidebothForm()"> 

<div id="form1id"> 
<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> 
</div> 
<hr> 

<div id="form2id"> 
<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> 
</div> 
<hr> 

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

</body> 
</html>

Надеюсь, это поможет вам.

источник

2016-09-08 06:20:45

<!DOCTYPE html> 
<html> 
<head> 
<title>Select Form</title> 
<script type="text/javascript"> 
function fun1() { 
    var xx = document.getElementById('select1').value; 
    fun2(); 
    if(xx==1) 
    { 
     document.getElementById('form1').style.display = "block"; 
    } 
    else if(xx==2) 
    { 
     document.getElementById('form2').style.display = "block"; 
    } 
    else 
    { 
    } 
} 
function fun2()//to hide all form elements 
{ 
    var x = document.getElementsByTagName("form"); 
    var i; 
    for (i = 0; i < x.length; i++) { 
     x[i].style.display = "none"; 
    } 
} 
</script> 
</head> 
<body> 


<form method="post" name="firstform" id="form1" action=""> 
<label>Form 1</label><br> 
<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><hr> 
</form> 


<form name="secondform" id="form2" action=""> 
<label>Form 2</label><br> 
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><hr> 
</form> 

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

</body> 
<script type="text/javascript"> 
fun2();//to hide form elements after page has loaded completely 
</script> 
</html>

Я написал на чистом JavaScript, но Jquery бы просто

источник

2016-09-08 06:42:07

Выберите конкретную форму при изменении раскрывающегося списка

ответ

Смежные вопросы