How to make a show a table on clicking a button defined in <button> using jquery

Question

I want to display a table when I click a button. The following code works doesnt work properly. The table is displayed but soon the page gets reloaded and it becomes blank again. The table is visible only for few seconds. Here is what I tried.

    <form class="form-horizontal form-label-left top_margin pad-top-20">

                            <div class="form-group">
                                <label class="control-label col-md-4 col-sm-4 col-xs-12">Select Class</label>
                                    <div class="col-md-5 col-sm-5 col-xs-12">
                                      <select class="form-control" name="Term-select">
                                        <option value="0">None Selected</option>
                                        <option value="1">1st Standard</option>
                                        <option value="2">2nd Standard</option>
                                        <option value="3">3rd Standard</option>
                                        <option value="4">4th Standard</option>
                                        <option value="5">5th Standard</option>
                                        <option value="6">6th Standard</option>
                                        <option value="7">7th Standard</option>
                                        <option value="8">8th Standard</option>
                                        <option value="9">9th Standard</option>
                                        <option value="10">10th Standard</option>
                                        <option value="11">11th Standard</option>
                                        <option value="12">12th Standard</option>
                                      </select>
                                    </div>
                             </div>

                   <div class="form-group">
                     <div class="col-md-6 col-sm-6 col-xs-12 col-md-offset-4">
                        <button class="btn btn-success float-right" id="Class_submit">Submit</button>
                       </div>
                  </div>            
     </form>
     <script>
        $(document).ready(function(){
        $("#Class_submit").click(function(){
        $("#Class_Marks").show();
        });
        });
     </script>

Answer 1

By default <button> inside form is work as <button type="submit">
use preventDefault() or make <button type="button">

$("#Class_submit").click(function(event){
     event.preventDefault();
     $("#Class_Marks").show();
});

Answer 2

It's because your <button> is inside a <form> . By default, when a button is in a form, clicking on it will submit the form. This results in a page refresh.

Try this, which prevents that default action:

    $(document).ready(function(){
      $("#Class_submit").click(function(event){
        event.preventDefault();
        $("#Class_Marks").show();
      });
    });

Edit: Also, make sure your IDs match: your Javascript includes $("#Class_submit") , but there's no element with id="Class_submit" . There is id="Class-submit" , with a hyphen - instead of an underscore _ .

Answer 3

1) You defined id Class-submit in the dom element. but you use id Class_submit in the jquery code. please be make sure whether you use hyphen or underscore for the id.

2) Use event.preventDefault(); If this method is called, the default action of the event will not be triggered.

$("#Class_submit").click(function(event){
     event.preventDefault();
     $("#Class_Marks").show();
});