Perform function on form submit

Question

Hopefully this is a pretty simple question! I've got the code working in jQuery to listen for a specific form on a page to be submitted and perform an alert when it is.. I.e.: The form itself doesn't have an ID so I am targeting the form within a specific DIV ID.

$("#content form").submit(function() {
    alert("lorem ipsum dolor?");
});

What would be the syntax for performing this in javascript alone without using jquery? For example, I have this code (below) and just am unsure of how to listen for the form to be submitted to perform an action..

var submitform = document.getElementById("content").getElementsByTagName("form");

Thanks!

Answer 1

submitform.onSubmit = function() {
    alert("lorem ipsum dolor?");
}

Answer 2

You can use the unSubmit handler.

Answer 3

To do it in a cross browser, not destructive way, it takes a bit of code:

var submitform = document.getElementById("content").getElementsByTagName("form")[0],
    callback = function(){
       alert("lorem ipsum dolor?");
    };


if(window.addEventListener){
   submitform.addEventListener("submit", callback, false); // Most modern browsers
} else if (window.attachEvent){
   submitform.attachEvent("onsubmit", callback); // IE
} else {
   submitform.onsubmit = callback; // Destroys other handlers
}

Answer 4

First of all, you should known that the getElementsByTagName will return a NodeList, you need to get the first DOM element, e.g.:

var submitForm = document.getElementById("content")
                         .getElementsByTagName("form")[0];

Then you can bind the submit event:

submitForm.onsubmit = function () {
  alert("lorem ipsum dolor?");
};