/    Sign up×
Community /Pin to ProfileBookmark

Passing back Child Window listbox choices to Parent Window listbox

Copy linkTweet thisAlerts:
Jun 22.2005

hello everyone!

i had a form that will pass the value of child window listbox into the parent window listbox, but everytime i hit the submit button, only the hidden value is passed to the parent window, but i want the real value.

for example if i have the following:

[code=php]<option value=”001″>employee1</option>[/code]

only the “001” will appear in the parent window listbox, but i want the “employee1” to appear intead of “001”.

below my parent window code:

[code=php]<HTML>
<HEAD>

<SCRIPT LANGUAGE=”JavaScript”>

<!–
//by vwphillips – http://www.vicsjavascripts.org.uk
function NewOption(val){
//alert(‘The pager number & (val)’)
sel=document.getElementById(‘PICKED’);
sel.options[sel.options.length]=new Option(val,val,true,true);
}
// pop-up window
function PopUp(PopUpUrl){
var ScreenWidth=window.screen.width;
var ScreenHeight=window.screen.height;
var movefromedge=0;
placementx=(ScreenWidth/2)-((310)/500);
placementy=(ScreenHeight/2)-((240+10)/6);
WinPop=window.open(PopUpUrl,””,”width=310,height=240,toolbar=0,location=0,directories=0,status=0,scrollbars=0,menubar=0,resizable=0,left=”+placementx+”,top=”+placementy+”,screenX=”+placementx+”,screenY=”+placementy+”,”);
}
// –>
</SCRIPT>

</HEAD>
<BODY BGCOLOR=”#E0EOFF”>
<FONT FACE=”sans-serif”>
<!–

–>
<FORM NAME=”MYFORM”>
<CENTER>
<TABLE CELLPADDING=”7″ CELLSPACING=”0″ BORDER = “3” WIDTH=”203″ bgcolor=”#FFFFFF”>
<TR>
<TD>
</FONT>
<FONT FACE=”Verdana”>
<TABLE WIDTH=”40%” CELLPADDING=”0″ CELLSPACING=”0″ BORDER=”0″>
<TR>
<TD>
<FONT FACE=”Verdana”>
<TABLE WIDTH=”40%” CELLPADDING=”0″ CELLSPACING=”0″ BORDER=”0″ id=”table1″>
<TR>
<TD WIDTH=”40%” align=”center”>
<FONT FACE=”Verdana”><p align=”left”>
<SELECT NAME=”PICKED” SIZE=”9″ MULTIPLE style=”width: 240; height: 150″>
</SELECT></FONT></TD>
</TR>
</TABLE>
</font>
<p align=”center”><FONT FACE=”sans-serif”><input type=”button” name=”button” value=”child window” onclick=”PopUp(‘child.htm’)”></FONT></TD>
</CENTER>
</FORM>
</BODY>
</HTML>[/code]

below is the child window code:

[code=php]<HTML>
<HEAD>
<TITLE>Filter</TITLE>

<script language=”javascript”>
//by vwphillips – http://www.vicsjavascripts.org.uk
function SendInfo(){
var txtVal = document.usersform.usersselect.value;
var sel = window.opener.NewOption(txtVal);
}
</SCRIPT>

</HEAD>
<BODY>

<FORM NAME=”usersform”>
<div align=”center”>
<table class=rowtable cellpadding=”10″ cellspacing=”1″ border=”0″ summary=”” width=”185″>
<TR class=row1 valign=top> <TH>Employees</TH></TR>
<TR VALIGN=”top”>
<TD class=row1 STYLE=”width:163px”>

<SELECT SIZE=6 NAME=”usersselect” STYLE=”width:155; height:96″>
<option value=”001″>Employee1</option>
<option value=”002″>employee2</option>
<option value=”003″>employee3</option>
<option value=”004″>employee4</option>
<option value=”005″>employee5</option>
</SELECT>
<INPUT TYPE=submit VALUE=”Submit” onclick=”SendInfo()”>

