File Under: JavaScript

JavaScript Event – Submit

This code was written based on a template by John Resig. The original can be found at John Resig’s addEvent function website.

The code, and the template, are referred to in Webmonkey’s JavaScript Events reference page. In this example, the onSubmit event fires when a form’s submit button is pushed, or if the form is otherwise submitted (such as when the user presses the enter key). It is important to note that if you force form submission with formname.submit() that the submit event is not called. Also note that the event is tied to the form and not the button itself.

The Code

<html>

<head>

<script>

// addEvent function by John Resig:

// http://ejohn.org/projects/flexible-javascript-events/

function addEvent( obj, type, fn ) {

  if ( obj.attachEvent ) {

    obj['e'+type+fn] = fn;

    obj[type+fn] = function(){obj['e'+type+fn]( window.event );}

    obj.attachEvent( 'on'+type, obj[type+fn] );

  } else

    obj.addEventListener( type, fn, false );

}

</script>

</head>

<body>



<!-- HTML for example event goes here -->

<form id="myform">



<input id="mytext" type="text" value="default text -- click submit" /><br />

<input id="myreset" type="reset" /><input id="mysubmit" type="submit" />

</form>



<script>

// Script for example event goes here

addEvent(document.getElementById('myform'), 'submit', function(event) {

	alert('Form is submitting');

});

</script>

</body>

</html>



What it Looks Like