Question : Javascript onChange Event in a value passing TextBox

Hi,
I've 2 pages(Forms). By clicking on a Page1 Button A, Page2 Pops Up, user can enter a Numeric Value or String on Page2 TextBox. After submitting the Display button on Page2, value populates on Page1 TextBox A.

I am trying to use OnChange Event in TextBox A to enable radio buttons and DateField. If value is numeric then only Datefield is going to visible and if the value is a string then Radio buttons and DateField both are going to enable.

The codes are as under, please have a look and let me know, what I need to do?? Any help, comments, suggestion and feedback would be deeply appreciated.

PAGE 1 CODE
1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:
29:
30:
31:
32:
33:
34:
35:
36:
37:
38:
39:
40:
41:
42:
43:
44:
45:
46:
47:
48:
49:
50:
51:
52:
53:
54:
55:
56:
57:
58:
59:
60:
61:
62:
63:
64:
65:
66:
67:
68:
69:
70:
71:
72:
73:
74:
75:
76:
<!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('page2.htm','','width=600,height=200,toolbar=yes,location=yes,directories=yes,status=yes,menubar=yes,scrollbars=yes,copyhistory=yes,resizable=yes');
	}
	
	
	function showFields(){
  
if (isNaN(document.getElementById("Page1_TxtA").value)){
   for(var i=0; i < document.Form1.R.length; i++){
document.Form1.R[i].disabled=true;
document.Form1.R[i].checked=false;}

document.getElementById("Date_A").style.visibility = 'visible';
}
else
{
   for(var i=0; i < document.Form1.R.length; i++){
document.Form1.R[i].disabled=false;}

document.getElementById("Date_A").style.visibility = 'visible';

if (document.getElementById("Page1_TxtA").value==''){
   for(var i=0; i < document.Form1.R.length; i++){
document.Form1.R[i].disabled=true;
document.Form1.R[i].checked=false;}

document.getElementById("Date_A").style.visibility = 'hidden';
document.getElementById("DateA").value = '';
}
/*ends here*/

}
}
	
	
	
	
</script>
</head>
<body>

<H1>PAGE1</H1>

<form name="Form1">
<table width="777" align="center">
  <tr>
    <td colspan="2" bgcolor="#E9E9E9">TextBox A.
      <input type="text" name="Page1_TxtA" id="Page1_TxtA" value="" size="20" maxlength="40" onChange="showFields()" readonly="readonly"></td>
      
    <td width="184" nowrap="nowrap">
      <input type="radio" name="R" id="R0" value="00" tabindex="550" disabled="disabled"/>
      0
      <input type="radio" name="R" id="R1" value="01" tabindex="560" disabled="disabled"/>
      1
      <input type="radio" name="R" id="R2" value="02" tabindex="570" disabled="disabled"/>
      2      
      </td>
      
    <td width="187" align="center" nowrap="nowrap" bgcolor="#E9E9E9" id="Date_A" style="visibility:hidden">Date:
      <input type="text" name="DateA" id="DateA" size="15" maxlength="10" /></td>
      
    <td width="135" align="center" nowrap="nowrap" ><input type="button" name="Page1_BtnA" value="Button A" onclick="open_window('Page1_TxtA','Page2_Txt1')"/></td>
    
  </tr>
  </table>
</form>
</body>
</html>


PAGE2 CODE

1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:
29:
30:
31:
32:
33:
34:
35:
36:
<!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">
	
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();
}
	
	
</script>
</head>
<body>
<H1>PAGE1</H1>
<form name="form1">
<table width="576" border="1">
  <tr>
    <td width="273">pending</td>
    
  </tr>
  <tr>
    <td><input type="text" name="Page2_Txt1"  id="Page2_Txt1" /></td>
   
  </tr>
  <tr>
    <td><input type="BUTTON" name="npage" value="Display" onclick="close_window();" /></td>
  
  </tr>
</table>
</form>
</body>
</html>


Answer : Javascript onChange Event in a value passing TextBox

Put this on page2.htm:
1:
2:
3:
4:
5:
function close_window() {
  opener.document.getElementById("Page1_TxtA").value=document.getElementById("Page2_Txt1").value;
  opener.document.getElementById("Page1_TxtA").onchange();
  window.close();
}
Random Solutions  
 
programming4us programming4us