Javascript to run on form submit

Question

I am having some issues getting some javascript code to run whenever a form is submitted.

Here is my code

 <form onsubmit="return header_search()" class="navbar-form navbar-right">
 <div class="form-group">
 <input type="text" placeholder="Tack" class="form-control">
 </div>
 <button type="submit" class="btn btn-success">Search</button>
 </form>
 <script>
 function header_search() {
 e.preventDefault();
 alert("submitted");
 } 
 </script>

http://jsfiddle.net/Fgwzn/

Answer 1

As @Quentin said, it's not behaving as expected because you are not defining e anywhere.

As you tagged jQuery, I'll suggest an alternative using it. Add an ID to your form and then define your onsubmit behavior in JavaScript.

HTML

<form id="your-form" class="navbar-form navbar-right">
 ...
</form>

JavaScript

$('#your-form').submit(function(e) {
 alert('submitted');
 e.preventDefault();
});

I think this would be the easier solution as you would not have to deal with browser compatibility issues (hey IE, I'm looking at you) with the event variable and addEventListener/attachEvent. jQuery takes care of that for you.

Fiddle: http://jsfiddle.net/MGA74/

Answer 2

You never define e, so e.preventDefault(); throws an exception and the script stops.

You can either remove e.preventDefault(); or move to a modern event binding style:

Stop using intrinsic event attributes, bind your event handler with JS and make sure you accept an argument for the event object.

function header_search(e) {
 e.preventDefault();
 alert("submitted");
} 
document.querySelector('form').addEventListener('submit', header_search);

Reading the documentation (MDN is a good place to look) on browser support for and alternatives to querySelector and addEventListener is left as an exercise for the reader.

Answer 3

if you try to cancel the submittion just user return false; in your code or use return false; in the onsubmit

like below

 <script>
 function header_search() {
 alert("submitted");
 return false;
 } 
 </script>

or

<form onsubmit="header_search(); return false;"...

Edit: e.preventDefault(); is not needed. also return is not needed in the form tag.

• Halcyon: e.preventDefault() and return false both prevent the default event (which is to submit the form and load the action page). In OPs trivial implementation it's not needed per see but I do think it's likely (s)he'll need it.