Salesforce | How to set value of input text field on parent Visualforce Page using Javascript

Description: We had a text field (inputTextF) on our parent page. We wanted to set its value from inside my child page programmatically.

1. You need to pass parent page element Id to the child page.

2. Get parent page element Id on child page using CurrentPage.parameters.fieldId.

3. Set the value of the element in javascript function using this statement:

window.opener.document.getElementById(fieldId).value = newValue;

Code for parent page:

<apex:page controller="YourController" sidebar="false" showheader="false">
<script>
function OpenVfpage(field)
{
var url="/apex/pagename?fieldId=" + field;( parent page element Id passed to child page)
newWin=window.open(url,   'Popup','height=500,width=600,left=100,top=100,resizable=no,scrollbars=yes,toolbar=no,status=no');
if (window.focus)
{
newWin.focus();
}
}
</script>
<apex:form>
<apex:pageBlock >
<apex:inputTextarea  id="inputTextF"  required="true"  cols="40" rows="2"/>>
<apex:pageBlockButtons >
<apex:commandButton value="Open Child Page" onclick="OpenVfpage('{!$Component.inputTextF}');"/>(pass text field id as parameter to javascript function )
</apex:pageBlockButtons>
</apex:pageBlock>
</apex:form>
</apex:page>

Code for child page:

<apex:page controller=”ChildPageController" sidebar="false" showheader="false">
<script>
function setvalue(valueToSet) // Function to set value of parent page input text.
{
var parent = window.opener.document;
var targetField = parent.getElementById('{!$CurrentPage.parameters.fieldId}');(Get element Id on child page)
targetField.value = valueToSet;
self.close();
}
</script>
<apex:form >
<apex:pageBlock >
<apex:pageBlockTable value="{!List}" var="t">
<apex:column headerValue="Name">
<apex:outputLink value="#" onclick="setvalue('{!t.Value}')">{!t.Name}</apex:outputLink >
</apex:column >
</apex:pageBlockTable >
</apex:pageBlock >
</apex:form >
</apex:page >