Correct e.preventDefault() on a submit button

Question

I have the following code:

<form>
<input type="text" name="keyword" value="keyword">
<input type="submit" value="Search">
</form>

I was wondering if anyone could show me with jquery how I could put an e prevent default on the submit button, so that if the submit button is triggered I can get it to instead do something else other than submit, say have an alert.

So far I have this:

function submit_hit() {
    e.preventDefault();
    alert('History set');
}

Answer 1

$('form input:submit').on('click', function(e) {
    e.preventDefault();
    alert('History set');
});

Fiddle

Answer 2

You can use this:

Option 1 -

$('form').on('submit',function(e){
   e.preventDefault();
   alert('Prevented!');
});

This function will prevent the form submit. It will fire when the form is submited. With click or with Enter key.

If you have many forms can be good to use a ID on this selector, like $('#form_id').on('submit',function(e){//...ect

Demo here

Option 2 -

$('form input[type=submit]').on('click',function(e){
   e.preventDefault();
    alert('Prevented!');
});

This function will also prevent the form submit. It will fire when the input button is clicked .

Demo here