</TD>
</TR>
</TABLE>

</div>

</FORM>
</BODY>
</HTML>[/code]

to post a comment
JavaScript

20 Comments(s) ↴

Copy linkTweet thisAlerts:
@scragarJun 22.2005 — child[code=php]function SendInfo(){
var Val = document.usersform.usersselect.value;
var txt = document.usersform.usersselect.text;
var sel = window.opener.NewOption(txt, Val);
} [/code]parent[code=php]function NewOption(){
sel=document.getElementById('PICKED');
sel.options[sel.options.length]=new Option(arguments[0],arguments[1],true,true);
}[/code]
Copy linkTweet thisAlerts:
@blakephauthorJun 22.2005 — hi scragar!

i tried your code, but it showed me only blank space in the parent window listbox.
Copy linkTweet thisAlerts:
@scragarJun 22.2005 — [code=php]function SendInfo(){
var Val = document.usersform.usersselect.options[document.usersform.usersselect.selectedIndex].value;
var txt = document.usersform.usersselect.options[document.usersform.usersselect.selectedIndex].text;
var sel = window.opener.NewOption(txt, Val);
} [/code]
try that.
Copy linkTweet thisAlerts:
@blakephauthorJun 23.2005 — it works! thank you so much!?
Copy linkTweet thisAlerts:
@blakephauthorJun 23.2005 — hi scragar! i have another question regarding the above post, i put all the values of child window listbox into a access database, and then i added one column in the database which contains the emails of employees, and my database look like this:

id fullname email

= ======= ======

1 employee1 [email][email protected][/email]

2 employee2 [email][email protected][/email]

3 employee3 [email][email protected][/email]

and then i added also a textbox in the parent window. is that possible if i passed the choices from child to parent listbox, for example i passed the "employee1" and then his/her email address will appear also in the parent window textbox?
Copy linkTweet thisAlerts:
@scragarJun 23.2005 — the best way of doing this would be to use a javascript array to hold all the details and use the same order as the dropdown then you can make your info a nice array like so:
[code=php]var employees = [
[1, "alex", "[email protected]"],
[2, "bob", "[email protected]"],
[3, "carl", "[email protected]"],
[4, "dave", "[email protected]"]
];[/code]
then to write in the info you could do something like:
[code=php]window.opener.inputData(employees[document.usersform.usersselect.selectedIndex]);[/code]
[code=php]function inputData(){
alert("ID = "+arguments[0][0]+"nName = "+arguments[0][1]+"nEmail = "+arguments[0][2]);
};[/code]
Copy linkTweet thisAlerts:
@blakephauthorJun 23.2005 — hello scragar!

it works, but i got the following value in the textbox, when i passed the "employee5" into the parent window:

"1,employee1,[email protected],2,employee2,[email protected],3,employee3,[email protected],"

but i want only the email address of "employee5" to appear in the textbox.

my parent window looks like this now:
[code=php]<HTML>
<HEAD>

<SCRIPT LANGUAGE="JavaScript">

<!--
function NewOption(){
sel=document.getElementById('PICKED');
sel.options[sel.options.length]=new Option(arguments[0],arguments[1],true,true);
alert("ID = "+arguments[0][0]+"nName = "+arguments[0][1]+"nEmail = "+arguments[0][2]);
}
// pop-up window
function PopUp(PopUpUrl){
var ScreenWidth=window.screen.width;
var ScreenHeight=window.screen.height;
var movefromedge=0;
placementx=(ScreenWidth/2)-((310)/500);
placementy=(ScreenHeight/2)-((240+10)/6);
WinPop=window.open(PopUpUrl,"","width=310,height=240,toolbar=0,location=0,directories=0,status=0,scrollbars=0,menubar=0,resizable=0,left="+placementx+",top="+placementy+",screenX="+placementx+",screenY="+placementy+",");
}
// -->
</SCRIPT>

