onChange from iframe

[jwcarlton]

I'm trying to call a function after a text field is changed from a
separate iframe. Like this:

<input type="text" name="pic" value="" onChange="alert('works')">
<iframe id="iframe_pic" src="whatever.cgi" width="150" height="35"></
iframe>

The iframe runs a function, then on success sends a value back to
"pic", like so:

parent.document.formname.pic.value = pic;

Where "pic" is defined within the function in the iframe.

The input field does change correctly, but I'm not getting the
expected "alert" from onChange. There are no Javascript errors shown,
either, so even though the value changes, it doesn't look like the
change is being recognized from onChange.

Any suggestions?

TIA,

Jason

 

[Jukka K. Korpela]

I'm trying to call a function after a text field is changed from a
separate iframe.

The issue can be reduced to a simple case where you just use JavaScript
to set the value of an <input> element and the element has an onchange
event handler. The handler doesn't get executed, because:

"The onchange event occurs when a control loses the input focus and its
value has been modified since gaining focus."
http://www.w3.org/TR/html4/interact/scripts.html#h-18.2.3

This does not depend on the use of iframe.

The input field does change correctly, but I'm not getting the
expected "alert" from onChange. There are no Javascript errors shown,
either, so even though the value changes, it doesn't look like the
change is being recognized from onChange.

Exactly. But why are you using onchange, instead of simply calling
whatever needs to be called to perform the action?

Theoretically, you could make your code first set focus on the text
field, then change its content, and finally to make it lose focus. But
that would a) be pointlessly complicated, b) not work, as browsers don't
seem to that the spec that literally - rather, they interpret a field
changed if the _user_ has changed it (directly, not via a script).

 

[jwcarlton]

The issue can be reduced to a simple case where you just use JavaScript

to set the value of an <input> element and the element has an onchange
event handler. The handler doesn't get executed, because:

"The onchange event occurs when a control loses the input focus and its
value has been modified since gaining focus."http://www.w3.org/TR/html4/interact/scripts.html#h-18.2.3

This does not depend on the use of iframe.

Yeah, I just found that out myself when I tried typing something in
manually, and it didn't trigger until I blurred the field. Blah.

Exactly. But why are you using onchange, instead of simply calling
whatever needs to be called to perform the action?

This iframe is used on dozens of pages, but I'm only using this event
on one page. So, if I modify the iframe itself, I'll need to modify
all of those pages to reflect it. It can be done, but it's more work
than I'd hoped for.

Theoretically, you could make your code first set focus on the text
field, then change its content, and finally to make it lose focus. But
that would a) be pointlessly complicated, b) not work, as browsers don't
seem to that the spec that literally - rather, they interpret a field
changed if the _user_ has changed it (directly, not via a script).

You're right, that does seem like a pretty gimpy workaround. I guess
that I'd just assumed onChange() would trigger when something changed,
not when something changed AND blurred.

I might be able to get around this issue by using onResize() on the
iframe itself (the function does change the size of the iframe), but
that's a little iffy, too. So if you guys think of any other way for
me to trigger an event from a script like this, please do post it!

Thanks, Yukka,

J

 

[Jukka K. Korpela]

I might be able to get around this issue by using onResize() on the
iframe itself (the function does change the size of the iframe), but
that's a little iffy, too. So if you guys think of any other way for
me to trigger an event from a script like this, please do post it!

Well, it crossed my mind that you could explicitly call the event
handler, after changing the field value:

parent.document.formname.pic.onchange();

(At least directly calling onchange() works within a document. It may
not conform to everyone's idea of disciplined programming, but neither
does the DOM access style like the above - it's more normal to use
getElementById() these days - and discipline is often overrated as
opposite to getting things done. )

 

[SAM]

Le 24/08/11 07:46, jwcarlton a écrit :

parent.document.formname.pic.value = pic;

maybe :

var target = parent.document.formname.pic;
target.focus();
target.value = pic;
target.blur();

???

 

[Thomas 'PointedEars' Lahn]

Well, it crossed my mind that you could explicitly call the event
handler, after changing the field value:

parent.document.formname.pic.onchange();

(At least directly calling onchange() works within a document. It may
not conform to everyone's idea of disciplined programming,

It's proprietary.

but neither does the DOM access style like the above - it's more normal to
use getElementById() these days -

Nonsense. Using getElementById() even when not necessary is your twisted
idea of normality. Replacing the above proprietary referencing with the
more standards-compliant

window.parent.document.forms["formname"].elements["pic"]

(and standards-compliant shortcuts thereof) is still quite useful today, and
common among those who know what they are doing (so not you). Cf. the FAQ.


PointedEars