I'm new in javascript and I'm stuck here. Let's say I have a parent window and it has an input field as well as a button that opens a popup window. This popup window contains Images. I just need to copy image URL to that input in the parent window when I click on any image on the popup window. Any help please. Thanks

Edit:

This is my javascript code on the popup window

<script type="text/javascript">
function clicked(address) {
    window.parent.document.getElementById('copy_img').value = address.src;

}
</script>

HTML

<input type="text" name="copy_img" id="copy_img" size="133" />
<img border="0" onclick="clicked(this)" src="images/1.jpg" width="135" height="46">
<img border="0" onclick="clicked(this)" src="images/2.jpg" width="128" height="48">
<img border="0" onclick="clicked(this)" src="images/3.jpg" width="305" height="44">

Parent Window HTML Code

<input type="text" name="copy_img" id="copy_img" />

I Just Can't get it to work

I'm new in javascript and I'm stuck here. Let's say I have a parent window and it has an input field as well as a button that opens a popup window. This popup window contains Images. I just need to copy image URL to that input in the parent window when I click on any image on the popup window. Any help please. Thanks

Edit:

This is my javascript code on the popup window

<script type="text/javascript">
function clicked(address) {
    window.parent.document.getElementById('copy_img').value = address.src;

}
</script>

HTML

<input type="text" name="copy_img" id="copy_img" size="133" />
<img border="0" onclick="clicked(this)" src="images/1.jpg" width="135" height="46">
<img border="0" onclick="clicked(this)" src="images/2.jpg" width="128" height="48">
<img border="0" onclick="clicked(this)" src="images/3.jpg" width="305" height="44">

Parent Window HTML Code

<input type="text" name="copy_img" id="copy_img" />

I Just Can't get it to work

• javascript
• parent-child
• popupwindow

• I am not sure for this parent to popup relation !! But i think for this, you have to use back-end for getting the value to your parent! – Ash Commented Feb 27, 2014 at 17:34

5 Answers 5

I finally figured it out Use window.opener

window.opener.document.getElementById('archiveimages').value = address.src;

When the user select the image from the popup, use the following statement to set the value of the input field. Assuming the id of the input field is 'myInputField'

window.parent.document.getElementById('myInputField').value = imargeUrl;

You can open a window using:

window.open('http://www.website.com/popup/page?var=test','Note','width=700,height=500,top=150,left=150,scrollbars=yes'

Then when you click a link on the popup you can do:

goback('http://www.website.com/page?var=testing');

window.parent.getImageURL(img.src);

The popup can access it parents javascript with the above method, just have a function (like getImageURL()) on the global scope and it will work

//-- window parent

function openChildWindow() {
  // Open child window
  var childWindow = window.open('child.html', 'childWindow', 'width=400,height=200');

  // Listen for message from child window
  window.addEventListener('message', function(event) {
    // Display the received message from child window
    alert('Received message from child window: ' + event.data);
  });
}

//-- popup window child ...

function passValueToParent() {
  // Get reference to the parent window
  var parentWindow = window.opener;

  // Pass value to parent window
  var message = 'Hello from child window!';
  parentWindow.postMessage(message, '*');
}