Link to home
Start Free TrialLog in
Avatar of s_hausen
s_hausen

asked on

Passing value from one page textbox to another page textbox

Hi,
I've two pages(forms), page2 pops up when we click on page1 form button A or B. On page 2, user can only fills out the TextBox 1 or TextBox 2.

After submitting the Page2 Form, I want to pass the value of Page2 Textbox 1 or 2 to populate on Page1 Textbox A or B(if user click on Button A, value should go to Page1, TextBox A).

Code of page is here 1

<script type="text/javascript">

function open_window() {
window.open('page2.htm','','width=600,height=200,toolbar=yes,location=yes,directories=yes,status=yes  ,menubar=yes,scrollbars=yes,copyhistory=yes,resizable=yes');
}



</script>

<form>
<table width="1023" align="center">
  <tr>
    <td colspan="2" bgcolor="#E9E9E9">TextBox A</td>
    <td bgcolor="#E9E9E9">TextBox B</td>
  </tr>
  <tr>
    <td colspan="2" bgcolor="#E9E9E9">A.
      <input type="text" name="Page1_TxtA" id="Page1_TxtA" value="" size="20" maxlength="40" ></td>
        <td bgcolor="#E9E9E9">
      <input type="button" name="Page1_BtnA" value="Button A" onClick="open_window()"/>
    </td>
  </tr>
  <tr>
    <td colspan="2" bgcolor="#E9E9E9">B.
      <cfinput type="text" name="Page1_TxtB" id="Page1_TxtB" value="" size="20" maxlength="40" ></td>
        <td bgcolor="#E9E9E9">
      <input type="button" name="Page1_BtnB" value="Button B" onClick="open_window()"/>
    </td>
  </tr>
</table>

</form>

Page 2 code is here:
<script type="text/javascript">

function close_window() {
window.close();
}



</script>


<form name="form1">


<table width="576" border="1">
  <tr>
    <td width="273">TEXTBOX 1</td>
    <td width="485">TEXTBOX 2</td>
  </tr>
  <tr>
    <td><input type="text" name="Page2_Txt1"  id="Page2_Txt1" /></td>
    <td><input type="text" name="Page2_Txt2" id="Page2_Txt2" /></td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td><input TYPE="BUTTON" name="npage" VALUE="Display" onClick="close_window();"></td>
  </tr>
</table>


</form>

any help, comment or suggestion regarding this problem, would be deeply appreciated.
Avatar of chaitu chaitu
chaitu chaitu
Flag of India image

In page2.html write this;

function close_window() {
opener.document.getElementById("Page1_TxtA").value=document.getElementById("Page2_Txt1").value
opener.document.getElementById("Page1_TxtB").value=document.getElementById("Page2_Txt2").value

window.close();
}
Avatar of leakim971
Use for example : opener.document.getElementById("Page1_TxtA").value = document.getElementById("Page2_Txt1").value

test page :


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript">
	function open_window(target, source) {
		window.open('page22.html?target='+encodeURI(target)+"&source="+encodeURI(source),'','width=600,height=200,toolbar=yes,location=yes,directories=yes,status=yes  ,menubar=yes,scrollbars=yes,copyhistory=yes,resizable=yes');
	}
</script>
</head>
<body>
<form>
<table width="1023" align="center">
  <tr>
    <td colspan="2" bgcolor="#E9E9E9">TextBox A</td>
    <td bgcolor="#E9E9E9">TextBox B</td>
  </tr>
  <tr>
    <td colspan="2" bgcolor="#E9E9E9">A.
      <input type="text" name="Page1_TxtA" id="Page1_TxtA" value="" size="20" maxlength="40" ></td>
        <td bgcolor="#E9E9E9">
      <input type="button" name="Page1_BtnA" value="Button A" onClick="open_window('Page1_TxtA','Page2_Txt1')"/>
    </td>
  </tr>
  <tr>
    <td colspan="2" bgcolor="#E9E9E9">B.
      <cfinput type="text" name="Page1_TxtB" id="Page1_TxtB" value="" size="20" maxlength="40" ></td>
        <td bgcolor="#E9E9E9">
      <input type="button" name="Page1_BtnB" value="Button B" onClick="open_window('Page1_TxtB','Page2_Txt2')"/>
    </td>
  </tr>
