I am trying to hide a div when the page loads. So I added a class hidden to my html row as mentioned below.

<div class="row hidden" id="printdiv">
    //Row data goes here
</div>

It is working perfectly and hides the row when I load my application in browser.

Now I want to show the div when user click the order button

<input type="submit" class="btn btn-primary save" name="save" value="Order">

My jQuery Code for showing the div is

$(".save").click(function() {
    $('#printdiv').removeClass('hidden');
    $('#printdiv').addClass('show');
});

Now when I load my application in the browser and I click on the order button it shows the div just for 1 or 2 seconds and then the div disappears. I want the div to be there when the order button is clicked. How can I make that div appears to be there for permanent use ?

I am trying to hide a div when the page loads. So I added a class hidden to my html row as mentioned below.

<div class="row hidden" id="printdiv">
    //Row data goes here
</div>

It is working perfectly and hides the row when I load my application in browser.

Now I want to show the div when user click the order button

<input type="submit" class="btn btn-primary save" name="save" value="Order">

My jQuery Code for showing the div is

$(".save").click(function() {
    $('#printdiv').removeClass('hidden');
    $('#printdiv').addClass('show');
});

Now when I load my application in the browser and I click on the order button it shows the div just for 1 or 2 seconds and then the div disappears. I want the div to be there when the order button is clicked. How can I make that div appears to be there for permanent use ?

• javascript
• jquery
• css

• 4 change type="submit" to type="button" – guradio Commented Apr 13, 2016 at 11:28
• 3 Or e.preventDefault() – Rayon Commented Apr 13, 2016 at 11:29
• 1 when do you want to submit the form? – Velimir Tchatchevsky Commented Apr 13, 2016 at 11:32
• 1 @guradio, No, Some delay must be needed! – Rayon Commented Apr 13, 2016 at 11:36
• 1 @LaravelWarrior you page must be getting reloaded.. because of the form submit. place a alert on document ready and check... – Rajshekar Reddy Commented Apr 13, 2016 at 11:42

7 Answers 7

If you are submitting data to the server then you must add show class from your server side.

something like this in php

echo "<script>$('#printdiv').removeClass('hidden');$('#printdiv').addClass('show');</script>"

It seems to be working for me, please edit my code to explain the problem.

$(".save").click(function() {
    $('#printdiv').removeClass('hidden');
    $('#printdiv').addClass('show');
});

.hidden{
  display : none;  
}

.show{
  display : block;
}

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row hidden" id="printdiv">
//it shows
</div>


<form action="">
  First name:<br>
  <input type="text" name="firstname" value="Mickey"><br>
  Last name:<br>
  <input type="text" name="lastname" value="Mouse"><br><br>
  <input type="submit" class="btn btn-primary save" name="save" value="Order">
</form>

If you are expecting the result to be loaded in that div, you should change the input to button, submit the data with an AJAX post, then load the response in that div and show it in the success callback. Otherwise, you need to handle the visibility of the div server side before you return the response.

Remove the hide class from the row class div. And apply the jquery

<div class="row" id="printdiv">
    //Row data goes here
</div>

// Jquery Code

$('#printdiv').hide(0);

$(".save").click(function() {
    $('#printdiv').show(500);
});

Just change your button type from 'submit' to 'button' and use below code.

 $('#printdiv').attr("class","row show");

No need to write below mentioned two lines.

 $('#printdiv').removeClass('hidden');
 $('#printdiv').addClass('show');

if you want to show the data returned from the server in the div you'll have to wait for the server response and then show your div. You can use ajax for that, getting rid of the annoying page reload. a jquery function for that is

$.post('yourPHPfile.php, {data:data}, function(data){
     $("#printdiv").html(data).show();
})

where {data:data}, - the first data is the name of the post variable, the second data is it's value http://api.jquery./jquery.post/

Check below code, it may help you.

    $(".save").click(function(e) {
    e.preventDefault();
    $('#printdiv').toggleClass("hidden");
});

    <script src="https://ajax.googleapis./ajax/libs/jquery/1.10.1/jquery.min.js"></script>
    <link href="https://maxcdn.bootstrapcdn./bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
    <form action="#">
  <div class="row hidden" id="printdiv">
    //Row data goes here
  </div>
  <input type="submit" class="btn btn-primary save" name="save" value="Order">
</form>