Forums

ChronoForms and Useable Forms

GreyHead 27 Feb, 2011
Hi There,

One consistent request in the forums was for a way to get ChronoForms to build forms with hideable sections. That is form elements or blocks of elements that are shown or hidden depending on the user's responses to other form inputs.

We've known how to do this effectlively using Peter-Paul Koch's Usable Forms script from QuirksMode.org or with custom JavaScript for a while now. The problem has always been finding a way to handle validation on the hidden form inputs -- you want them to validate correctly when they are shown but not to cause errors when they are hidden.

I've now succeeded in getting this working smoothly by using a validation script from QuirksMode.org together with the usable forms script.

There is tutorial now available to buy here for $8 which includes the modified scripts and a sample form (you can see the sample form - a copy of Peter-Paul Koch's example - working here in ChronoForms.

A number of people have asked for this so I'm offering a 50% reduction to $4 for the first six buyer using the coupon 78U54dmfAC

Bob





78U54dmfAC
petermazzi 28 Feb, 2011
Does the tutorial includes scripts also for "drop down" fields or only for radio buttons ?
GreyHead 28 Feb, 2011
Hi petermazzi,

Both. You can see a checkbox, a radio button group and a drop-down working on the example form.

Bob
petermazzi 02 Mar, 2011
I could not find in the tutorial how to do it with "drop down" menu.

I tried in the following way, but it does not work:

<div class="form_item">
  <div class="form_element cf_dropdown">
    <label class="cf_label" style="width: 150px;">Geographical Market Coverage</label>
    <select class="cf_inputbox" id="select_1" size="1" title=""  name="select_1">
    <option value="">Choose Option</option>
      <option value="National" rel="none">National</option>
<option value="Local/Regional" rel="none">Local/Regional</option>
<option value="International" rel="geo">International</option>

    </select>
    
  </div>
  <div class="cfclear"> </div>
</div>

<div class="form_item" rel="geo">
  <div class="form_element cf_textbox">
    <label class="cf_label" style="width: 150px;">If international, which areas ?</label>
    <input class="cf_inputbox" maxlength="150" size="30" title="" id="text_15" name="text_15" type="text"/>
GreyHead 02 Mar, 2011
Hi petermazzi,

I'm afraid that you do need to check that each option has a rel attribute

To let the script work each input in the group must have a ‘rel’ attribute so we’ll add rel="none".


In your example there is one missing. Change
<option value="">Choose Option</option>
to
<option value="" rel="none" >Choose Option</option>
and it works OK for me.

Bob
petermazzi 02 Mar, 2011
yes, it does... thank you a lot !
gun16 14 Jul, 2011
I just bought this🙂

I have this exact problem, so I can't wait to see it solving my problems.
gun16 15 Jul, 2011
Doesn't work with the calendar😟 Back to the drawing board.
GreyHead 15 Jul, 2011
Hi gun16,

What exactly doesn't work with which calendar?

Please can you give more info?

Bob
gun16 19 Jul, 2011
Hi Bob,

Great code by the way, hopefully I didn't come across to ungrateful.

It was superior to the onchange and table row id solution I built prior to finding this.

In your supplied doco on slide 6 you mention "Note: Although there is a date input here the ChronoForms calendar can’t be used with it as the scripts interfere with each other"

I have tested this theory and unfortunatley you are correct.

Never to mind, the client really liked the calendar but I set about using the pattern validation

e.g
validation="pattern"
pattern="(0?[1-9]|[12][0-9]|3[01])[- /.](0?[1-9]|1[012])[- /.](19|20)?[0-9]{2}"
patternDesc="Please enter a date in dd-mm-yy format"


One flaw I found with this however it doesnt show the friendly error message when the customer submits the form with the date field (input box) being empty. It only prompts if they actually enter something into the field.

Whilst I couldn't see it in the documentation I experimented with combining validation"required" and validation"pattern" together which does do the job.

e.g.

<input class="cf_inputbox" maxlength="150" size="30" title=""
id="datedivorce" name="datedivorce" type="text" validation="required"
validation="pattern"
pattern="(0?[1-9]|[12][0-9]|3[01])[- /.](0?[1-9]|1[012])[- /.](19|20)?[0-9]{2}"
patternDesc="Please enter a date in dd-mm-yy format" />

This solved that problem so maybe an undocumented feature🙂

Now my only issue is that I can't filter out fields which aren't captured. The example is my "Vehicle Type" dropdown shows 6 options including the initial value ="" (being set to null)

This particular drop down links to one of 5 seperate drop downs (which have seperate and unique options) where the user has to choose one value. This one value makes it's way to my email...

I then create the email in the usual way with a label and then the valuefor example:

Length of hire: 7 days {select21}{select22}{select23}{select24}

It's great that it shows {select 21} (which equals 7 days in my example) but I want to supress the other values that havent been caught {select21}{select22}{select23}{select24}

I can't include php in the email as the editor strips it out everytime and turns it into html comments <!-- blah blah -->

Any help or guidance would be much appreciated.

The form can be seen here: http://www.utecarrentals.com.au/bookings/

Feel free to have a play - note that the form is live and the emails do generate to the client, so please just choose your name as testing for example if using the form🙂
gun16 02 Aug, 2011
any help with the above would be much appreciated.
gun16 15 Aug, 2011
Bump😀
GreyHead 15 Aug, 2011
Hi gun16,

Sorry for the delay; I'm afraid that longer posts tend to get put by until I have more time :-(

First you can use PHP in the Email template if you turn off the rich text editor in the Email Setup properties.

Second you can drop unwanted values or give them default values in the OnSubmit Before Email box:
<?php
$ var_array = array('select20', select21', 'select22', 'select23', 'select24');
foreach ($var_array as $v ) {
  $temp = JRequest::getString($v, 'default value', 'post');
  JRequest::setVar($v, $temp);
}
?>
Note that the default value can just be '' for an empty string.

Bob
csteele 20 Dec, 2012
Has anyone used this tutorial and technique in CF4? The demo seems to do what I want, albeit with programming skills I probably lack. Anyone got a solution using the CF4 wizard? 😀
GreyHead 20 Dec, 2012
Hi csteele,

We've started to explore this in CFv4, there are a couple of FAQs with some examples if you check the Elements & HTML Category I think.

Bob
csteele 20 Dec, 2012
Yeah, so my skills are definitely lacking, but I think I got it working. I purchased the entire document bundle and I've attempted the "creating hideable inputs" tutorial. I'm using CFv4 and in my effort to duplicate the steps on pages 3 and 4, I came up with the following code:
<?php
$doc =& JFactory::getDocument();
$doc->addScript('components/com_chronoforms/js/usable_forms/usable_forms.js');
$doc->addScript('components/com_chronoforms/js/usable_forms/validation.js');
?>

<div class="ccms_form_element cfdiv_checkbox" id="country_other1_container_div" style="" >
<input type="hidden" name="country_other" value="" alt="ghost" />
<input value="1" title="" type="checkbox" name="country_other" id="country_other" class="label_left" rel="othercountry" />
<label for="country_other">Other than the Netherlands</label>

<div class="clear"></div>

<div id="error-message-country_other"></div>

</div>

<div class="ccms_form_element cfdiv_text" id="other_country1_container_div" style="" rel="othercountry">
<label>Which other country?</label>
<input maxlength="150" size="30" class="" title="" type="text" value="" name="other_country" />

<div class="clear"></div>

<div id="error-message-other_country"></div>

</div>

Some things to note and I welcome comment:
1) The javascript is in a very different path
2) The tags for the input and div are also quite different from the tutorial
3) If you use the wizard again it ruins your changes (any way to put these "rel" attributes in via the wizard?)
4) I assume there is some way to use this on containers, but... how?
GreyHead 24 Dec, 2012
Hi csteele,

I'm sure this is possible but probably only with a bit of work and some manual HTML or JavaScript to get the 'rel's in place.

The reason for using the 'Usable Forms' approach with CFv3 was that it proved difficult to handle the validation of hidden inputs. (Though I think that someone did find a way to do it in the end.) If you hide an element that you no longer want it to be required and probably you want to remove any value before it is un-hidden again.

With CFv4, which uses a different validation library, you can handle the validation of hidden elements by disabling them which is simple to do in JavaScript. So the complex approach of using 'rel' tags probably isn't necessary - though it will still work OK.

See the FAQ that I just linked to in another thread where you have posted for a link to a FAQ using a different approach.

Bob
This topic is locked and no more replies can be posted.