</table>
</form>
</body>
</html>

Open in new window

page22.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript">
	var gup = function( name ) {
		var results = (new RegExp("[\\?&]"+name+"=([^&#]*)")).exec(window.location.href);
		if ( results == null ) {return ""}
		else {return results[1]}
	};

	function close_window() {
		opener.document.getElementById( gup("target") ).value = document.getElementById( gup("source") ).value;	
		window.close();
	}
</script>
</head>
<body>
<form name="form1">
<table width="576" border="1">
  <tr>
    <td width="273">TEXTBOX 1</td>
    <td width="485">TEXTBOX 2</td>
  </tr>
  <tr>
    <td><input type="text" name="Page2_Txt1"  id="Page2_Txt1" /></td>
    <td><input type="text" name="Page2_Txt2" id="Page2_Txt2" /></td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td><input TYPE="BUTTON" name="npage" VALUE="Display" onClick="close_window();"></td>
  </tr>
</table>
</form>
</body>
</html>

Open in new window

Avatar of s_hausen
s_hausen

ASKER

Hi,
After adding the function as under:
function close_window() {
opener.document.getElementById("Page1_TxtA").value=document.getElementById("Page2_Txt1").value
opener.document.getElementById("Page1_TxtB").value=document.getElementById("Page2_Txt2").value

window.close();
}

works fine, but when i pass the value in TextBox B after filling TextBox A, it clears TextBox A. Any comments regarding this issue???
@chaituu sorry, I did'nt refresh before post my pages

@s_hausen have a look to the code I provided to you.?

I do some modification in your original code :
window.open('page22.html?target='+encodeURI(target)+"&source="+encodeURI(source),'','width=600,height=200,toolbar=yes,location=yes,directories=yes,status=yes  ,menubar=yes,scrollbars=yes,copyhistory=yes,resizable=yes');

function open_window(target, source) {
		window.open('page22.html?target='+encodeURI(target)+"&source="+encodeURI(source),'','width=600,height=200,toolbar=yes,location=yes,directories=yes,status=yes  ,menubar=yes,scrollbars=yes,copyhistory=yes,resizable=yes');
	}

Open in new window

and we use these parameter to update the right textbox with the right child textbox : opener.document.getElementById( gup("target") ).value = document.getElementById( gup("source") ).value;      

function close_window() {
		opener.document.getElementById( gup("target") ).value = document.getElementById( gup("source") ).value;	
		window.close();
	}

Open in new window

Guys,
I am very new in web programming, so please be patient with me. After updating the code of page2, submit button doesn't work, which is as under:
function close_window() {
            opener.document.getElementById( gup("target") ).value = document.getElementById( gup("source") ).value;      
            window.close();
      }


and only updating page 1 code as under:
function open_window(target, source) {
            window.open('page22.html?target='+encodeURI(target)+"&source="+encodeURI(source),'','width=600,height=200,toolbar=yes,location=yes,directories=yes,status=yes  ,menubar=yes,scrollbars=yes,copyhistory=yes,resizable=yes');
      }
still giving me the same result. textbox A goes clear when values pass into textBox B.
ASKER CERTIFIED SOLUTION
Avatar of leakim971
leakim971
Flag of Guadeloupe image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
I am going to attach both files, for your review and yes I am using Firefox. Is it an issue for javascripts, not to work.
page1.htm
page2.htm
No right now, i am testing the files as .html.
Time to go to bed for me. See you later and Good luck !
Thanks for your help sir, I do appreciate it...
I am very new in web development, it took me time to understand but finally it works, and thats all counts...
Thanks for the points! Have a nice week-end!