3

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?

4 Answers 4

7

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.

6

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:

0
0

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.

0

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

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

more on onsubmit

6
  • Based on jsfiddle.net/AGQ4q and what I've read elsewhere on the Internet, this is false.
    – Havvy
    Jan 24, 2012 at 5:07
  • where is form usage in this example? Jan 24, 2012 at 5:09
  • onsubmit behaves no differently than any of the element event handler properties, and onclick is easier to test than setting up a form.
    – Havvy
    Jan 24, 2012 at 5:12
  • comparison not required here,try with submit,try on w3schools link given it works I have tried. Jan 24, 2012 at 5:16
  • 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.
    – Havvy
    Jan 24, 2012 at 5:28

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.