How to show/hide a form on button click in jquery?

Question

I have two forms in my page. I hide the form 2 using HTML inline style.

        <form id="productionForm" name="productionForm" method="POST" style="display:none;">

I have input button on form 1.

    <input id="buttonProductionSummary"  class="buttonProductionSummary" type="submit" value="Submit" />

I have JQuery code to load the form 2 on button click of form 1. My JQuery code is as follows.

    <script type="text/javascript">
    $(document).ready(function(){

        $("#buttonProductionSummary").click(function() {
            $("#productionForm").show();
        });
    });
</script>

When i click the button in the form one, the page get reloaded again, so the form 2 appears and disappers again. How to can i make the form 2 to appear when i click button on form 1.

Does it have to be a submit button at all? I suppose if you want Enter to trigger it then that makes sense, but FYI another solution is to use <input type="button"> which will not submit the form. — ErikE
– ErikE, Commented Dec 15, 2012 at 0:34
Form1 contains filters. I need to pass the filter values selected from form1 to mysql database and retrieve values to be filled in form2. If there is no data available for the passed filters, an empty form should be dislplayed. to perform this i need to have submit in form1. — Allen
– Allen, Commented Dec 15, 2012 at 3:27
You can't submit a form and keep the same web page without reloading unless you use ajax. — ErikE
– ErikE, Commented Dec 16, 2012 at 18:18

David G · Accepted Answer · 2012-12-15 00:24:51Z

3

You need to prevent the default behavior of the form:

$("#buttonProductionSummary").click(function(e) {
    $("#productionForm").show();

    e.preventDefault();
});

answered Dec 15, 2012 at 0:24

David G

97.6k41 gold badges173 silver badges258 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

ayu for u · Accepted Answer · 2013-12-14 13:46:35Z

as per my requirement i tried to display the form which is to be edit and hide all remaining forms using the following way;

<html>

<head>
<script>
$(document).ready(function(){   

    $("#what").click(function() { //event called

         $(".hello").hide(); // to hide all forms
          $('#ayyappa1').show();  //to dispaly needed form only
          return false //option to stop
 });

 });


</script>


</head>
<body>
<form id ="ayyappa1 " class ="hello"> // declare class for every form
<input type="check" class="what">   // trigger of click event 
</form>
<form id ="ayyappa2 " class ="hello">
<input type="check" class="what">
</form>
<form id ="ayyappa3 " class ="hello">
<input type="check" class="what">
</form>
<form id ="ayyappa4 " class ="hello">
<input type="check" class="what">
</form>
</body>
</html>

IROEGBU · Accepted Answer · 2012-12-15 10:41:57Z

1

The problem is that clicking the button in form 1 is triggering a submission of the form (default event)... Hence, the page reloading. You should prevent that by using the submit event as your trigger, handle the form using AJAX and output the result to #productionForm before displaying:

$("#form1").submit(function() {
    /* AJAX calls and insertion into #productionForm */
    $("#productionForm").show();
    return false;
});

edited Dec 15, 2012 at 10:41

answered Dec 15, 2012 at 0:29

IROEGBU

95816 silver badges34 bronze badges

1 Comment

Allen Over a year ago

Form1 contains filters. I need to pass the filter values selected from form1 to mysql database and retrieve values to be filled in form2. If there is no data available for the passed filters, an empty form should be dislplayed. to perform this i need to have submit in form1.

Fabio says Reinstate Monica · Accepted Answer · 2016-12-07 21:47:11Z

1

None of the answers above works, so I figured it out myself. This code works like a charm.

<button id="btn" class="editbutton" >Edit your Profile</button>
<form id="editForm"  action="" method="post" name="editForm">

<input type="text" name="txtname" placeholder="enter your name">

</form>`

<script type="text/javascript">

    $(document).ready(function(){
        $("#editForm").hide();
        $("#btn").click(function(e) {
            $("#editForm").show();
            $("#btn").hide();

        });
    });
</script>

edited Dec 7, 2016 at 21:47

Fabio says Reinstate Monica

5,8379 gold badges46 silver badges67 bronze badges

answered Dec 7, 2016 at 20:25

Debasish Ghosh

1,88724 silver badges29 bronze badges

Collectives™ on Stack Overflow

How to show/hide a form on button click in jquery?

4 Answers 4

Comments

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related