Hi all...
I have a text box in a popup window and i need to pass the value from the textbox to the parent page.My problem is iam able to pass the value at the 1st time,but the next time when i try to do this im not getting the value.The thing is if i referesh the parent page every time iam able to pass the value.Please help.Iam using ajax control.
Hi Emiliya,
AJAX is not necessary for this issue.
I'll provide you with a short example on how you would be able to catch value from the opened window using postMessage.
Code for the start/home page:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<title>How to pass the value from a texbox in popup window to the home page in ajax</title>
<script type="text/javascript">
<!--
var pop = window.open("postm.html");
var receivePost = function( e ) {
alert( e )
var div = (( "getElementById" in document ) ? document.getElementById("main") : document.all[ "main" ] );
div.innerHTML = "";
div.innerHTML += "<h4>Message from the opened window: </h4>\n<p style=\"color : #190; letter-spacing : 3px\">";
div.innerHTML += "<strong style=\"color: #E00;\">" + e.data + "</strong></p><hr>";
};
if ( "addEventListener" in window ) {
window.addEventListener( "message", receivePost, false );
}
else if ( "attachEvent" in window ) {
window.attachEvent( "onmessage", receivePost );
}
//-->
</script>
</head>
<body>
<noscript>
<p> This site requires a browser that support <b>JavaScript</b>.</p>
</noscript>
<div id="main">
</div>
</body>
</html>code for the popup window.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<title>How to pass the value from a texbox in popup window to the home page in ajax</title>
<script type="text/javascript">
<!--
var my;
var sendPost = function( e ) {
myForm = document.getElementById("form") || document.all[ "form" ];
try {
my = (( "postMessage" in window ) ? opener : (( "postMessage" in document ) ? opener.document : "undefined" ));
alert(true)
} catch( error ) {
alert("Please upgrade your browser");
return false;
}
if ( typeof my !== "undefined" ) {
myForm.onsubmit = function() {
my.postMessage( myForm.txt.value, "*" );
my.parent.focus();
return false;
}
}
};
window.onload = sendPost;
//-->
</script>
</head>
<body>
<noscript>
<p> This site requires a browser that support <b>JavaScript</b>.</p>
</noscript>
<div id="main">
<form action="#" id="form">
<div><label for="txt">SEND MESSAGE BACK TO HOMEPAGE: <input type="text" id="txt" name="txt" value=""
size="50"></label><br><br><input type="submit" value="Post Message">
</div>
</form>
</div>
</body>
</html>just make sure that your popup blocker is turned off...
essential
Thanks essential....
But i want the pop up to open when i click on a button on my home page and when i click on the submit button of the pop up window,it should close and the value should come automatically to the home page.......
Hi Emiliya,
Sorry if i came up so late I am busy with the current project i have.
I've came up with another solution and only require a single page...
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-US">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Conent-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<title>Javascript Live Demo</title>
<style type="text/css">
/* <![CDATA[ */
div.hide {
display: none; }
div.show {
display: block; }
div#textbox {
font: normal normal normal 10pt Arial, sans-serif;
background-color: #555;
padding: .500em;
height: 400px;
border: 2px solid #000;
margin-bottom: 2em;
width : 350px;
position: absolute;}
div#textbox div {
margin : 1em auto;
padding: 1em;
background-color: #fff;
border: 2px solid #000; }
div#showtext {
margin-top: 1.500em;
font: normal normal bold 12pt "Trebuchet MS", Arial, sans-serif;
color: #00E; }
/* ]]> */
</style>
<script type="text/javascript">
// <![CDATA[
var msg;
var setObj = ( function( ids ) {
return ids = document.getElementById( ids ) || document.all[ ids ];
} );
var showTextBox = ( function() {
var txt = setObj("textbox");
var message = setObj("showtext");
var pm = setObj("txt0");
pm.value = "";
if ( "className" in txt ) {
if ( txt.className !== "show" ) {
txt.className = "show";
try {
if ( msg ) {
message.removeChild( msg );
} // Providing absolute positioning in the
center of the screen.
var x = innerWidth;
var y = innerHeight;
var dX = txt.clientWidth;
var dY = txt.clientHeight;
txt.style.left = (( x - dX ) / 2 ) + "px";
txt.style.top = (( y - dY ) / 2 ) + "px";
} catch( e ) { // For IE6
var x = document.body.clientWidth;
var y = document.body.clientHeight;
var dX = txt.clientWidth;
var dY = txt.clientHeight;
txt.style.left = (( x - dX ) / 2 ) + "px";
txt.style.top = (( y - dY ) / 2 ) + "px";
}
} return false;
}
} ); var postIt = ( function() {
var txt = setObj("textbox");
var message = setObj("showtext");
var pm = setObj("txt0");
if ( "className" in txt ) {
try {
if ( pm.value ) {
msg = document.createTextNode( pm.value );
var impMsg = (
document.createDocumentFragment() ).appendChild( msg );
message.appendChild( impMsg );
txt.className = "hide";
return;
} alert( "Required field is empty..." );
pm.focus();
} catch( e1 ) { /* do nothing */ }
}
} );
// ]]>
</script>
</head>
<body>
<div id="wrapper">
<form id="form" action="#" onsubmit="return false;">
<div>
<div id="textbox" class="hide">
<input type="button" id="btn0" name="btn0"
value="Send Post" onclick="postIt();" /> <input type="text" id="txt0" name="txt0"
value="" size="30" maxlength="30" />
<div>
<em style="color:#e00;">Popup demo that uses
div instead of a popup window...</em><br /><br />
Text-Filler Text-Filler Text-Filler
Text-Filler Text-Filler Text-Filler Text-Filler Text-Filler Text-Filler Text-Filler
Text-Filler Text-Filler Text-Filler Text-Filler Text-Filler Text-Filler Text-Filler
Text-Filler Text-Filler Text-Filler Text-Filler Text-Filler Text-Filler Text-Filler
Text-Filler Text-Filler Text-Filler Text-Filler Text-Filler Text-Filler Text-Filler
Text-Filler Text-Filler Text-Filler Text-Filler Text-Filler Text-Filler Text-Filler
Text-Filler Text-Filler Text-Filler Text-Filler Text-Filler Text-Filler Text-Filler
Text-Filler Text-Filler Text-Filler Text-Filler Text-Filler Text-Filler Text-Filler
Text-Filler Text-Filler Text-Filler
</div>
</div>
<input type="button" id="btn1" name="btn1" value="Open
Textbox" onclick="showTextBox();" />
</div>
<div id="showtext"></div>
</form>
</div> <!-- #WRAPPER -->
</body>
</html>hope it gets what you need...
essential
Thanks essential..this code is working fine...
BUT STILL ONE PROBLEM IS THERE..EVERY TIME I CLICK ON THE BUTTON OPEN THE TEXT BOX AND ENTER NEW VALUE,MY PREVIOUS VALUE THAT I ENTERED IS LOST FROM THE HOME PAGE..
pass the value from the textbox to the parent page
Here is a non-IE solution. Cross-browser version to follow.
This is demo.html (a toy page with a div to be changed)
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<meta name="generator" content=
"HTML Tidy for Windows (vers 25 March 2009), see www.w3.org">
<script type="text/javascript">
function popit(oTgt) {
window.open('./popup.html', 'return', 'width=400,height=200');
}
</script>
<style type="text/css">
div {height:100px; width:100px; background-color:blue}
</style>
<title>
Demo
</title>
</head>
<body>
<div style="color:white" onclick="popit();return false" id=
'show'>
test
</div>
</body>
</html>and this is popup.html (a toy page with a textbox in which to enter a value to be passed to the blue div)
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 3.2//EN">
<html>
<head>
<meta name="generator" content=
"HTML Tidy for Windows (vers 25 March 2009), see www.w3.org">
<script type="text/javascript">
function update(sType) {
if (window.opener && !window.opener.closed) {
var oTgt = window.opener.document.getElementById('show');
if (sType == 'add') oTgt.appendChild(document.createTextNode(document.getElementById('fxm').value))
if (sType == 'replace') oTgt.innerHTML = document.getElementById('fxm').value
}
}
</script>
<title>Return popup</title>
</head>
<body>
<input id='fxm' />
<button onclick="update('add')">Add</button>
<button onclick="update('replace')">Replace</button>
</body>
</html>To see it work Chrome/Firefox/Safari(PC)/Opera:
save both pages in the same directory
open demo.html
click on the blue area
enter something in the text box in popup.html
click either of the buttons
see what happens in the blue area on demo.htmlCross-browser version
Replace line 10 of popup.html with if (sType == 'add') oTgt.innerHTML += document.getElementById('fxm').value
here's the 2nd variation of my last posted code:
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-US">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Conent-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<title>Javascript Live Demo</title>
<style type="text/css">
/* <![CDATA[ */
div.hide {
display: none; }
div.show {
display: block; }
div#textbox {
font: normal normal normal 10pt Arial, sans-serif;
background-color: #555;
padding: .500em;
height: 400px;
border: 2px solid #000;
margin-bottom: 2em;
width : 350px;
position: absolute;}
div#textbox div {
margin : 1em auto;
padding: 1em;
background-color: #fff;
border: 2px solid #000; }
div#showtext {
margin-top: 1.500em;
font: normal normal normal 10pt Arial, sans-serif;
color: #555; }
div#showtext span { color: #e00; font-weight: bold; }
/* ]]> */
</style>
<script type="text/javascript">
// <![CDATA[
var counter = 0;
var setObj = ( function( ids ) {
return ids = document.getElementById( ids ) || document.all[ ids ];
} );
var showTextBox = ( function() {
var txt = setObj("textbox");
var message = setObj("showtext");
var pm = setObj("txt0");
pm.value = "";
if ( "className" in txt ) {
if ( txt.className !== "show" ) {
txt.className = "show";
try { // Providing absolute positioning in the center of the screen.
var x = innerWidth;
var y = innerHeight;
var dX = txt.clientWidth;
var dY = txt.clientHeight;
txt.style.left = (( x - dX ) / 2 ) + "px";
txt.style.top = (( y - dY ) / 2 ) + "px";
} catch( e ) { // For IE6
var x = document.body.clientWidth;
var y = document.body.clientHeight;
var dX = txt.clientWidth;
var dY = txt.clientHeight;
txt.style.left = (( x - dX ) / 2 ) + "px";
txt.style.top = (( y - dY ) / 2 ) + "px";
}
} return false;
}
} ); var postIt = ( function() {
var txt = setObj("textbox");
var message = setObj("showtext");
var pm = setObj("txt0");
if ( "className" in txt ) {
try {
if ( pm.value ) {
counter += 1;
var span = document.createElement( "span" );
// span.style.color = "#00e";
var pmValue = document.createTextNode( pm.value );
var msg = document.createTextNode( "Posted Message " + counter + ". ( " );
var br = document.createElement( "br" );
var impMsg = document.createDocumentFragment();
span.appendChild( pmValue );
impMsg.appendChild( msg );
impMsg.appendChild( span );
impMsg.appendChild( document.createTextNode( " )" ));
impMsg.appendChild( br );
message.appendChild( impMsg );
txt.className = "hide";
return;
} alert( "Required field is empty..." );
pm.focus();
} catch( e1 ) { /* do nothing */ }
}
} );
// ]]>
</script>
</head>
<body>
<div id="wrapper">
<form id="form" action="#" onsubmit="return false;">
<div>
<div id="textbox" class="hide">
<input type="button" id="btn0" name="btn0" value="Send Post" onclick="postIt();" /> <input type="text" id="txt0" name="txt0" value="" size="30" maxlength="30" />
<div>
<em style="color:#e00;">Popup demo that uses div instead of a popup window...</em><br /><br />
Text-Filler Text-Filler Text-Filler Text-Filler Text-Filler Text-Filler Text-Filler Text-Filler Text-Filler Text-Filler Text-Filler Text-Filler Text-Filler Text-Filler Text-Filler Text-Filler Text-Filler Text-Filler Text-Filler Text-Filler Text-Filler Text-Filler Text-Filler Text-Filler Text-Filler Text-Filler Text-Filler Text-Filler Text-Filler Text-Filler Text-Filler Text-Filler Text-Filler Text-Filler Text-Filler Text-Filler Text-Filler Text-Filler Text-Filler Text-Filler Text-Filler Text-Filler Text-Filler Text-Filler Text-Filler Text-Filler Text-Filler Text-Filler Text-Filler Text-Filler Text-Filler Text-Filler Text-Filler Text-Filler Text-Filler
</div>
</div>
<input type="button" id="btn1" name="btn1" value="Open Textbox" onclick="showTextBox();" />
</div>
<div id="showtext"></div>
</form>
</div> <!-- #WRAPPER -->
</body>
</html>Thank you so much...nw the code is working fine................
We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.