如何使用javascript在按钮单击时显示特定表单答案

【问题标题】：How to show a particular form on button click using java script如何使用javascript在按钮单击时显示特定表单
【发布时间】：2017-02-22 07:52:28
【问题描述】：

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

这与我的要求完全相反。我也尝试了一些其他的东西，但是当我第一次加载页面时总是显示表单。我希望它首先被隐藏然后在按钮单击时加载它。提前致谢

【问题讨论】：

document.getElementById("asd").style.display = a?"block":"none" - 并使用 CSS 隐藏它
第一次加载时如何隐藏？？
<style>#asd { display:none}</style>
感谢您的帮助

标签： javascript forms button

【解决方案1】：

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

参见下面的 sn-p：

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

我希望这会有所帮助，祝你好运。

【讨论】：

这个还是比较优雅的：document.getElementById("asd").style.display=a?"block":"none"

【解决方案2】：

为表单添加样式：

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

并且点击应该通过而不是1：

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

【讨论】：

【解决方案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>

【讨论】：

【解决方案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";
   }

【讨论】：