Form conflicting with JQuery animation

Question

I have a div (id="right") which holds a form with a submit button. Upon clicking Submit, the div should reduce its width. Works fine when I delete the <form> tags from my HTML, but doesn't work when the form is there. How come?

HTML:

<div id="right">
    <form method="POST" action="<?php echo $_SERVER['REQUEST_URI']; ?>">
        ... some input fields here ...
        <input id = "btnRight" type="submit" value="Submit">            
    </form>
</div>

CSS:

#right {
    width: 50%;
    min-width: 35px;
    float: right;
    margin: 0;
    position: relative;
    overflow: hidden;
}

JQuery:

$(document).ready( function(){
    $('#btnRight').click(function () {
        $('#right').animate({ width: '3%' }, 'slow');   
    });
});

Any help is much appreciated!

possible duplicate of [How to prevent buttons from submitting forms](http://stackoverflow.com/questions/932653/how-to-prevent-buttons-from-submitting-forms) — Joe, Jun 14 '13 at 10:00

Dhaval Marthak · Answer 1 · 2013-06-14T10:02:54.283

0

Add preventDefault()

If this method is called, the default action of the event will not be triggered.

$(document).ready( function(){
    $('#btnRight').click(function (e) {
    e.preventDefault()
        $('#right').animate({ width: '3%' }, 'slow');   
    });
});

DEMO HERE

edited Jun 14 '13 at 10:02

answered Jun 14 '13 at 09:57

Dhaval Marthak

17,246
6
46
68

score 0 · Accepted Answer · answered Jun 14 '13 at 09:57

0

Use preventDefault function for event, it will cancel default "submit" event:

$(document).ready( function(){
    $('#btnRight').click(function (e) {
        e.preventDefault();
        $('#right').animate({ width: '3%' }, 'slow');   
    });
});

answered Jun 14 '13 at 09:57

maximkou

5,252
1
20
41

Form conflicting with JQuery animation

2 Answers2