</HEAD>
<BODY BGCOLOR="#E0EOFF" style="text-align: center">
<table border="1" width="24%" id="table1">
<tr>
<td>
<form name="form">
<p align="center">E-mail Address:<input type="text" name="emailbox" size="22"></p>
</form>
</td>
</tr>
<tr>
<td>
<FONT FACE="sans-serif">
<div align="center">
<TABLE CELLPADDING="7" CELLSPACING="0" BORDER = "3" WIDTH="203" bgcolor="#FFFFFF" id="table3">
<TR>
<TD align="center">
</FONT>
<FONT FACE="Verdana">
<TABLE WIDTH="40%" CELLPADDING="0" CELLSPACING="0" BORDER="0" id="table4">
<TR>
<TD>
<FONT FACE="Verdana">
<TABLE WIDTH="40%" CELLPADDING="0" CELLSPACING="0" BORDER="0" id="table5">
<TR>
<TD WIDTH="40%" align="center">
<FONT FACE="Verdana"><p align="left">
<SELECT NAME="PICKED" SIZE="9" MULTIPLE style="width: 240; height: 150">
</SELECT></FONT></TD>
</TR>
</TABLE>
</font>
<p align="center"><FONT FACE="sans-serif"><input type="button" name="button" value="child window" onclick="PopUp('child.htm')"></FONT></TD>
</CENTER>
</FORM>
</div>
</td>
</tr>
</table>
</BODY>
</HTML>[/code]

and then the child window:
[code=php]<HTML>
<HEAD>
<TITLE>Filter</TITLE>

<script language="javascript">
//by scragar
function SendInfo(){
var employees = [
[001, "employee1", "[email protected]"],
[002, "employee2", "[email protected]"],
[003, "employee3", "[email protected]"],
[004, "employee4", "[email protected]"]
[005, "employee5", "[email protected]"]
];

var Val = document.usersform.usersselect.options[document.usersform.usersselect.selectedIndex].value;
var txt = document.usersform.usersselect.options[document.usersform.usersselect.selectedIndex].text;
var sel = window.opener.NewOption(txt, Val);
//window.opener.inputData(employees[document.usersform.usersselect.selectedIndex]);
window.opener.document.form.emailbox.value = employees;

}


</SCRIPT>

</HEAD>
<BODY>

<FORM NAME="usersform">
<div align="center">
<table class=rowtable cellpadding="10" cellspacing="1" border="0" summary="" width="185">
<TR class=row1 valign=top> <TH>Employees</TH></TR>
<TR VALIGN="top">
<TD class=row1 STYLE="width:163px">

<SELECT SIZE=6 NAME="usersselect" STYLE="width:155; height:96">
<option value="001">employee1</option>
<option value="002">employee2</option>
<option value="003">employee3</option>
<option value="004">employee4</option>
<option value="005">employee5</option>
</SELECT>

<INPUT TYPE=submit VALUE="Submit" onclick="SendInfo()">

</TD>
</TR>
</TABLE>

</div>

