How to show a particular form on button click using java script

Question

i have 2 buttons ie insert and update in my jsp page.on click of insert button insert form should be display and same goes for update button.form shouldnot be visible before clicking of any button. and i want to achieve it using js. here is what i tried .

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

it is doing exactly opposite of my requirement.also i tried few other things but form is always displayed when i first load the page. i want it to be hidden at first then load it on button click. Thanks in advance

Answer 1

I added the window.onload = function(){} to make the form 'invisible' when the page loads. I also added a Hide Form button to make the form disappear again after clicking insert or update .

See the snippet below:

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

I hope this helps, good luck.

Answer 2

Add a style to the form:

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

And the click should pass other than 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

you can do like this...

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

In this when window is load the form will not display by using

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