Yasir Ali Yasir Ali - 2 months ago 8
HTML Question

my jquery code doesnot work in bootstrap

My jquery code doesnot work in bootstrap. i have some columns and i want to put submission form within specific column but when i use form tag my jquery wont work.

<body>
<form>
<div class="row" id="row1">
<div class="col-sm-6" id="col-1">
<button id="btn">hide me</button>
</div>
<div class="col-sm-6" id="col-2">

</div>
</div>
<div class="row">
<div class="col-sm-6" id="col-3">

</div>
<div class="col-sm-6" id="col-4">

</div>
</div>
</form>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#btn").click(function(){
$("#row1").slideUp("slow");
});
});
</script>

Answer

You need to use preventDefault() as shown below:

$(document).ready(function(){
    $("#btn").click(function(e){
        e.preventDefault();
        $("#row1").slideUp("slow");
    });
});

When you are putting the form tag and there is a button tag inside it, the default action is to submit the form. So you need to prevent that first using preventDefault().

Please let me know if it solved the issue or not.

Comments