</FORM>
</BODY>
</HTML>[/code]
Copy linkTweet thisAlerts:
@scragarJun 23.2005 — [code=php]window.opener.document.form.emailbox.value = employees[document.usersform.usersselect.selectedIndex][2];[/code]
Copy linkTweet thisAlerts:
@blakephauthorJun 23.2005 — i tried it, it works fine when i select "employee1" the email address of "employee1" will appear in the textbox, but when i tried "employee2" thru "employee5", i got only blank value in the textbox.
Copy linkTweet thisAlerts:
@scragarJun 23.2005 — your missing a coma at the end of the line with employe 4 on(leave it of for five though, since that's the last one)
Copy linkTweet thisAlerts:
@blakephauthorJun 23.2005 — i placed the comma at the end of employee4, but when i tried "employee2" to pass to parent window listbox, the value in the textbox i got was the email address of "employee1" it happens the same with "employee3" thru "employee5".
Copy linkTweet thisAlerts:
@scragarJun 23.2005 — that's cos those are the same in your code:

var employees = [
[001, "employee1", "[email protected]"],
[002, "employee2", "employee[color=red]1[/color]@mySite.com"],
[003, "employee3", "employee[color=red]1[/color]@mySite.com"],
[004, "employee4", "employee[color=red]1[/color]@mySite.com"],
[005, "employee5", "employee[color=red]1[/color]@mySite.com"]
];
Copy linkTweet thisAlerts:
@blakephauthorJun 23.2005 — i was lazy... thank you so much!?
Copy linkTweet thisAlerts:
@scragarJun 23.2005 — I've done worse before now.

once I searched a huge page looking for an error only to realise that I'd named it wrongly, and that was why I ended up with loads of errors(first it couldn't be found, which I'd acidentaly hidden), then the variables where not defined...
Copy linkTweet thisAlerts:
@blakephauthorJun 24.2005 — hello scragar! it's me again, i converted my data into database, but i noticed the following when i viewed my html source:

[1, "employee1", "[email protected]"],

[2, "employee2", "[email protected]"],

[3, "employee3", "[email protected]"],

[4, "employee4", "[email protected]"],

[5, "employee5", "[email protected]"],

the comma was continued until the last record.

below the new code for the child window:
[code=php]<% @Language=VBScript %>
<% Option Explicit %>
<% Response.Buffer = True %>

<HTML>
<HEAD>

<script language="javascript">
function SendInfo(){
var employees = [

<%
Dim objConn, objRst
Set objConn = Server.CreateObject("ADODB.Connection")
objConn.Open "DSN=Proj"
Set objRst = Server.CreateObject("ADODB.Recordset")
objRst.Open "employees", objConn, 2, 2, 2
'
If Not objRst.EOF Then
%>
<%
Do While Not objRst.EOF
%>
[<%=objRst.Fields("id")%>, "<%=objRst.Fields("fullname")%>", "<%=objRst.Fields("email")%>"],

<%
objRst.MoveNext
Loop
%>
];
<%
Else
Response.Write "<p>No data found.</p>"
End If
'
objRst.Close
%>

var Val = document.usersform.usersselect.options[document.usersform.usersselect.selectedIndex].value;
var txt = document.usersform.usersselect.options[document.usersform.usersselect.selectedIndex].text;
var sel = window.opener.NewOption(txt, Val);
window.opener.document.form.emailbox.value = employees[document.usersform.usersselect.selectedIndex][2];

}

</SCRIPT>

</HEAD>
<BODY>

<FORM NAME="usersform">
<div align="center">
<table class=rowtable cellpadding="10" cellspacing="1" border="0" summary="" width="185">
<TR class=row1 valign=top> <TH>Employees</TH></TR>
<TR VALIGN="top">
<TD class=row1 STYLE="width:163px">

<%
objRst.Open "employees", objConn, 2, 2, 2
If Not objRst.EOF Then
%>
<SELECT SIZE=6 NAME="usersselect" STYLE="width:155; height:96">

<%
Do While Not objRst.EOF
%>
<option value="<%=objRst.Fields("id")%>"><%=objRst.Fields("fullname")%></option>
<%
objRst.MoveNext
Loop
%>
</SELECT></p>
<%
Else
Response.Write "<p>No data found.</p>"
End If

objRst.Close
Set objRst = Nothing
objConn.Close
Set objConn = Nothing
%>

</SELECT>
<INPUT TYPE=submit VALUE="Submit" onclick="SendInfo()">

</TD>
</TR>
</TABLE>

</div>

</FORM>
</BODY>
</HTML>[/code]
Copy linkTweet thisAlerts:
@blakephauthorJun 24.2005 — scragar, i noticed that it worked fine even if there's a comma for every end of the variable... but, im wondering when i applied this code to my real project, it doesnt work, the email textbox has no results, it's always blank, but it works when i ran the sample post above, but when i tried it with my real project, it doesnt work, i think there's a problem with the positioning of other javascripts in my project, but cant figure it out, do you have any idea? im doing this since lastnight but no luck, i copied the code as it is to my real project, but doesnt work.
Copy linkTweet thisAlerts:
@blakephauthorJun 24.2005 — hello scragar! it's me again!

i found-out that there's no problem with my parent-window in my project, i tested the above child window code to my project, and it works fine, i think the problem is in the child window of my project, if i removed the following lines in my child window project:
[code=php]<SCRIPT TYPE="text/javascript" SRC="filterlist.js"></SCRIPT>[/code]

the child window will work properly without the above lines, but i cant take-out that line because it is the main part of my project, and it is the filtering function, below is the code of my project for the child window.

[code=php]<% @Language=VBScript %>
<% Option Explicit %>
<% Response.Buffer = True %>

<HTML>
<HEAD>
<LINK REL=StyleSheet HREF="filter.css" TYPE="text/css" MEDIA=screen>
<STYLE TYPE="text/css" MEDIA="screen"></STYLE>
<TITLE>Address List</TITLE>

<!-- Load the javascript code -->
<SCRIPT TYPE="text/javascript" SRC="filterlist.js"></SCRIPT>

<script language="javascript">
//by cragar
function SendInfo(){
var employees = [

<%
Dim objConn, objRst
Set objConn = Server.CreateObject("ADODB.Connection")
objConn.Open "DSN=MyDSN"
Set objRst = Server.CreateObject("ADODB.Recordset")
objRst.Open "allusers_tbl", objConn, 2, 2, 2
'
If Not objRst.EOF Then
%>
<%
Do While Not objRst.EOF
%>
[<%=objRst.Fields("id")%>, "<%=objRst.Fields("full_name")%>", "<%=objRst.Fields("email")%>"],

<%
objRst.MoveNext
Loop
%>
];
<%
Else
Response.Write "<p>No data found.</p>"
End If
'
objRst.Close
%>

var Val = document.usersform.usersselect.options[document.usersform.usersselect.selectedIndex].value;
var txt = document.usersform.usersselect.options[document.usersform.usersselect.selectedIndex].text;
var sel = window.opener.NewOption(txt, Val);
window.opener.document.MYFORM.emailbox.value = employees[document.usersform.usersselect.selectedIndex][2];

}
</SCRIPT>

</HEAD>
<BODY>
<FORM NAME="usersform">
<div align="center">
<table class=rowtable cellpadding="10" cellspacing="1" border="0" width="374">
<TR class=row1 valign=top>
<TH>Users</TH>
<TH>Filter</TH>
</TR>
<TR VALIGN="top">
<TD class=row1 STYLE="width:155px">

<%
objRst.Open "allusers_tbl", objConn, 2, 2, 2
If Not objRst.EOF Then
%>
<DIV ID="filtertext">&nbsp;</DIV>
<SELECT SIZE=6 NAME="usersselect" STYLE="width:155; height:96">
<%
Do While Not objRst.EOF
%>
<option value="<%=objRst.Fields("id")%>"><%=objRst.Fields("full_name")%></option>
<%
objRst.MoveNext
Loop
%>
</SELECT></p>
<%
Else
Response.Write "<p>No data found.</p>"
End If

objRst.Close
Set objRst = Nothing
objConn.Close
Set objConn = Nothing
%>
<BR>
<INPUT TYPE=submit VALUE="Enter" onclick="SendInfo()">
<TD class=row2>

<SCRIPT TYPE="text/javascript">
<!--
var filter = new filterlist(document.usersform.usersselect);

filter.hook = function() {

if (document.getElementById) {
var id = document.getElementById("filtertext");
if (typeof id.innerHTML != 'undefined') {
if (this.selectobj.length == this.optionscopy.length) {
id.innerHTML = "&nbsp;";
} else {
id.innerHTML = "Showing " +
this.selectobj.length + " of " +
this.optionscopy.length + " records";
}
}
}
}

function dofilter(regexp) {
document.usersform.regexp.value = regexp;
filter.set(regexp);
}
//-->
</SCRIPT>

<P STYLE="width:200px">
Show users:
<A HREF="javascript:dofilter('')" TITLE="Show all items">All</A><BR>
<A HREF="javascript:dofilter('^A')" TITLE="Show items starting with A">A</A>
<A HREF="javascript:dofilter('^B')" TITLE="Show items starting with B">B</A>
<A HREF="javascript:dofilter('^C')" TITLE="Show items starting with C">C</A>
<A HREF="javascript:dofilter('^D')" TITLE="Show items starting with D">D</A>
<A HREF="javascript:dofilter('^E')" TITLE="Show items starting with E">E</A>
<A HREF="javascript:dofilter('^F')" TITLE="Show items starting with F">F</A>
<A HREF="javascript:dofilter('^G')" TITLE="Show items starting with G">G</A>
<A HREF="javascript:dofilter('^H')" TITLE="Show items starting with H">H</A>
<A HREF="javascript:dofilter('^I')" TITLE="Show items starting with I">I</A>
<A HREF="javascript:dofilter('^J')" TITLE="Show items starting with J">J</A>
<A HREF="javascript:dofilter('^K')" TITLE="Show items starting with K">K</A>
<A HREF="javascript:dofilter('^L')" TITLE="Show items starting with L">L</A>
<A HREF="javascript:dofilter('^M')" TITLE="Show items starting with M">M</A>
<A HREF="javascript:dofilter('^N')" TITLE="Show items starting with N">N</A>
<A HREF="javascript:dofilter('^O')" TITLE="Show items starting with O">O</A>
<A HREF="javascript:dofilter('^P')" TITLE="Show items starting with P">P</A>
<A HREF="javascript:dofilter('^Q')" TITLE="Show items starting with Q">Q</A>
<A HREF="javascript:dofilter('^R')" TITLE="Show items starting with R">R</A>
<A HREF="javascript:dofilter('^S')" TITLE="Show items starting with S">S</A>
<A HREF="javascript:dofilter('^T')" TITLE="Show items starting with T">T</A>
<A HREF="javascript:dofilter('^U')" TITLE="Show items starting with U">U</A>
<A HREF="javascript:dofilter('^V')" TITLE="Show items starting with V">V</A>
<A HREF="javascript:dofilter('^W')" TITLE="Show items starting with W">W</A>
<A HREF="javascript:dofilter('^X')" TITLE="Show items starting with X">X</A>
<A HREF="javascript:dofilter('^Y')" TITLE="Show items starting with Y">Y</A>
<A HREF="javascript:dofilter('^Z')" TITLE="Show items starting with Z">Z</A>

<P>Filter by regular expression:<BR>
<INPUT NAME=regexp onKeyUp="filter.set(this.form.regexp.value)">
<INPUT TYPE=button onClick="filter.set(this.form.regexp.value)" value="Filter">
<INPUT TYPE=button onClick="filter.reset();this.form.regexp.value=''" value="Clear">
<INPUT TYPE=checkbox NAME="toLowerCase"onClick="filter.set_ignore_case(!this.checked);filter.set(this.form.regexp.value);">
Case-sensitive filtering

</TD>
</TR>
</TABLE>

</div>

</FORM>
</BODY>
</HTML>[/code]
Copy linkTweet thisAlerts:
@scragarJun 29.2005 — sorry I've not been online much.

are you sure your not re-using any variables or function names, that could cause problems.


otherwise might I surgest commenting out sections of your .js file untill you find where abouts the problem occurs, this should give a better idea as to what your problem is.
Copy linkTweet thisAlerts:
@rishi_bajajJul 27.2005 — well the best and easy way to handle this problem is -:

add a hidden text box control in parent form and in child form write this code

window.opener.document.frmAddGeneralNote.txtchildorg.value=document.frmTranPopup.Txtorg.value

window.opener.document.frmAddGeneralNote.submit

'write the value from child form into hidden control in parent form before submitting the parent form and then in parent form add hidden control and display the value of hidden contol in drop down box

Thanks

Rishi

:o
×

Success!

Help @blakeph spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.18,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...