Javascript - get the form if of current control location

Question

Hi All,

I have a form and it has 4 input elements. if the user enters just two entries and clicks anywhere on the screen (out the form)...i would like to save the details..it is like auto-save.

I have id of my form..i want to compare with form id of the current control on the screen..so that i can ssave the data if both form ids are different..

could you please tell me how can i get the form id of current control location on screen (some times the control could be outside the forms..in that case form id of current cotrol location would null)... but how can i determine that in javascript.

please suggest...

Many Thanks in advance, Jack.

Answer 1

That's an interesting question.

Well, if you didn't think a second (as I admittedly did), you would just hook on the blur event of the HTML <form> element in question.

<form onblur="autosave(this)">

However, the HTML <form> element doesn't support that event. Too bad.

I then thought about jQuery's new 1.4 focusout() event.

$('form').focusout(function() { autosave(this); });

Unfortunately that event get fired as well when you just jump (tab, click) to the next input field inside the same form. Not so nice, it'll probably be too expensive to autosave on every fieldjump. The same effect as with an $(':input').blur(function() { autosave(this.form); });.

I then tried the other way round using focusin():

$('form').focusin(function() {
    $(this).addClass('focused');
});
$(':not(form)').focusin(function(e) {
    if (!$(e.target).parents('form.focused').length) {
        var form = $('form.focused').removeClass('focused');
        autosave(form);
    }
});

Strangely enough this works in IE only and not in the other browsers. It'll be another IE bug/quirk that focus is supported by all elements other than input elements.

Your best bet will probably be hooking on the click() event instead.

$('form').focusin(function() {
    $(this).addClass('focused');
});
$(':not(form)').click(function(e) {
    if (!$(e.target).parents('form.focused').length) {
        var form = $('form.focused').removeClass('focused');
        autosave(form);
    }
});

This works fine. You can find here a live demo.

_{Note that I don't mean to push you jQuery (a JS library which insanely eases HTML DOM traversion and manipulation) through your throat or so, but I don't see nice ways in plain JavaScript to achieve this without writing 10 times as much as code here.}