Forums

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

Hi imvitaliy,

You'll need to create some JavaScript to make this happen - probably by changing the CSS 'display' properties of the input elements from 'none' to 'block'. You can see how this works if you look at the display of the validation error messages in a ChronoForms form.

If you are doing this with ChronoForms it's important to remember that ChronoForms needs to be able to see all the field names (e.g. name="field_name") in the html so don't change any of them dynamically.

Bob

I'd suggest looking at the validation code as it works pretty slick to blur in a new line underneath stating something is missing. I wouldn't think it be too hard to duplicate something similar for your means. Just make sure as Bob said, make sure all the field names are unique in your form. Best way would be to use prefixes in your form. Such as lvl1_bathroom, lvl1_bedroom, lvl2_bathroom, lvl2_bedroom, etc.

I'm don't know how to do this. I don't know how I can check this in the validation? I did this on my website here but it's not working the way I need it.

The works with the onClick event so the problem is that it shows all the form and then if you click on yes and then click on no again only then will it hide the sub input boxes. So how can I make the First Floor option to be a checkbox and not radio button. and have it unchecked first, and then when user puts a checkmark on it, then more fields show up under it?

JavaScript Code:

<script type=text/javascript>
// Author: JS-Examples - http://www.js-examples.com
// Courtesy of SimplytheBest.net - http://simplythebest.net/scripts/
// _w : which ID (1) or (2)
// _h : (h)ide or (s)how
function toggleT(_w,_h) {
if (document.all) { // is IE
if (_h=='s') eval("document.all."+_w+".style.visibility='visible';"«»);
if (_h=='h') eval("document.all."+_w+".style.visibility='hidden';"«»);
} else { // is NS? 
if (_h=='s') eval("document.layers['"+_w+"'].visibility='show';"«»);
if (_h=='h') eval("document.layers['"+_w+"'].visibility='hide';"«»);
}
}
</script>

Form HTML:

<h3>Get a Quote</h3>
Please select Floor, Room, and what service you want to be done!.<br />

<br />
Yes <input name="1st_floor" type="radio" value="" onClick="toggleT('divt1','s')">
No <input name="1st_floor" type="radio" checked value="Yes" onClick="toggleT('divt1','h')">
1st Floor
<br  />
<span id="divt1" style="visibility:visible;position:relative;top:0;left:0">
First Floor Room
  <label>
  <input type="checkbox" name="1st_Bathroom" value="Yes" />
  Bathroom 
  <input type="checkbox" name="1st_Kitchen" value="Yes" />
  Kitchen 
  <input type="checkbox" name="1st_Living_room" value="Yes" />
  Living room</label>
  <br />  
</span>
<input name="Submit" type="submit" />

Post edited by: imvitaliy, at: 2008/01/16 20:12

Edited to add url tag<br><br>Post edited by: GreyHead, at: 2008/01/17 09:25

Hi imvitaliy,

Writing custom code is something that we try to avoid doing here; and I'm not much good at JavaScript! But I think this might be useful to people so I'll have a go, but it may take a few days.

Bob

Thanks a lot it means alot to me

Hi imvitaliy,

I think I have a solution that you can try, I'm using Peter Paul Koch's Usable Forms script from quirksmode.org/dom/usableforms.html (sorry, the forum won't let me post links to the page).

You'll need to download v2.0 of the script. Now edit line 15 to read

var containerTag = 'DIV';

and copy the modified script to your site components/com_chronocontact/js/ folder.

Create a test form (I usually restore or copy the Basic Form) and put this code into the Form HTML box

<script type="text/javascript" src="components/com_chronocontact/js/usableforms.js"></script>
<h3>Get a Quote</h3>
<p>Please select Floor, Room, and what service you want to be done!.</p>

<input name="1st_floor" type="checkbox" value="No" rel="1st_floor" />
<label for="1st_floor">First floor</label>
<div rel="1st_floor">
First Floor Room
  <input type="checkbox" name="1st_Bathroom" value="Yes" />
  Bathroom 
  <input type="checkbox" name="1st_Kitchen" value="Yes" />
  Kitchen 
  <input type="checkbox" name="1st_Living_room" value="Yes" />
  Living room</label>
</div>
<br />
<input name="Submit" type="submit" />

If you Save and click the form link you *should* find that the 'First Floor Room' checkboxes are hidden until you check the 'First Floor' box.

This works quite simply (there are fuller instructions on the Quirksmode site).

Each code block that you want hidden must be in a <div> with a rel attribute. In this case and the trigger to unhide this block must have the same rel attribute. See these lines

<input name="1st_floor" type="checkbox" value="No" rel="1st_floor" />
<label for="1st_floor">First floor</label>
<div rel="1st_floor">
. . .
</div>

That's pretty much all that's involved. I think that the blocks should nest OK. Please give it a go and let us know how it works.

Bob

PS If you use tables for your form layout then you can use <tr>s instead of <div>s but you'll need to change line 15 in the script back to

var containerTag = 'TR';

<br><br>Post edited by: GreyHead, at: 2008/01/17 10:27

Hi,

First of all thanks for a great product.

I've built a dynamic form using the information in this thread and Peter Paul Koch's Usable Forms script from quirksmode.org/dom/usableforms.html which was mentioned above. That method involves placing the following code in my form HTML:

<script type="text/javascript" src="/components/com_chronocontact/js/usableforms.js"></script>

When I place that in the form, it breaks the mootools validation which I've implemented using class tags.

I've got the dynamic form working perfectly. Is there a way to have both work together?

Thanks 🙂

Hi ironlion37,

Sounds as if there's an incompatibility between LiveValidation and Useable forms :-(

You might try using FireBug to see if you can track down what is happening. Otherwise the old MooTools validation might be more tolerant of the way Useable Forms moves inputs around.

Bob

Hi Bob,

Would you mind telling me how I try out implementing the old version of motools?

And when you say "moves inputs around", could you shed a little more light on that?

Thank you.

Hi ironlion37,

You'll need to make sure that the MooValidation file from ChronoForms is loaded together with the Joomla MooTools 1.1. library and then add

window.addEvent('domready', function() {
	var valid = new Validation('taxi', {
        immediate : true
     });
}):

to the form JavaScript.

Adding class='required' etc, should then trigger the validation.

I had a qucik look at Quirksmode and the docs say that it hides the unused parts of the form - outside the form HTML. Now LiveValidation adds Events to every form field so my guess is that the two conflict somehow. But don't ask me to explain in any more detail because I have no idea.

Bob

Thanks again Bob,

I took a deeper look at the usable forms site and found his instructions on how to add validation to usableforms. For those that are interested it's here: http://www.quirksmode.org/dom/error.html

It looks like a great solution but I'm afraid it's a bit over my head (I'm more of a designer than a programmer), so I'm enlisting the help of a programmer friend.

I used the instructions in this post and the FAQ for usableform.
But with the version of Chronoforms ChronoForms V3.1 RC5.5 not get results.

What can it be?

Vales

Hi Vales,

Sorry, I have no idea how to get UseableForms and LiveValidation to work together.

Bob

Thanks for your answer Bob,

but I do not use Live validation. It is a simple test form.


Vales

Hi Bob,

I think I've found a solution. In Form Code Tab near Form Html is written:

Don't use <html> - <body> - <head> - <form> - <script> -<style> tags in the 2 boxes below!

So it is not appropriate to include in section Form Html the follow code:

<script type="text/javascript" src="components/com_chronocontact/js/usableforms.js"></script>

I entered the javascript code of the file usableform.js in the section Form Javascript.

It now works fine.

Vales