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?

Flashback

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

Ferd

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.

Hoang

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.

Hear

Answer 4

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

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

more on onsubmit

Nicholnichola

Based on jsfiddle.net/AGQ4q and what I've read elsewhere on the Internet, this is false. – Ferd

where is form usage in this example? – Nicholnichola

onsubmit behaves no differently than any of the element event handler properties, and onclick is easier to test than setting up a form. – Ferd

comparison not required here,try with submit,try on w3schools link given it works I have tried. – Nicholnichola

Oh. The functions need to actually be executing. In any case, this still doesn't answer the question on how to add AND remove listeners. – Ferd

read Q carefully,nothing like Listeners is mentioned in the question,tht is ur understanding,one problem may hav n number of solutions,this way u can add n number of functions to onsubmit event to preserve existing functions,which is asked by the user – Nicholnichola