How to make a show a table on clicking a button defined in

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>

Your id is `Class-submit` in HTML but `Class_submit` in jQuery? — , Nov 03 '16 at 05:30
Possible duplicate of [How to prevent form from being submitted?](http://stackoverflow.com/questions/3350247/how-to-prevent-form-from-being-submitted) — Michał Perłakowski, Nov 03 '16 at 05:32

score 2 · Accepted Answer · answered Nov 03 '16 at 05:33

2

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();
});

answered Nov 03 '16 at 05:33

Rajesh Patel

1,946
16
20

score 0 · Answer 2 · answered Nov 03 '16 at 05:31

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 _.

Sudharsan S · Answer 3 · 2016-11-03T05:44:45.037

0

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();
});

edited Nov 03 '16 at 05:44

answered Nov 03 '16 at 05:31

Sudharsan S

15,336
3
31
49

I have used the same id. – Shehzi Nov 03 '16 at 06:08

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

3 Answers3

How to make a show a table on clicking a button defined in