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.

Answer 1

You need to prevent the default behavior of the form:

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

    e.preventDefault();
});