Passing values from parent window to child window

**query4u** · April 24th, 2009, 06:54 AM

Hi,

i want to pass value from parent window to child window. the page which is in parent window is .asp page & the page page i want to open in child window is .aspx page. i want to post the values from parent to window to child window. the value which i will get into child window should be accessible into code behind as i want use that value for querying the database. i don't want to pass the value through query string as anyone can tamper the value, also i don't want to use session because user can open multiple windows so previous value may be overwrite.
please give me the solution for this

**PeejAvery** · April 24th, 2009, 07:30 AM

If you save the data as session data or cookies, either window can access that information.

**Xeel** · April 30th, 2009, 01:41 PM

it's a classic operation:

Say we have a select field and we want to populate another select field depending on the selection from the first one.

So the main html would be:

HTML Code:

<script type="text/javascript">
function populateSelect2(val){
    if(document.forms[0].select1.selectedIndex > 0){
        //dummy.html is needed to refresh the iframe contents if you want to repeate the operation.
        //If not done the iframe will load only once, then it will get the same data from the cache.
        document.getElementById("ifbox").src = "dummy.html"; 
        document.getElementById("ifbox").src = "populateSelect2.asp?param1="+val;
    }
}
</script>

<form>
    <select name="select1" onchange="populateSelect2(this.value);">
        <option value="">- select something -</option>
        <option value="0">0</option>
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
    </select>
    
    <select name="select2" disabled="disabled">
        <option value=""></option>
    </select>
</form>

<iframe id="ifbox" style="display:none;" src="dummy.html"></iframe>

In the populateSelect2.asp you can get the parameter and apply it for the query. After getting the result array using javascript in the same file populate the second select with the data (I'll give java example which will not be too different from asp):

Code:

<%
//getting submitted parameter from the request object:
String param1 = request.getParameter("param1");

MyLib lib = new MyLib();

//this is where i run my query supposing that getSelect2Data()
//contains a query and returns pairs of strings which i insert
//into an arraylist
ArrayList<String[]> select2data = lib.getSelect2Data(param1);
%>
<html>
<body>
<script type="text/javascript">
var topForm = top.document.forms[0];
topForm.select2.length = 0; //cleaning up the select field
topForm.select2.options[0] = new Option("- select something -","");

<%for(int i=0; i<select2data.size(); i++){
        String[] data = select2data.get(i);%>
        //filling the select2 with new data pairs (javascript level):
        topForm.select2.options[<%=i+1%>] = new Option("<%=data[1]%>","<%=data[0]%>");
<%}%>
</script>
</body>
</html>

I hope that would explain the process. Just replace java expressions, which I hope are understandable even if you are not familiar with this language, with correspondant asp ones.

One more thing:
If you hate passing the parameters through the GET in js, just use an intermediate html/asp in the iframe. Load it first the same way I loaded the populateSelect2.aspx in the onchange event function, just with no parameters appended, then inside this intermediate page using automatic javascript (put it after the html code so the js could see the form) get the needed parameters from the upper main form putting them to some hidden fields and submit the form to actual populateSelect2.aspx using POST if you want (just don't forget to set the form to use the method). This way the intermediate file would appear only for a millisec and then get submitted to the aspx page.

something like this:

HTML Code:

<html>
<body>
<form action="populateSelect2.aspx" method="post">
	<input type="hidden" name="param1" value="" />
</form>
</body>
</html>
<script type="text/javascript">
document.forms[0].param1.value = top.document.forms[0].select1.value;
document.forms[0].submit();
</script>

This way you do not need dummy.html since this intermediate page would always get loaded before the aspx page refreshing the iframe contents. So the js populateSelect2() function would change accordingly:

HTML Code:

<script type="text/javascript">
function populateSelect2(val){
    if(document.forms[0].select1.selectedIndex > 0){
        document.getElementById("ifbox").src = "intermediate.html"; 
    }
}
</script>

Thread: Passing values from parent window to child window

Thread Tools

Display

Passing values from parent window to child window

Re: Passing values from parent window to child window

Re: Passing values from parent window to child window

Posting Permissions