如何在选择按钮上显示另一个表单

时间:2009-12-08 09:19:20

标签: javascript forms select button

我创建了有两种形式的jsp。在UI中有2个按钮。在选择每个按钮时,应显示相应的表格。但在尝试这样做时,它不允许我在按钮点击上显示其他形式。任何样本代码都可以解决我的问题吗?

1 个答案:

答案 0 :(得分:1)

我创建了示例代码来显示和隐藏表单,如您所解释的那样。检查这是否是您的问题的解决方案。

<html>
<head>
<script langauge="javascript">
    function showForm1(){
        document.getElementById('form1').style.display="block";
        document.getElementById('form2').style.display="none";  
    }

    function showForm2(){
        document.getElementById('form2').style.display="block";
        document.getElementById('form1').style.display="none";  
    }

</script>   
</head>
<body>
<div id="form1" name="form1">
<h1> Form 1 </h1>   
<form id="frm1" name="frm1">
    Form 1 text 1 <input type="text" id="frm1txt1" name="frm1txt1"/> <br>
  Form 1 text 2 <input type="text" id="frm1txt2" name="frm1txt2"/> <br>
  <input type="submit" id="frm1btn1" name="frm1btn1" value="submit"/> <br>
</form>
</div>
<div id="form2" name="form2" style="display:none">
<h1> Form 2 </h1>   
<form id="frm2" name="frm2">
    Form 2 text 1 <input type="text" id="frm2txt1" name="frm2txt1"/> <br>
  Form 2 text 2 <input type="text" id="frm2txt2" name="frm2txt2"/> <br>
  <input type="submit" id="frm2btn1" name="frm2btn1" value="submit"/> <br>
</form>
</div>
<div id="form1" name="form1">
<h1> Show/Hide buttons </h1>    
<form id="ctrl" name="ctrl">
    <input type="button" id="ctrlbtn1" name="ctrlbtn1"  value="Show form 1" onclick="showForm1();"/> &nbsp
  <input type="button" id="ctrlbtn2" name="ctrlbtn2"  value="Show form 2" onclick="showForm2();"/> <br>
</form>
</div>
</body>
</html>