add or subtract functions from onSubmit event handler?

Question

I have the following code:

function showAddrBox() {
    var prompt = document.getElementById('addr_prompt');
    prompt.style.display = 'block';
    document.generic_form.address.style.display = 'block';
    document.generic_form.onsubmit = validateAddrForm;
}

function hideAddrBox() {
    var prompt = document.getElementById('addr_prompt');
    prompt.style.display = 'none';
    document.generic_form.address.style.display = 'none';
    document.generic_form.onsubmit = null;
}

The problem is that sometimes I have additional functions attached to onSubmit that I want to preserve. I want to be able to add and remove individual functions from the onSubmit event, not just set them with "onsubmit =". In other words, I need a way to accomplish something like this:

document.form.onsubmit += function;
document.form.onsubmit -= function;

Any ideas?

Answer 1

Use element.addEventListener("eventName", callbackFunction, false) and element.removeEventListener("eventName", callbackFunction).

Where eventName is the name of the handler without the 'on'. So onsubmit becomes submit.

For documentation of the two functions, see:

• https://developer.mozilla.org/en/DOM/element.addEventListener
• https://developer.mozilla.org/en/DOM/element.removeEventListener

Answer 2

Quirksmode has a wonderful article about advanced event registration.

Short form is: You can bind multiple events using addEventListener (attachEvent in older versions of IE).

if (someform.addEventListener) {
  someform.addEventListener('submit', somefunc, false);
} else {
  someform.attachEvent('onsubmit', somefunc);
}

To remove them you can use removeEventListener and detachEvent respectively.

---

Pretty quickly you'll get annoyed by repetitively typing addEventListener and attachEvent, and you might consider making some generic code to bind events for you. Fortunately, other programmers have had the same idea, and many libraries are available that handle event management elegantly. jQuery tends to be the library of choice, because binding an event is as simple as:

$('#formid').submit(somefunc);

the generic event binding method is:

$('#formid').on('submit', somefunc);

to unbind you can use:

$('#formid').off('submit', somefunc);

Although all of this is well documented in the jQuery API.

Answer 3

What I would do is have one onSubmit function right on the form that orchestrates the rest of the functions, performs logic on what to do when. At the end of that function execution you can return true if you want to proceed with the submission or return false if you don't.

Answer 4

u can mention two or more functions for a form like below.

<form name="formaname" onsubmit="function1(),function2()">

more on onsubmit