Javaスクリプトを使用してボタンクリックで特定のフォームを表示する方法

Question

私は2つのボタンを持っています。つまり、私のJSPページに挿入して更新してください。挿入ボタンをクリックします挿入フォームは表示する必要があります。任意のボタンをクリックします。私はjsを使ってそれを達成したいと思います。ここに私が試みたものがあります。それは私のrequirement.alsoの正反対をやっている

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

私は、このことができます幸運を願っています：

は以下のスニペットを参照してください。

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

をクリックし、他の1よりも渡す必要があります：

Answer 2

フォームにスタイルを追加...あなたはこのように行うことができます

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

これで

ウィンドウフォームが（ "ASD"）