JavaScript trigger function on event from a script, not explicitly from html

Question

I'm making a registration form ATM, I have it like I want it so far except the excess JavaScript code to check the values real-time (onmouseover, onmouseout, onblur etc.).
A small sample:

<tr>
    <td>
        <label for="name"
               onmouseover="fieldSelected('name', '', 3);"
               onmouseout="checkValue('name', '', 3);">
            Enter your name:
        </label>
    </td>
    <td>
        <input type="text"
               id="name"
               name="name"
               onmouseover="fieldSelected('name', '', 3);"
               onmouseout="checkValue('name', '', 3);"
               onblur="checkValue('name', '', 3);">
    </td>
</tr>

fieldSelected makes the field background yellow if the value of the specified element (first parameter) matches the second parameter (default value) or is shorter than third parameter.

You mouseover the label or the input field and it changes the bg first to yellow, then to red (since you didn't input anything).
checkValue changes the field background to either red or green depending on the value (same parameters).
You enter something in the input field, switch to another field and it changes the background color.

Now, as you will probably notice, there's a LOT of JavaScript function calls right there (5 per each input/select field). It would be great if someone would know a way to attach those event triggers from another place (I don't usually code this dirty), not directly in the form like this and preferably to multiple IDs at once. I have jQuery here, but I'm really no expert in JavaScript.

Or maybe there's a simpler way to do this? I want that the field background color changes on all those events for maximum interactivity. Sure, it's nothing much when all the data goes to the server side but I just want it that way.

Alnitak · Accepted Answer · 2011-06-20 16:28:44Z

1

I'd strongly suggest using jQuery, at which point registration of events for your entire page can become:

function over(ev) {
    var _for = $(ev.target).closest('tr').find('label').attr('for');
    fieldSelected(_for, '', 3)
};

function out(ev) {
    var _for = $(ev.target).closest('tr').find('label').attr('for');
    checkValue(_for, '', 3)
};

$('table').live('hover', over, out).blur(out);

NB: this assumes that every input element and its associated label are in a table row of their own.

http://jsfiddle.net/alnitak/XdzeX/

I created a slightly longer version which makes no assumptions about the table layout at http://jsfiddle.net/alnitak/T6vvN/

function handler(ev) {
    // check which field (or label) is being hovered over
    if (ev.target.tagName === 'LABEL') {
        var _for = $(ev.target).attr('for');
    } else {
        var _for = ev.target.name;
    }

    // do event type checking to decide which function to call
    if (ev.type === 'mouseout' || ev.type === 'blur') {
        checkValue(_for, '', 3);
    } else if (ev.type === 'mouseover') {
        fieldSelected(_for, '', 3);
    }        
};

$('label, input').live('hover blur', handler);

edited Jun 20, 2011 at 16:28

answered Jun 20, 2011 at 16:22

Alnitak

341k72 gold badges420 silver badges503 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

jurchiks Over a year ago

somehow it doesn't work... jsfiddle.net/XdzeX/6 really nice website though :)

Alnitak Over a year ago

it mostly works (see rev #7) - you had the wrong parameter names in your two functions. I'm not seeing any red, yet, though.

jurchiks Over a year ago

this works in fiddle: jsfiddle.net/T6vvN/8 will see what happens on the real site.

jurchiks Over a year ago

slight problem - if you type in that field while cursor is away, the color won't change until you hover over.

Alnitak Over a year ago

so you need to register the change (and/or keydown) handler on the field too

|

Naftali · Accepted Answer · 2011-06-20 16:11:39Z

1

you can use function "addEventListener" to add event to individual fields on form

document.getElementById('name').addEventListener('mouseover',function(){ fieldSelected('name','',3)},false);

Google addEventListener for more details.

edited Jun 20, 2011 at 16:11

Naftali

147k41 gold badges247 silver badges304 bronze badges

answered Jun 20, 2011 at 16:11

WordsWorth

8821 gold badge11 silver badges24 bronze badges

Comments

Naftali · Accepted Answer · 2011-06-20 16:08:13Z

0

For example you can do away with the inlining:

var input_element = document.getElementById('name');

input_element.onmouseover = function(){
       fieldSelected('name', '', 3);
};

input_element.onmouseout = function(){
       checkValue('name', '', 3);
};
//etcetera

And then you can assign other elements in the same manner

answered Jun 20, 2011 at 16:08

Naftali

147k41 gold badges247 silver badges304 bronze badges

3 Comments

Alnitak Over a year ago

no you can't - that'll evaluate fieldSelected(...) immediately and assign the (duff) result to the callback!

Naftali Over a year ago

@Alnitak! ahh true, one second

jurchiks Over a year ago

I tried it like this: var input_name = register.elements['name']; input_name.onmouseover = function(){ fieldSelected('name', '', 3); }; input_name.onmouseout = function(){ checkValue('name', '', 3); }; input_name.onblur = function(){ checkValue('name', '', 3); }; didn't work... register=name of form.

Will · Accepted Answer · 2011-06-20 16:10:58Z

0

Attach the event handlers to a container and use the event object to figure out which input it originated from.

http://developer.yahoo.com/performance/rules.html#events

answered Jun 20, 2011 at 16:10

Will

20.3k7 gold badges49 silver badges48 bronze badges

4 Comments

jurchiks Over a year ago

Unfortunately that's way too little info for me... How do you attach an event handler to DIV and how do you know which event was triggered and from which input/label field?

jurchiks Over a year ago

works for single fields in fiddle, but I have: div>form>table>tr>td>table>tr>td label + td input and no reaction... I would have loved if that would've worked.

Will Over a year ago

Try this: http://jsfiddle.net/Bxx6C/2/. But, why are you embedding the fields in two tables?

jurchiks Over a year ago

table with two separate columns, each column has another two connected columns (label+input). I know it could be done some other way (probably even just 4 columns would do) but unfortunately I didn't write it and I'm being rushed all the time so if I try to make it really perfect... well, I don't wanna hear that bs.

Collectives™ on Stack Overflow

JavaScript trigger function on event from a script, not explicitly from html

4 Answers 4

6 Comments

Comments

3 Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

6 Comments

Comments

3 Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related