Passively Displaying Data In A Readonly Field

[creacon]

I have a questionnaire form which contains mostly Yes/No radio buttons and a few fields for the user to enter data. There is one field, however, that if the answer to its question is Yes, then I need to display a date there, but not stop in it. For example, here's the applicable form code:

    <form name="QstnrPg1" method="post" action="<?php echo $_SERVER['PHP_SELF']; ?>" id="QstnrPg1"><label>Yes</label>      <input type="radio" name="RadioGroup1" value="Yes" id="RadioGroup1_1" tabindex="1" onChange="setFocus_y1()">      <label>No</label>      <input type="radio" name="RadioGroup1" value="No" id="RadioGroup1_2" onChange="setFocus_n1()">    </span></span> Are you at least age 16, but under age 40?      Date Of Birth (w/only show if Yes):       <input name="DOB" type="text" id="DOB" tabindex="2" size="10" maxlength="10" readonly>

Here's the current code in the two javascripts called by the "onChange"'s:

	function setFocus_y1()	{		document.getElementById("DOB").write("<?php echo $dob ?>");	// This doesn't work		clearFocusBorder();		document.getElementById("RadioGroup2_0").focus()		document.getElementById("RadioGroup2_0").style.borderStyle="solid";		document.getElementById("RadioGroup2_0").style.borderWidth="2px";		document.getElementById("RadioGroup2_0").style.borderColor="darkred";	}	function setFocus_n1()	{		clearFocusBorder();		document.getElementById("RadioGroup2_0").focus()		document.getElementById("RadioGroup2_0").style.borderStyle="solid";		document.getElementById("RadioGroup2_0").style.borderWidth="2px";		document.getElementById("RadioGroup2_0").style.borderColor="darkred";	}

The $dob variable is populated from a session variable, by a php script which executes when the form loads. I know it's properly populated, because I've displayed its value at the top of the page for debugging purposes.With my extremely limited knowledge, that document write line ought to do the trick, but it doesn't. Can anyone tell my why, or show me a better way to do this?

[jeffman]

Only the document element has a write method, and it's definitely NOT what you want. It would overwrite your entire page. Since it's a text input, try:document.getElementById("DOB").value = something;If it were not a form element, you would set its innerHTML, as in:document.getElementById("DOB").innerHTML = something;

[dsonesuk]

also you would need to disable readonly, add required data, and then re enable the readonly (which should be readonly="readonly").EDIT: forget about disabling and enabling, you can change it with readonly set, could have sworn i had to do this before any changes could be made, probable thinking of access database input boxes.

[creacon]

Only the document element has a write method, and it's definitely NOT what you want. It would overwrite your entire page. Since it's a text input, try:document.getElementById("DOB").value = something;If it were not a form element, you would set its innerHTML, as in:document.getElementById("DOB").innerHTML = something;

Thanks agin to both of you; that was just persactly what I needed to make it work. I used the above line of code, and substituted "something" with "<?php echo $dob ?>" and that done did the do.However, I still don't understand what that innerHTML thing means. I tried to read about it in the w3schools tutorial, but there wasn't enough detail in the explanation.

[jeffman]

innerHTML is a property of page elements that was first created by Microsoft for IE and can be used in place of more complicated DOM methods. It is most often used to put text into a page element. There is a standardized property that could be used instead, but IE and the rest of the world give it a different name, which makes its application more complex. So we use innerHTML, which everyone now agrees on.Except for some elements (notably tables and select boxes) you can actually add HTML to an element in the form of a string, and the elements will be added to the DOM.So if your string is "<p>hello <span class='something'>world</span></p>" and you assign that to the innerHTML of a <div>, you'll get exactly what you think you will.

[creacon]

innerHTML is a property of page elements that was first created by Microsoft for IE and can be used in place of more complicated DOM methods. It is most often used to put text into a page element. There is a standardized property that could be used instead, but IE and the rest of the world give it a different name, which makes its application more complex. So we use innerHTML, which everyone now agrees on.Except for some elements (notably tables and select boxes) you can actually add HTML to an element in the form of a string, and the elements will be added to the DOM.So if your string is "<p>hello <span class='something'>world</span></p>" and you assign that to the innerHTML of a <div>, you'll get exactly what you think you will.

WOW! thanks, that's the first clear explanation that I've gotten. I have several books, but none explained this without creating more questions than providing answers.