如何使用Java脚本在按钮单击上显示特定表单

Question

我有2个按钮，即在我的jsp页面中插入和更新。单击“插入”按钮时，应该显示插入表单，并且更新按钮也一样。单击任何按钮之前，都不应该显示该表单。 我想使用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";
   }