dynamic form fields that will be hidden/visible based on previous answers

--------------------------------------------------------------------------------

I am creating a Form and want to create dynamic form fields that will be hidden/visible based on previous answers. For example.

I am making a "get a quote" form where I have to 1st ask people:

Where do you want the floorcovering services done.
[ ] Basement
[ ] 1st Floor
[ ] 2nd Floor

and then if a user checks the on lets say 1st floor checkbox, it will dynamically show more options to choose from.
[ ] Basement
[ x ] 1st Floor
-> What room? [ ] Bathroom [ ] Living room [ ] Kitchen [ ] Dining Room
[] 2nd Floor

and then if a user selects Bathroom and Kitchen it would look like this:
[] Basement
[ X ] 1st Floor
-> What rooms? [ x ] Bathroom [ ] Living room [ x ] Kitchen [ ] Dining Room
-->Bathroom jobs needed done: [ x ]Shower [ x ]Walls [ ]Half-wall
-->Kitchen jobs needed doen: [ x ]Floor [ ]walls [ ]Half-wall
[ ] 2nd Floor

[SUBMIT]

Then when I get a form sent it only gives me a teable with items that were checkmarked so it would look like this.

1st Floor
Bathroom: Shower, Walls
Kitchen: Floor

 

Hello,

Javascript cannot do everything for you, but the custom form is easily possible. Simply put each question in an ID'd DIV, like:

<div id="question_1">Question & Checkboxes</div>

Code (markup):

Then create an onclick property for the previous question(s) and an IF/ELSE statment to toggle the visibility.

Hope this helps you design something interesting!

Jay

 

To dynamically create something like:

<input type="checkbox" name="checkbox_11" id="checkbox_11" value="bathroom"/>

HTML:

you can use this code:

var my_form = document.getElementById('my_form');

var new_checkbox = document.createElement('input');

new_checkbox.setAttribute('type', 'checkbox');
new_checkbox.setAttribute('id', 'checkbox_11');
new_checkbox.setAttribute('name', 'checkbox_11');
new_checkbox.setAttribute('value', 'bathroom');

my_form.appendChild(new_checkbox);

Code (markup):

...to remove it:

my_form.removeChild(new_checkbox);

Code (markup):

That's the basic idea

 

this all your needs can be done using javascript.. but you must be good enough in javascripting

i am not going to write the complete source code for you... but can give you a theory how can you achieve your goal..


the below three will be radio boxes;

[ ] Basement
[ ] 1st Floor
[ ] 2nd Floor

there will be a div after each radio like this;

<input type=radio name=a id=a onclick="showdiv('basementdiv')">Basement
<div id="basementdiv" style="display:none">
-> What room? [ ] Bathroom [ ] Living room [ ] Kitchen [ ] Dining Room
</div>

so, upon click on hte radio, it will call a javscript funciton and pass the id of its relevant div for more questions accoridng to your selection.. the javascript function can be like this;

showdiv(divid)
{
document.getElementById('id of other div to hide it').syle.display = 'none';
document.getElementById(divid).syle.display = 'block';
}

and then upon the form submission, you can make some checks to see what fields were checked..

if you aren't too much beginner.. then i really hope that the above scenario will be helpful to you..

cheers..