Shehzi Shehzi - 1 month ago 10
jQuery Question

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

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

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