Change input value in iframe, change parent input

I have a page on my site containing an iframe, inside the iframe there are several input fields. What I want to do is that when someone enters a value in the iframe input field, that value is then written to the input field on the parent page.

I found several other answers here, but I was not able to get them to fit my needs, 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>

I want that when changing the value of "mytitle" in the child form, it edits the "edit-title" in the parent form

My jQuery has so far been

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

, , , - script, , javascript, , -

( , - , )

+5
1

, , , ,

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

All Articles