Dependent fields

nomad · Mar 26th, 2009, 7:55 AM

Sorry for newbie question. System looks great, but before I will install it, I would like to confirm important feature I could not find in help or demo.

I prefer easy forms, so I usually hide all fields which are not necessary.
It is posible to use an dependent fields, which are visible only if previous (parent) field is selected (checkbox) or certain value is selected (pop-up menu)?

Example:
Parent checkbox: Do you smoke?
If selected, next dependent fields will appear:
- Which is you favorite branch?
- How many cigarettes do you smoke a day?
- .....

Thanks for your help.

typer139 · (This post was last modified: Mar 26th, 2009, 8:43 AM by typer139.)

Hey Nomad,

I'm not sure how this could be incorporated into the Formtools system itself, but I typically just handled it all through JavaScript. I've got a pretty intricate form that has tons of dependencies.. Here's some code I use on one field, i believe it's a dropdown but could be anything with a value. I typically fire this JavaScript "onChange" or "onClick" of the parent field.

I put DIV tags around field areas that will be shown/hidden and change their visibility based on the "parent" selection. In this code I also disable the box because I have a validation script that runs through all the fields on submit and it doesn't validate the "disabled" one's. (I found this out the hard was when the form never got submitted because all these "hidden" fields were still being validated and not passing)

Hope it works for you..

Rich Morgan

Code:
<!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 showhide()

{

if(document.getElementById('do_you_smoke').checked == true)

{

document.getElementById('cig_brand_div').style.display = "block";

document.getElementById('cig_brand_dropdown').disabled = false;

}

else

{

document.getElementById('cig_brand_div').style.display = "none";

document.getElementById('cig_brand_dropdown').disabled = true;

}

}

</script>

</head>

<body>

<table width="250" border="0" cellspacing="0" cellpadding="5">

  <tr>

    <td>Check if You Smoke?</td>

    <td><input name="do_you_smoke" type="checkbox" id="do_you_smoke" value="yes" onclick="showhide();" /></td>

  </tr>

</table>

<br />

<div id="cig_brand_div" style="display:none;">

  <table width="250" border="0" cellspacing="0" cellpadding="5">

    <tr>

      <td>What Brand?</td>

      <td><select name="cig_brand_dropdown" id="cig_brand_dropdown">

        <option value="Marlboro">Marlboro</option>

        <option value="Other Brand">Other Brand</option>

        <option value="Another Brand">Another Brand</option>

      </select></td>

    </tr>

  </table>

</div>

</body>

</html>

nomad · Mar 26th, 2009, 9:12 AM

Dear Typer,
thanks for your replay. I use Javascript in similar way for unhidding child fields or making form more comfortable (moving to first incorrect filled field, validation or so).
I was just wonder if the system can do that automatically as I noticed that demo uses Java scripts for validation (but it works in pure php if Java is disabled).

(Mar 26th, 2009, 8:42 AM)typer139 Wrote: Hey Nomad,

I'm not sure how this could be incorporated into the Formtools system itself, but I typically just handled it all through JavaScript. I've got a pretty intricate form that has tons of dependencies.. Here's some code I use on one field, i believe it's a dropdown but could be anything with a value. I typically fire this JavaScript "onChange" or "onClick" of the parent field.

I put DIV tags around field areas that will be shown/hidden and change their visibility based on the "parent" selection. In this code I also disable the box because I have a validation script that runs through all the fields on submit and it doesn't validate the "disabled" one's. (I found this out the hard was when the form never got submitted because all these "hidden" fields were still being validated and not passing)

Hope it works for you..

Rich Morgan

Code:
<!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 showhide() { if(document.getElementById('do_you_smoke').checked == true) { document.getElementById('cig_brand_div').style.display = "block"; document.getElementById('cig_brand_dropdown').disabled = false; } else { document.getElementById('cig_brand_div').style.display = "none"; document.getElementById('cig_brand_dropdown').disabled = true; } } </script> </head> <body> <table width="250" border="0" cellspacing="0" cellpadding="5"> <tr> <td>Check if You Smoke?</td> <td><input name="do_you_smoke" type="checkbox" id="do_you_smoke" value="yes" onclick="showhide();" /></td> </tr> </table> <br /> <div id="cig_brand_div" style="display:none;"> <table width="250" border="0" cellspacing="0" cellpadding="5"> <tr> <td>What Brand?</td> <td><select name="cig_brand_dropdown" id="cig_brand_dropdown"> <option value="Marlboro">Marlboro</option> <option value="Other Brand">Other Brand</option> <option value="Another Brand">Another Brand</option> </select></td> </tr> </table> </div> </body> </html>

***Ben*** · Mar 26th, 2009, 9:30 PM

Hey guys,

Nomad - no, unfortunately the system doesn't include any JS for that. You'll need to take Typer's suggestion for hiding/showing the fields. If you're using jQuery, Prototype or other JS framework, they all contain simple ways to do this too.

All the best!

- Ben

nomad · Mar 30th, 2009, 4:17 AM

Dear all,
sorry for my original question from 26th, I installed and test Form tools in the meantime and this is a Form processor NOT Form bilder (I saw many different tools in one day and I was little chaotic).

My question had no sense then.

Regards,

Pavel

ElbertJulr · (This post was last modified: Aug 28th, 2014, 11:01 PM by ElbertJulr.)

(Mar 26th, 2009, 7:55 AM)nomad Wrote: Sorry for newbie question. System looks great, but before I will install it, I would like to confirm important feature I could not find in help or demo.

I prefer easy forms, so I usually hide all fields which are not necessary.
It is posible to use an dependent fields, which are visible only if previous (parent) field is selected (checkbox) or certain value is selected (pop-up menu)?

Example:
Parent checkbox: Do you smoke?
If selected, next dependent fields will appear:
- Which is you favorite branch?
- How many ecig called tesla mod do you smoke a day?
- .....

Thanks for your help.

Hello friend bit old thread. I am new to coding and I do need to make similar program so can you help me with some code help? I will explain you when you get in contact..

FORUMS