Change input value in iframe, parent input changes

Question

I have a page in my site that contains an iframe, inside the iframe are a number of input boxes. What I want to do is that when someone enters a value into the iframe input box, that value is then written into an input box in the parent page.

I had found some other answers on here but I couldn't manage to get them to fit my need, so far I have something like

HTML - for parent

<form method="post" id="presentation-form" action=”action.php”>
  <input type="text" id="edit-title" name="title">
    <iframe id="upload_frame" src="upload.html" ></iframe>
  <input type="submit" id="edit-submit" name="op" value="Save">
</form>

HTML - for child

<form name="formUpload" id="formUpload" etc..> 
  <input id=”mytitle” type="text" size="50" name="title" value=""> 
  <input type="submit" name="submit" value="Upload File">
</form>

What I want is that when I change the value of 'mytitle' in the child form, it chanegs the 'edit-title' in the parent form

My Jquery so far was

$('#upload_frame').contents().find("#formUpload").delegate('input', 'change', function(e){ 
  //code goes here
});

The problem I was getting is that even when I tried to alert, or log something from within that script, nothing was happening, I wasn't getting any javascript error but nothing got alerted when I did anything

(before anyone asks, this child page is a page within my same domain)

Any help would be greatly appreciated

Answer 1

For future people, this is the solution I ended up using, and it seems to work fine

$('iframe').load(function(){
     $('iframe').contents().find('input#mytitle').bind('change',function(e) {
        title_name = $(this).val();
        $('input#edit-title').val(title_name);
     });
});