creating javascript layer help

[pelican]

I have created a javascript function within a cfm page that will allow me to
show a previously created layer, depending on what is selected from the select
menu. That code is attached. However, because the page creates the layer when
it loads, and thus creates the javascript calendar inside the page when it
loads, the date fields in the calendar are filled into the form on the page,
and then inserted into the database when the user submits the page.

What I would like to do, is either somehow disable the calendar inside the
layer until it is displayed, or perhaps create everything; the layer and the
calendar inside, when the user clicks in the menu.

Can someone help with this? I'm familiar with Coldfusion 6, but we recently
bought version 7, so it might have something I can use instead of javascript.
Please help. Thanks.


function go(divname)
{
box = document.forms[0].followup_how;
if (box.options[box.selectedIndex].value=='respond'){
document.getElementById(divname).style.display='bl ock';}
else {document.getElementById(divname).style.display='n one';}
}

<td><select name="followup_how"
onChange="makeLayer('LYR1',200,10,100,100,'red',1, 1)">
<option value="fyi">FYI</option>
<option value="respond">Respond By Date:</option>
<option value="urgent">Urgent Followup</option>
</select></td>

<div id="responddate" class="verdana" style="position:absolute; left:320px;
top:<cfoutput>#height+705#</cfoutput>px; z-index:9; border: 1px none #000000;
display:none">
<script type="text/javascript">DateInput("respond", "False")</script></div>

[Fychan66]

I'm presuming that your JavaScript function DateInput() outputs the calendar
object, with various form fields in it. And if I understand correctly, these
form fields are being passed through even if the calendar has not been selected
for viewing.

If this is the case, what you might want to do is set the DateInput() function
to output the form fields with the "disabled" attribute, then modify your
go(divname) function so that when it sets the display value to "block" it also
sets the disabled flag to false for each one of these fields, and (obviously)
when it's setting the display back to "none" it sets the disabled flag back to
true.

[pelican]

The Dateinput function is contained on a separate js file. I access the
function by including this in the header: <script type="text/javascript"
src="calendarDateInput.js"></script>, and then I place this line where I want
the calendar to appear: <script type="text/javascript">DateInput("respond",
"False")</script>. Respond is the name id, and false means it is not required.
I don't think I can mark such a menu calendar as disabled, at least I don't
know how. Any ideas? Thanks.

[Fychan66]

Marking a field as disabled is fairly easy...

<form name="myform" method="post" action="submit.cfm">
<input type="text" name="disabledfield" value="disabled" disabled>
</form>

will do it (certainly in HTml 4.0 browsers).

Then if you want to re-enable it you can use the style sheet DTD to do it
(in IE like this:)
<script language="JavaScript" type="text/javascript" defer>
// re-enable a field
document.myform.disabledfield.disabled = false;
// disable a field
document.myform.disabledfield.disabled = true;
</script>
I think you need to change the reference for Mozilla / Netscape etc browsers,
but there should be enough tutorials in Google to let you work out the
differences.

Caveat: Code above is from memory, should work, or at least not be too far off
;)

Phil