CODEWITHSUNDEEP
javascripthtml
Amado
Amado

Reputation: 383

How to show hidden form

I want to show a hidden form when click on button my problem is when I click on the button the form is displayed for seconds then the page reload this is my code:

Java Script:

function show(){
    document.getElementById("theForm").style.display="block";
}

html :

<button id="search" onclick="show()">show</button>
</form>
<form class="form-horizontal" action="FormController/save" method = "POST" id="theForm" style="display: none">

Upvotes: 1

Views: 1349

Answers (4)

eldix_
eldix_

Reputation: 127

<script>
 $(document).ready(function(){   
     $("#what").click(function() { //call event
         $(".hello").hide();//hide forms
         $('neededFormOnly').show();  //show only the needed form
         return false 
   });
 });
</script>

Upvotes: -1

Kaushik solanki
Kaushik solanki

Reputation: 438

Try This:

Java Script:

            function show(){
            document.getElementById("theForm").style.display="block";
        }
html :

<input type="button" onclick="show()" id="search" value="show">
            </form>
            <form class="form-horizontal" action="FormController/save" method = "POST" id="theForm" style="display: none">

Upvotes: 0

Satpal
Satpal

Reputation: 133403

Default behavior of button is submit, hence the form is submitted. You can use type="button" which doesn't have default behavior, thus it can be associated with client-side event handlers.

<button type="button" id="search" onclick="show()">show</button>

Additionally, I would recommend you do get rid of of ugly inline click handlers and bind event handler using addEventListener()

 document.querySelector('#search').addEventListener("click", show, false);

HTML

<button type="button" id="search">show</button>

Upvotes: 6

Zakaria Acharki
Zakaria Acharki

Reputation: 67505

If you're using jQuery as your tags says so you could do it like :

$('#seach').on('click', function(){
    $('#theForm').show();
})

Hope this helps.

$('#search').on('click', function(){
  $('#theForm').show();
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="search">Show</button>
<br>
<form class="form-horizontal" action="FormController/save" method = "POST" id="theForm" style="display: none">
  MY FORM
</form>

Upvotes: 1

Related Questions