Detect dynamic form input change

Question

I'm attempting to perform an action when my form's inputs are changed, but it is not working. My form is added dynamically:

<iframe onload="javascript:parent.scrollTo(0,0);" 
  height="447" allowTransparency="true" frameborder="0" scrolling="no" 
  style="width:100%;border:none" src="https://emu.edu/machform/embed.php?id=38142"
  title="Form"><a href="https://emu.edu/machform/view.php?id=38142" title="Form">Form</a>
</iframe>

Here's my jQuery:

function doThis() {
    alert("Form changed!");
}

$("iframe").on('change', 'input', doThis);

Are the main page and the iframe on the same domain? May be have a look here: http://stackoverflow.com/questions/364952/jquery-javascript-accessing-contents-of-an-iframe — Zimmi, Jul 31 '15 at 18:07
It's a security error: `Both frames are sandboxed and lack the "allow-same-origin" flag`. See the console. — Vidul, Jul 31 '15 at 18:24
Can you try `$("iframe").contents().find("input").on("change", doThis);` ? — czheo, Jul 31 '15 at 18:27
Vidul, I guess it doesn't work, then, to recreate the problem with jsfiddle. It doesn't work even when the origins match. — Joel Christophel, Jul 31 '15 at 18:35

score 1 · Accepted Answer · answered Jul 31 '15 at 18:51

1

You have to wait for the iframe to load:

$('iframe').load(function() {
  $("iframe").contents().find("input").on("change", doThis);
});

answered Jul 31 '15 at 18:51

Joel Christophel

2,604
4
30
49

Detect dynamic form input change

1 Answers1