如何使用java脚本在按钮单击时显示特定窗体

Question

我有2个按钮，即插入和更新我的jsp page.on点击插入按钮插入窗体应显示和相同的更新button.form应该不可见之前点击任何按钮。我想用js来实现它。这是我的尝试。

<button type="button" onclick="asd(1)" id="insert" 
      value="Add new Product">insert</button> 
      <button type="button" id="update" 
      value="Update Product">update</button> 
    </div> 
    <script type="text/javascript"> 
    function asd(a) 
    { 
     if(a==1) 
     document.getElementById("asd").style.display="none"; 
     else 
     document.getElementById("asd").style.display="block"; 
    } 
</script> 
<form id="asd" action=""> 
    <h1>HII insert some data</h1> 
    </form> 

它正在做我的要求正好相反。我也尝试了其他一些东西，但形式始终显示当我第一次加载页面。我想先将它隐藏起来，然后将它加载到按钮单击上。在此先感谢

Answer 1

我加了window.onload = function(){}使页面加载时形式'不可见'。我还添加了一个Hide Form按钮，使其在点击insert或update后再次消失。

请参见下面的代码片段：

<button type="button" onclick="asd(1)" id="insert" value="Add new Product">insert</button> 
 
<button type="button" onclick="asd(1)" id="update" value="Update Product">update</button> 
 
<button type="button" onclick="asd(0)" id="update" value="Hide Form">Hide Form</button> 
 

 
<form id="asd" action=""> 
 
    <h1>HII insert some data</h1> 
 
</form> 
 

 
<script type="text/javascript"> 
 

 
    window.onload = function() { 
 

 
    document.getElementById("asd").style.display = "none"; 
 

 
    }; 
 

 
    function asd(a) { 
 
    
 
    if (a == 1) { 
 
     document.getElementById("asd").style.display = "block"; 
 
    } else { 
 
     document.getElementById("asd").style.display = "none"; 
 
    } 
 
     
 
    } 
 
</script>

我希望这可以帮助，祝你好运。

Answer 2

样式添加到窗体：

<form id="asd" action="" style="display:none"> 

而且点击应该通过其他比1：

<button type="button" onclick="asd(0)" ... 

Answer 3

Try This it will work 
<script 
     src="https://code.jquery.com/jquery-3.1.1.min.js" 
     integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" 
     crossorigin="anonymous"></script> 

    <button type="button" onclick="asd(1)" id="insert" value="Add new Product">insert</button> 
    <button type="button" onclick="asd(2)" id="update" value="Update Product">update</button> 
     </div> 
     <script type="text/javascript"> 
     function asd(a) 
     { 
      if(a == 1) 
      { 
      $('#insertf').show(); 
      $('#updatef').hide(); 
      } 
      else 
      { 
      $('#insertf').hide(); 
      $('#updatef').show(); 
      } 
     } 
    </script> 
    <form method="post" style="display:none !important;" name="insert" id="insertf"> 
    insert form 
    </form> 
     <form method="post" style="display:none !important;" name="update" id="updatef"> 
     update form 
    </form> 

Answer 4

你可以做这样的...

<button type="button" onclick="asd()" id="insert" 
 
      value="Add new Product">insert</button> 
 
      <button type="button" id="update" onclick="asd()" 
 
      value="Update Product">update</button> 
 
    </div> 
 
    <script type="text/javascript"> 
 
     
 
     window.onload=function(){ 
 
     document.getElementById('asd').style.display="none"; 
 
     } 
 
    function asd() 
 
    { 
 
      
 
     document.getElementById("asd").style.display="block"; 
 
    } 
 
</script> 
 
<form id="asd" action=""> 
 
    <h1>HII insert some data</h1> 
 
    </form>

在该时窗是加载形式将不通过使用

window.onload=function(){ 
     document.getElementById('asd').style.display="none"; 
    }