I'm trying to pass and insert value from child window to the value attribute of text field which located in parent window, and not to its property. I've tried all the following but no luck so far:

Child window:

function getFile(oImg){
var id = <?php echo $id; ?>;
var editPage = window.opener.document;
oSrc = oImg.src;
lastSlash = oSrc.lastIndexOf('/');
oName = oSrc.substr(lastSlash+1);
var logo = 'logo'+id, logoHolder = 'logoHolder'+id;
//window.opener.document.getElementById(logo).value = oName;
//window.opener.document.getElementById(logo).setAttribute("value", oName);
//window.opener.document.getElementById(logo).innerHTML = oName;
//window.opener.document.getElementById(logo).setValue = oName;
window.opener.document.getElementById(logoHolder).src = "templates/img/user/" + oName;
this.close()
}

Parent page:

<input type="text" id="logo1" name="logo1" value="VALUE-SHOULD-BE-INSERTED-HERE" />

The first one just display the value in the text-field but when I'm trying to save it with jquery, the value is actually empty. Any idea?

I'm trying to pass and insert value from child window to the value attribute of text field which located in parent window, and not to its property. I've tried all the following but no luck so far:

Child window:

function getFile(oImg){
var id = <?php echo $id; ?>;
var editPage = window.opener.document;
oSrc = oImg.src;
lastSlash = oSrc.lastIndexOf('/');
oName = oSrc.substr(lastSlash+1);
var logo = 'logo'+id, logoHolder = 'logoHolder'+id;
//window.opener.document.getElementById(logo).value = oName;
//window.opener.document.getElementById(logo).setAttribute("value", oName);
//window.opener.document.getElementById(logo).innerHTML = oName;
//window.opener.document.getElementById(logo).setValue = oName;
window.opener.document.getElementById(logoHolder).src = "templates/img/user/" + oName;
this.close()
}

Parent page:

<input type="text" id="logo1" name="logo1" value="VALUE-SHOULD-BE-INSERTED-HERE" />

The first one just display the value in the text-field but when I'm trying to save it with jquery, the value is actually empty. Any idea?

• javascript

• Works for me in my own test case. Can you try to rebuild your situation on jsfiddle so we can find out what’s really wrong with it? – poke Commented Oct 14, 2013 at 20:41
• @poke document.getElementById(logo) ... maybe logo is undefined... logo is not a string in simon's code.. – Psych Half Commented Oct 14, 2013 at 20:43

3 Answers 3

window.opener.document.getElementById(logo).value = fileName;

This should work—except that logo should be a string. Otherwise the opened child window will try to find a variable with the name logo, which it will probably not find.

So, do this:

window.opener.document.getElementById('logo').value = fileName;

No idea what you are doing wrong, maybe the PHP echo won’t output the correct ID? Anyway, it works fine for me. See this example:

parent.html

<input type="text" id="logo1" value="VALUE-SHOULD-BE-INSERTED-HERE" />
<script>window.open('child.html');</script>

child.html

<button id="btn">Click me</button>
<script>
btn.addEventListener('click', function () {
    var logo = 'logo' + '1';
    window.opener.document.getElementById(logo).value = 'something';
    window.close();
});
</script>

The better way to do this is now Window.postMessage(), see https://developer.mozilla/en-US/docs/Web/API/Window/postMessage for details.

I'm not sure what's causing the issue, but maybe you can try to update via a function in the parent called by the child.

So in the parent add the function (I assume you can use jQuery, because you mentioned it in the question)

function UpdateValue(newVal){
     $("#logo").val(newVal); 
}

And call it in the child

window.opener.UpdateValue(fileName);

Although I would like to know why the original isn't working. This might be a good workaround.