calling JavaScript functions from HTML form fields

Question

When calling a JavaScript function what does the return value do to an input form field? For example:

<script type="text/javascript">
 function foo()
 {
  return true;
 }
</script>
<input type="text" id="txt1" onkeyup="return foo()" />

and variations, IIRC onkeyup="foo(); return false"
I don't really need a return time, what's the easiest way to do this?

Right now I'm trying to call multiple functions from one event and not sure what the appropriate way is: <input type="text" id="txt1" onkeyup="return foo1(); return foo2();" or
<input type="text" id="txt1" onkeyup="return foo1()" onkeyup="return foo2();"

possible duplicate of [What's the effect of adding 'return false' to an onclick event?](http://stackoverflow.com/questions/128923/whats-the-effect-of-adding-return-false-to-an-onclick-event) — Felix Kling, Jan 31 '13 at 19:01

score 2 · Accepted Answer · answered Jan 31 '13 at 19:00

return false; is used to stop the event from having its default effect (in this case, the letter typed from being added). return foo() is used so that foo can be the judge of whether to return true or return false and therefore whether or not the default action should happen.

If you are just calling a function that won't affect whether or not the event actually takes place, just use onkeyup="foo1(); foo2();". If, however, one of them affects the outcome, it should be called last and have a return before it.

In general, though, it's easier to have a single function in there, say onkeyup="return foo()", and then have

function foo() {
    foo1();
    foo2();
    return true; // or whatever
}

One more question, since `;` isn't necessary in JavaScript must it be placed in between `onkeyup="foo1();foo2()"`? — Celeritas, Jan 31 '13 at 19:40
It is necessary, required even. If you leave it out, the browser attempts to guess where they should be. — Niet the Dark Absol, Jan 31 '13 at 20:25

score 1 · Answer 2 · answered Jan 31 '13 at 19:03

The most appropriate way is to bind multiple functions to one event like so:

ELEMENT.addEventListener('onkeyup', function(event) {
    foo();
    bar();
    fooBar();
}, false);

Or to simplify it even further you could use jQuery:

$(element).on({
    keyup: function() {
        foo();
        bar();
        fooBar();
    }
});

*Hint: use this (in jquery) or event.target (non-jquery) to work with the event source.

score 0 · Answer 3 · answered Jan 31 '13 at 18:59

Ideally you shouldnt be putting them inline AT ALL... you should be using event handlers attached to the dom elements.

for example:

document.getElementById('txt1').addEventListener('onkeyup', function() {
   foo1();
   foo2();
});

Now the caveat here is that event assignment isnt necessarily normalized so you need to attach listeners in different ways in different browsers. This is one of the reasons people use libraries like jQuery - it normalizes all this.

calling JavaScript functions from HTML form fields

3 Answers3