CODEWITHSUNDEEP
javascriptjqueryhtmltwitter-bootstrap
Yasir Ali
Yasir Ali

Reputation: 155

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>

Upvotes: 1

Views: 24

Answers (1)

gurudeb
gurudeb

Reputation: 1876

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.

Upvotes: 2

Related Questions