Question

I’m trying to use jQuery to fill in a form in an iFrame. Do you see anything wrong with this code? It should be selecting the inputs and filling them in with the values TESTuser and TESTpassword.

Here is the HTML from the iFrame :

<td align="right"><label for="rcmloginuser">CSID</label></td>
<td><input name="_user" id="rcmloginuser" type="text"></td>
</tr>
<tr>
<td align="right"><label for="rcmloginpwd">Password</label></td>
<td><input name="_pass" id="rcmloginpwd" type="password"></td

And here is the jQuery/parent part.

<script type='text/javascript'> 
$().ready(function () {
    $('#emailframe').ready(function () {

        $('#emailframe').contents().find('#rcmloginuser').val('TESTuser');
        $('#emailframe').contents().find('#rcmloginpwd').val('TESTpassword');

    });
};


</script>

<iframe id="emailframe" src ="<?php global $base_url; echo $base_url; ?>/mail.php" width="100%" height="700"></iframe>

Answer 1

There are a few script errors, first the <iframe> doesn’t have a ready event (calling $("anything").ready() is really calling .ready() for the current document).

Instead you want the <iframe>‘s .load() event, like this:

$(function () {
  $('#emailframe').load(function () {
    $('#emailframe').contents().find('#rcmloginuser').val('TESTuser');
    $('#emailframe').contents().find('#rcmloginpwd').val('TESTpassword');
  });
});

Also notice the end is });, you were missing a parenthesis there.