jQuery prevent input default action

Question

I have an ajax form I would like to prevent from preforming an action when submitted and have tried numerous methods and nothing works. My first method was:

 return false;

and then I tried

event.preventDefault();

event being the callback name or whatever you call it.

function(event) {
    event.preventDefault();
};

Heres the HTML I am using right now:

<form class="main_search" method="POST" action="ajaxsearch.php">
    <input type="text" class="editable" placeholder="Search">
</form>

Heres the test javascript I set up:

$('.main_search').submit(function(event) {
    event.preventDefault(console.log(event)); //Log the event if captured
});

Neither method works but the weird part is that they work on different things like buttons but they don't work on this one form. Am I missing something here? Thanks!

This is weird: event.preventDefault(console.log(event)); Those should be two lines (event.preventDefault(); doesn't take any arguments). — Jared Farrish
– Jared Farrish, Commented Feb 19, 2012 at 2:28
@JaredFarrish That would be a good reason but it still doesn't work — Joe Torraca
– Joe Torraca, Commented Feb 19, 2012 at 2:29
I didn't say it was a reason, I said this is weird. Otherwise, I would have posted it as an answer. ;) — Jared Farrish
– Jared Farrish, Commented Feb 19, 2012 at 2:31
What's you've posted seems to work: jsfiddle.net/5TVGn Is this a dynamically added form? — Jared Farrish
– Jared Farrish, Commented Feb 19, 2012 at 2:32

Jared Farrish · Accepted Answer · 2012-02-19 02:48:10Z

2

To deal with your specific problem (ie, inserting dynamically generated form), use $.on(). You're better off not using document.body as the parent observer (as $.live() essentially does) with $.on(), so the following would be appropriate (considering your actual markup):

<div id="searches">
    <form class="main_search" method="POST" action="ajaxsearch.php">
        <input type="text" class="editable" placeholder="Search">
    </form>
</div>

var $main_search = $('.main_search'),
    $searches = $('#searches');

$searches.on('submit', '.main_search', function(event) {
    event.preventDefault();
    console.log(event); //Log the event if captured
});

setInterval(function(){
    $searches.append($main_search.clone());
}, 5000);

http://jsfiddle.net/5TVGn/2/

edited Feb 19, 2012 at 2:48

answered Feb 19, 2012 at 2:42

Jared Farrish

49.4k17 gold badges100 silver badges108 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Johannes Staehlin · Accepted Answer · 2012-02-19 02:32:21Z

1

I set up a JSfiddle:

http://jsfiddle.net/XM679/

Could it be you forgot to wrap it into $(document).ready(function() {} ? If this didn't solve the problem: Since the fiddle is working - we would need your context to help more.

answered Feb 19, 2012 at 2:32

Johannes Staehlin

3,7307 gold badges38 silver badges50 bronze badges

Collectives™ on Stack Overflow

jQuery prevent input default action

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related