It was easier to write an example than explain. Look over this, paste it
into a 'test'html' file and run it
On the serverside validation, if the checkbox exists, then validate those
fields, else dont.
Since Firefox likes to keep field values on a refresh... you'll probably
want to write one more small function to check the state of the checkbox
when the page loads and show/hide the fields based on that.
This should do it...
function initalLoad()
{
if (document.forms['myForm'].elements['bottomformcheckbox'].checked)
{
showHide('bottomForm')
}
}
Dont call the initialLoad() function until the page is loaded and the form
exists. You could cheat and just put <script>initialLoad()</script> right
after the closing form tag.
<!--========================= test.html ===============================-->
<script language="javascript" type="text/javascript">
// if its hidden, it will show it, if its visible... it will hide it.
function showHide(elem)
{
if (document.getElementById(elem).style.display == 'none')
{ document.getElementById(elem).style.display = 'block' }
else
{ document.getElementById(elem).style.display = 'none' }
}
function validateForm()
{
//Assume the fields are valid initially...
var formIsValid = true;
var retMsg = '';
//Validate any fields that are ALWAYS required here...
if (document.forms['myForm'].elements['topformfield1'].value.length
== 0)
{
retMsg = retMsg + '\n- Top Form Field 1 is requried.';
formIsValid = false;
}
if (document.forms['myForm'].elements['topformfield2'].value.length
== 0)
{
retMsg = retMsg + '\n- Top Form Field 2 is requried.';
formIsValid = false;
}
//then decide whether or not your checkbox was checked and which
fields to validate
if(document.forms['myForm'].elements['bottomformcheckbox'].checked)
{
//The checkbox was checked... validate rest of the fields
fields
if
(document.forms['myForm'].elements['bottomformfield1'].value.length == 0)
{
retMsg = retMsg + '\n- Bottom Form Field 1 is
requried.';
formIsValid = false;
}
if
(document.forms['myForm'].elements['bottomformfield2'].value.length == 0)
{
retMsg = retMsg + '\n- Bottom Form Field 2 is
requried.';
formIsValid = false;
}
}
if (!formIsValid) alert(retMsg);
return formIsValid;
}
</script>
<form name="myForm" action="test.html" method="post">
<input type="checkbox" name="bottomformcheckbox"
onclick="showHide('bottomForm');" /> BOTTOM FORM<br /><br />
<fieldset id="topForm">
<legend>TOP FORM FIELDS</legend>
<b>THESE FIELDS ARE ALWAYS REQUIRED</b><br />
Field 1: <input type="text" name="topformfield1" /><br />
Field 2: <input type="text" name="topformfield2" /><br />
</fieldset>
<br />
<fieldset id="bottomForm" style="display:none;">
<legend>BOTTOM FORM FIELDS</legend>
<b>THESE FIELDS ARE ONLY REQUIRED IF THE CHECKBOX IS
CHECKED<br /></b>
Field 1: <input type="text" name="bottomformfield1" /><br />
Field 2: <input type="text" name="bottomformfield2" /><br />
</fieldset>
<br />
<input type="submit" onclick="return validateForm();" />
</form>
<!--======================= end test.html =============================-->
..:.:.:.:.:.:.:.:.:.:.:.:.
Bobby Hartsfield
http://acoderslife.com
-----Original Message-----
From: Ali Majdzadeh [mailto:[EMAIL PROTECTED]
Sent: Saturday, September 16, 2006 12:12 AM
To: CF-Talk
Subject: show/hide parts of form (div)
Hi everybody:
I need a code that helps me show some parts of my form when I check a
checkbox and hide them when I uncheck it.(if it is a radio box or
select/menu it would be acceptable too) I mean if the user says that he has
that information then he/she checks the checkbox and then that part of form
appear and then he/she must fill the form special fields that appeared. I
found some javascripts that do it very well with show/hide a div that
contains that part of form but the problem is:
When the user checks the check box and the special parts of form appear
then theses fields should become required to be filled. I did it with
<cfinput required="yes"> code but then even if the parts are hidden(the
show/hide chechbox is unchecked) it asks for filling them. I need the
required part becomes active if the checkbox is checked and the user sees
that parts of form.
Thanks
Benign
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~|
Introducing the Fusion Authority Quarterly Update. 80 pages of hard-hitting,
up-to-date ColdFusion information by your peers, delivered to your door four
times a year.
http://www.fusionauthority.com/quarterly
Archive:
http://www.houseoffusion.com/groups/CF-Talk/message.cfm/messageid:253342
Subscription: http://www.houseoffusion.com/groups/CF-Talk/subscribe.cfm
Unsubscribe: http://www.houseoffusion.com/cf_lists/unsubscribe.cfm?user=89.70.4
