Forums

Hello all,

I've searched for this topic but I couldn't find any answers, so I'm creating a new topic.

I have a form where, besides the usual customer information, I need product information filled too. And since I don't want to scare customers with a mile-long form, I'd like the fields to only appear if the customer selected that particular product.

For instance, I would have a checkbox group with values 1, 2, and 3.

If the customer selects 1, the form fields for product one would appear. Same for 2 and 3.

If the customer selects none and hits submit, the form would only send the contact information.

Is ChronoForms capable of handling this? What would you consider the best approach?

Thanks in advance!

Luciano

Hi Luciano,

Yes ChronoForms can do this - or rather, you can do this using ChronoForms. Probably some JavaScript is the best approach, un-hide some divs when the checkboxes are selected.

Bob

Thanks for the always fast feedback Bob!

Does it have anything built in or do I have to write my own code?

Luciano

Hi Luciano,

Nothing automatic or built-in I'm afraid.

Bob

lol... again: if it was too easy it wouldn't be fun!🙂

Do you have any experience using the Zapatec (<!-- w --><a class="postlink" href="http://www.zapatec.com">www.zapatec.com</a><!-- w -->) engine? I've been roaming through their demos and it seems to work pretty well.

Thanks Bob

Hi lelias2k,

Don't know anything about it, Mootools is built in to Joomla and will let you deal with this.

Bob

Tks again Bob. I'll take a closer look at what Mootools has to offer in that area.

Have a gr8 wkd!

Luciano

Hello Luciano,
I was searching about this question either. If you have an answer would you pls share it here? THX!!

Hi,

Design your form sot hat it has multiple sub containers, like multiple divs and each div will have some product fields and set the style to each div of those to "display:none" then use the onChange event of the radio to trigger this style from none to inline/block and vice versa!

Regards
Max

I would love to do this aswell, although im not very experienced with javascript, and I cant get it work.

Is there any chance of getting a practical example?

Hi nmclaughlin,

you can show me a form code example, 2 radios with 2 divs and inside each div 2 or 3 fields! andt hen I will show you the necessary code to be made!

Cheers
Max

Hi nmclaughlin,

you can show me a form code example, 2 radios with 2 divs and inside each div 2 or 3 fields! andt hen I will show you the necessary code to be made!

Cheers
Max

Example code is below i know about using the display:none, but its the javascript i dont understand, also the form requires javascript to be in a seperate container which also throws a wrench into the works for me.

thanks for the help.

<div class="form_item">
  <div class="form_element cf_radiobutton">
    <label class="cf_label">Select option</label>
    <div class="float_left">
      <input value="Options 1" title="" class="radio" id="radio00" name="radio0" type="radio" />
      <label for="radio00" class="radio_label">Options 1</label>
      <br />
      
<input value="Options 2" title="" class="radio" id="radio01" name="radio0" type="radio" />
      <label for="radio01" class="radio_label">Options 2</label>
      <br />
      

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

/////////////////////////////////These fields appear if option 1 is selected///////////////////////////////
<div id="options1">

<div class="form_item">
  <div class="form_element cf_text"> <span class="cf_text">If Options 1 selected</span> </div>
  <div class="clear"> </div>
</div>

<div class="form_item">
  <div class="form_element cf_textbox">
    <label class="cf_label">option1field1</label>
    <input class="cf_inputbox" maxlength="150" size="30" title="" id="text_2" name="text_2" type="text" />
  
  </div>
  <div class="clear"> </div>
</div>

<div class="form_item">
  <div class="form_element cf_textbox">
    <label class="cf_label">option1field2</label>
    <input class="cf_inputbox" maxlength="150" size="30" title="" id="text_3" name="text_3" type="text" />
  
  </div>
  <div class="clear"> </div>
</div>

</div>
/////////////////////////////////////////////////////////////////////////////////////////////////////////////

////////////////////////////////////These fields appear if option 2 is selected///////////////////////////////
<div id="options2">

<div class="form_item">
  <div class="form_element cf_text"> <span class="cf_text">If Options 2 selected</span> </div>
  <div class="clear"> </div>
</div>

<div class="form_item">
  <div class="form_element cf_textbox">
    <label class="cf_label">option2field1</label>
    <input class="cf_inputbox" maxlength="150" size="30" title="" id="text_4" name="text_4" type="text" />
  
  </div>
  <div class="clear"> </div>
</div>

<div class="form_item">
  <div class="form_element cf_textbox">
    <label class="cf_label">option2field2</label>
    <input class="cf_inputbox" maxlength="150" size="30" title="" id="text_5" name="text_5" type="text" />
  
  </div>
  <div class="clear"> </div>
</div>

</div>
///////////////////////////////////////////////////////////////////////////////////////////////////////////

Hi nmclaughlin,

Here's a working example of your code. All of this goes in the Form HTML box:

<?php
$script = "
  window.addEvent('domready', function() {
    var selectDiv = function() {
      if ( $('radio00').checked == true ) {
        $('options1').setStyle('display', 'block');
        $('options2').setStyle('display', 'none');
      }
      if ( $('radio01').checked == true ) {
        $('options1').setStyle('display', 'none');
        $('options2').setStyle('display', 'block');
      }
    };
    $('radio00').addEvent('change', selectDiv);
    $('radio01').addEvent('change', selectDiv);
  });
";
$doc =& JFactory::getDocument();
$doc->addScriptDeclaration($script);
?>
<div class="form_item" >
  <div class="form_element cf_radiobutton">
    <label class="cf_label">Select option</label>
    <div class="float_left">
      <input value="Options 1" title="" class="radio" id="radio00" name="radio0" type="radio" />
      <label for="radio00" class="radio_label">Options 1</label>
      <br />
      <input value="Options 2" title="" class="radio" id="radio01" name="radio0" type="radio" />
      <label for="radio01" class="radio_label">Options 2</label>
      <br />
   </div>
  </div>
  <div class="clear"> </div>
</div>

<div id="options1" style='display:none;'>
  <div>// These fields appear if option 1 is selected //</div>
  <div class="form_item">
    <div class="form_element cf_text"> <span class="cf_text">If Options 1 selected</span> </div>
    <div class="clear"> </div>
  </div>
  <div class="form_item">
    <div class="form_element cf_textbox">
      <label class="cf_label">option1field1</label>
      <input class="cf_inputbox" maxlength="150" size="30" title="" id="text_2" name="text_2" type="text" />
    </div>
  <div class="clear"> </div>
  </div>

  <div class="form_item">
    <div class="form_element cf_textbox">
      <label class="cf_label">option1field2</label>
      <input class="cf_inputbox" maxlength="150" size="30" title="" id="text_3" name="text_3" type="text" />
    </div>
    <div class="clear"> </div>
  </div>
  <div>//////////////////////////////////////////</div>
</div>

<div id="options2" style='display:none;' >
  <div>// These fields appear if option 2 is selected //</div>
  <div class="form_item">
    <div class="form_element cf_text"> <span class="cf_text">If Options 2 selected</span> </div>
    <div class="clear"> </div>
  </div>

  <div class="form_item">
    <div class="form_element cf_textbox">
      <label class="cf_label">option2field1</label>
      <input class="cf_inputbox" maxlength="150" size="30" title="" id="text_4" name="text_4" type="text" />
    </div>
    <div class="clear"> </div>
  </div>

  <div class="form_item">
    <div class="form_element cf_textbox">
      <label class="cf_label">option2field2</label>
      <input class="cf_inputbox" maxlength="150" size="30" title="" id="text_5" name="text_5" type="text" />
    </div>
    <div class="clear"> </div>
  </div>
  <div>//////////////////////////////////////////</div>
</div>

This works fine - it uses MooTools syntax so needs Validation turned on in the Validation tab to load the library.

The code hides and displays the Option divs as the radio buttons are clicked. This is pretty basic and might need tweaking to work with validation . . .

Bob

PS The $script . . . window.addEvent . . . code is a wrapper to load the core script into the page header and execute it after the page load is complete.

Thanks heaps i was able to adapt that to work,

I can add extra if statements for more check boxes. the problem is with check boxes if they uncheck it i want the fields to disappear, easily done with checked == false instead of true but if i have more then 2 if statements it will only run the last 2.

Can you shed some light here?

Thanks

Hi nmclaughlin,

for every new if statement you need to add extra messages like this:

$('radio01').addEvent('change', selectDiv);

changing the radio name of course!

regards,
Max

Hi Bob/Max,

Excellent and very clear code example – for radio buttons.
Is the same principle also applicable to dropdowns? If so, please demonstrate by example along the lines set below.
Currently I am working on a member list for an orchestra. They require that for each member both instrument (e.g. Violin, Trumpet,..) and instrument group (e.g. Wood, First violins) are specified. Unfortunately one instrument can occur in more groups, otherwise I could have solved the problem differently.
For both instrument groups and instruments I would like to present a dropdown in the form. For both data comes from a previously built DB-table describing the orchestra (and which may change over time!). But once the user has specified the group, the choice in the instrument dropdown should be delimited to the instruments in that group. Initially the full instrument list can be shown.
In pseudo code:

<div class="form_item">
  <div class="form_element cf_dropdown">
    <label class="cf_label" style="width: 150px;" >Instrument group</label>
    <select class="cf_inputbox validate-selection" name="instr_group” …. >
      <?php
      $mydb =& JFactory::getDBO();
      // Obtain the list of instrument groups and create the dropdown
      ?>
    </select>
  </div>
</div>

<div class="form_item">
  <div class="form_element cf_dropdown">
    <label class="cf_label" style="width: 150px;" >Instrument</label>
    <?php
    $mydb =& JFactory::getDBO();
    // Obtain the list of instruments and create the dropdown
    ?>
  </div>
</div>

Adding change and domready events seems obvious in itself, and it works, but how can I use the selected value? I could try to put it into a PHP-variable to aid the options construction for the second dropdown, something like

    $SelectedGroup = $('instr_group’).value; 

in the addEvent function, but that seems incorrect Javascript, as the event is no longer executed after this statement has been added (I know absolutely nothing about JS). Or is a different technique required? I could make a <div> for each group, but even than I don't know how to use the selection result in guiding the setStyle statements.
Would highly appreciate your advice.

Regards,
Peter

Hi,

still searching for solutions myself as well.
Please consider in your answer that I do need PHP code to obtain (or even show) the correct dropdown list elements, and unfortunately PHP code inside a <div> is executed, independent of the 'block' or 'none' display style. The latter discovery made me rather unhappy about this problem...

Regards,
Peter

Hi Peter,

There are some important distinctions here.

PHP runs on your webserver server and creates the HTML + CSS + Javascript that will be interpreted and displayed by the browser (the client). PHP never runs in the browser - all the PHP work is done first. So the CSS display block or none will have no effect.

PHP knows nothing about 'divs' or 'css' and will pay them and their settings no attention unless it is specifically programmed to do so (and that would be tricky).

Once the code is displayed in the browser all the interaction is done with JavaScript. JavaScript does (to some degree) understand CSS & HTML and can tell if divs are displayed or not.

JavaScript also detects Events (when the user takes a particular action) and can respond to them.

You need to detect the 'onChange' event for the Group dropdown and then change the options displayed for the instrument drop-down.

You could use an AJAX lookup to go back to the database and recover a new set of options - but given that this is still a fairly small list I think a better solution would be to load a set of JavaScript arrays into the page (using PHP on the server) then turn the drop-down options on and off depending on the selection in the Groups drop-down.

There was a similar thread to this a while back (on training program dates) where we had some problems re-showing the value on the second drop-down on re-showing the form but I think those were solved in the end.

Bob

Hi Bob,

thank you for the fast and clear reply I now understand the sequence of events, what always helps.
I seem to be condemned to dive into JavaScript; ok, so be it.

Regards,
Peter

Hi Bob,

creating Javascript arrays of instruments/group appeared rather easy after all.
Using one of these in dropdown rendering seems easy as well. In the <div class="form_element cf_dropdown"> element I inserted at the proper place (i.e. after the initial <option>):

<div id="optGrp1" style="display: block;">
<script language="Javascript" type="text/javascript">
<!--
// Skipping a dummy element, included for easy array creation purposes
for (x = 1; x < grpGrp1.length; x++) {
  var instr = grpGrp1[x];
  document.write("<option value='" + instr + "'>" + instr + "</option>");
}
//-->
</script>
</div>

Works perfectly, but I found that after (manually) changing 'block' into 'none' in the style element, the JS code is still executed. More of these blocks simply extend the options list, whatever value 'display' has.
Do I still not understand the correct sequence of things, did I make an error, or what else?
I was not able to find the "other thread" you mentioned using your keywords.

Regards,
Peter

Hi Peter,

I didn't read the whole discussion but based on your last post you may add an if statement to check the display style ? I prefer that you create a new option element and inject it in place too instead of using document.write

Regards,
Max

Hi Max,

thanks for your answer, but you're talking too fast for me, or at least I am a slow JS-listener. The JS code from my post might suggest I'm a JS expert, but I only copied some JS from a booklet and made some reasonable modifications (I know several other programming languages).
On both of your sentences I wonder: How?

Regards,
Peter

Hi Max,

guided by "educated guessing" (and Google) I tried getStyle and after some trial-and-error I had:

<div id="optGrp1" style="display: none;">
<script language="Javascript" type="text/javascript">
<!--
var s = $('optGrp1').getStyle('display');
// Skipping a dummy element, included for easy array creation purposes
for (x = 1; x < grpGrp1.length; x++) {
  var instr = grpGrp1[x];
  document.write("<option value='" + instr + "'>" + instr + ":" + s + "</option>");
}
//-->
</script>
</div>

The value of s is "block", whatever value I specify in the <div>, so checking for it won't help...

Regards,
Peter

Hi Peter,

I think you need something like:

if(s == 'block'){
for (x = 1; x < grpGrp1.length; x++) {
  var instr = grpGrp1[x];
  document.write("<option value='" + instr + "'>" + instr + ":" + s + "</option>");
}
}

check the new if switch statement!

Max

Hi Max,

as I said:

The value of s is "block", whatever value I specify in the <div>, so checking for it won't help...

Therefore the code below DOES produce the options.

<div id="optGrp1" style="display: none;">
<script language="Javascript" type="text/javascript">
<!--
var s = $('optGrp1').getStyle('display');
if(s == 'block'){
  for (x = 1; x < grpGrp1.length; x++) {
    var instr = grpGrp1[x];
    document.write("<option value='" + instr + "'>" + instr + ":" + s + "</option>");
  }
}
//-->
</script>
</div>

The problem seems to be, why the retrieved 'display' value is 'block' all the time. The above code is placed in "Form HTML", as it does create form elements. Does that matter?

Regards,
Peter

Hi peter49,

It would help to understand this if I could see what grpGrp1 is - it's not defined in the snippets you've posted.

I also suspect that you are still not clear about the way JavaScript works. Scripts are not executed in the order the page is written*, typically they are triggered by some user event on the page. I'm not clear what user event would trigger this change but presumably it would be a change in some other field.

Bob

* Except that code will be executed as the page loads unless it is contained in a function. Running Javascript on a part-loaded page is a risky venture as you can't be sure that the code you want to affect is loaded; that is why you will usually see Javascript wrapped in functions tied to the 'onLoad' or 'onDomready' events.

Hi,

The value of s is "block", whatever value I specify in the <div>, so checking for it won't help...

are you sure that mootools is loaded correctly then ? the getstyle should get the style attribute correctly of course and the syntax is fine!

Bob, its optGrp1 here:

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

Regards
Max

Hi,

yes, mootools was loaded, this behaviour was observed whether validation was explicitly enabled under the "Validation" tab or not. For me the solution of this problem is more academic now, as I no longer need this type of JS to solve my problems. As Bob pointed out, it is risky to have JS on a possibly incompletely loaded page. It might however contribute to a better understanding of mootools, live validation and so on. Probably it is related to the discussion in http://www.chronoengine.com/forums.html?cont=posts&f=5&t=14165&start=30, where the question no longer is whether conditional forms can be created, but whether is is possible to have validation requirements in (temporarily) hidden <div> blocks.
For me this->isClosed

Regards,
Peter

Trying to get this estimator form to function within chronoforms so I can use the email and datastorage functions. I pasted the html code part of the form in the html code section and put the java script (excluding <script> tags) in the javascript area, but it doesn't work. It works fine when it is all together and I just wrap the script within joomla, but can't get it working in Chronoforms. Is there something else that needs to be done outside of seperating the html and javascript and placing it in the appropriate ares of Chronoforms?

Here is the code I'm trying to place in chronoforms attached:

Hi jholstein,

Hmmm . . . this may be the first time in a couple of years when there is a form that isn't going to be suitable for ChronoForms. It could be done but may not be worth the effort.

There are 4000 lines of code here including several separate JaveScript snippets; a couple of external links and several hundred lines of base-64 encoded who knows what.

All that said I think that the main problem is that ChronoForms changes the name of the form from 'formc' to 'ChronoContact_formc' and so all the references to document.formc. in the JavaScript need to be changed to document.ChronoContact_formc.

Here are the steps I'd go through.

a) Copy and paste all the css into the ChronoForms CSS box;
b) Copy and paste all the html between the <form . . .> and </form> tags - but not the tags themselves - into the Form HTML box.
c) Copy and paste the JavaScript in the page header into a text editor and do the search and replace, then re-paste it into the JavaScript box.
d) Check the two JavaScript snippets inside the form html and change the names there too.
e) Cross my fingers and start to debug the results.

Bob

Wow Bob...thanks for checking that out and responding. I was asking a lot by posting that and wasn't expecting much of a useful response, so thanks. Tried your steps and alas...I can't get it working. It was generated from an excel spreadsheet program and I thought it would be enough of a framework that I could figure the rest out, but I think there is some auto-generated opposing code in there that is interfering with it functioning correctly.

I do appreciate you taking the time to review my problem though. thanks again

Well, I got everything working as far as emailing the results and everything from your instruction Bob. But the javascript calculations aren't quite working yet. I wanted to clarify one of your suggested steps:

d) Check the two JavaScript snippets inside the form html and change the names there too.

Do you mean leave the Javascript that appear within the form html and only move the opening javascript over to the java code window?

Hi jholstein,

I don't remember clearly now but I think that the two snippets in the code may have included some PHP to set variable values in which case I'd leave them where they are but change the document.form_name bit

Bob

Wondering Bob, do you have time to do any custom development? I think I'm close to getting this working, but I'm just not knowledgable enough with java script to figure some things out. Let me know if so, pretty sure I can ding the client for enough to cover a 3 site chronoforms license and compensation for your time. thanks

Hi jholstein,

Yes I do custom development (as does Max). Right now I have four or five projects on my plate so I can't promise anything instant but if you want to email or PM me we can talk about what you need.

Bob

Anyone have problems getting the data to submit into the database?

Hi Kixsian,

Does your question have anything to do with Conditional Forms? If not, I'll separate it out.

Please check the Database tutorial from the Tutorials link above.

Bob

Hi there

The solution provided earlier in this thread contained a script that was applicable to radio buttons. I will require one for a select dropdown (and no calling from the database to complicate things). What's the equivalent script for select fields as compared to the radio fields example below?

<?php
    $script = "
      window.addEvent('domready', function() {
        var selectDiv = function() {
          if ( $('radio00').checked == true ) {
            $('options1').setStyle('display', 'none');
          }
          if ( $('radio01').checked == true ) {
            $('options1').setStyle('display', 'block');
          }


        };
        $('radio00').addEvent('change', selectDiv);
        $('radio01').addEvent('change', selectDiv);
      });
    ";
    $doc =& JFactory::getDocument();
    $doc->addScriptDeclaration($script);
    ?>

Hi ctdesign87,

Just so that I understand you want to hide/display some other inputs depending on the value of a Select drop-down?

How are the inputs related to the drop-down values?

Bob

Hi there, I followed the instructions and made my conditional form ok...

<?php
$script = "
  window.addEvent('domready', function() {
    var selectDiv = function() {
      if ( $('radio30').checked == true ) {
        $('options1').setStyle('display', 'block');
        $('options2').setStyle('display', 'none');
      }
      if ( $('radio31').checked == true ) {
        $('options1').setStyle('display', 'none');
        $('options2').setStyle('display', 'block');
      }
    };
    $('radio30').addEvent('change', selectDiv);
    $('radio31').addEvent('change', selectDiv);
  });
";
$doc =& JFactory::getDocument();
$doc->addScriptDeclaration($script);
?>
<div class="form_item" >
  <div class="form_element cf_radiobutton">
    <label class="cf_label" style="width: 150px;">Purchased from</label>
    <div class="float_left">
      <input value="COSMED" title="" class="radio" id="radio30" name="radio3" type="radio" />
      <label for="radio30" class="radio_label">Directly from COSMED</label>
      <br />
      <input value="Other" title="" class="radio" id="radio31" name="radio3" type="radio" />
      <label for="radio31" class="radio_label">Other</label>
      <br />
   </div>
  </div>
  <div class="clear"> </div>
</div>

<div id="options1" style='display:none;'>
  <div></div>
  <div class="form_item">
    <div class="form_element cf_text"> <span class="cf_text"></span> </div>
    <div class="clear"> </div>
  </div>
  
</div>

<div id="options2" style='display:none;' >
  <div></div>
  <div class="form_item">
    <div class="form_element cf_text"> <span class="cf_text"></span> </div>
    <div class="clear"> </div>
  </div>

  <div class="form_item">
    <div class="form_element cf_textbox">
      <label class="cf_label">Please specify from who:</label>
      <input class="cf_inputbox" maxlength="150" size="30" title="" id="text_25" name="text_25" type="text" />
    </div>
    <div class="clear"> </div>
  </div>

I have the following problem. On Firefox the form works fine....but on Internet Explorer when I select Other it does not show immediately the text field (Please specify etc etc) but it shows it only when I click on the form... Could anybody give me an explanation and solution ?

Hi petermazzi,

Please change these two lines - I've replaced 'change' with 'click':

    $('radio30').addEvent('click', selectDiv);
    $('radio31').addEvent('click', selectDiv);

IE doesn't activate the onChange event until you click something else so ti doesn't work well here.

Bob



Bob

It works !!! Perfect !!! Thank you very much !!!

Hi there, I was wondering if it is possible to create conditional forms with Drop Down Menu, instead of Radio Button. The problem that I have more than 10 different options (my company products) and Radio Button does not allow me more thant 10 choices, while with Drop Down Menu there is no limit on the options.
Looking forward to receive your kind feedback

Hi petermazzi,

Yes sure, except that the code would switch on the value of the dropdown instead of the checked radio button.

Bob

Do you have by any chance an example ? Thanks a lot in advance...

I tried but it gives an error... I would appreciate if anybody can direct me to the correct programming...

Please change these two lines - I've replaced 'change' with 'click':

    $('radio30').addEvent('click', selectDiv);
    $('radio31').addEvent('click', selectDiv);

IE doesn't activate the onChange event until you click something else so ti doesn't work well here.

Just chiming in here - but I too ran into IE issues (as usual!) using the hide the div code from the beginning of this thread

- Disabling validation for that part of the form solved the mootools errors and now it works fine in IE8.

Hi,

I've written a tutorial on creating Conditional ChronoForms using scripts from QuiksMode.org.

Please see this post for more information.

Bob

I realize this thread is ancient, but I'd like to accomplish the same thing. Unfortunately, I've only created forms with the wizard and I don't know where to put the code exactly. Also, I don't think this approach uses containers and maybe that's a better approach? My need is simple:

I have a radio button set that asks the user's marital status if it's single, then the container with the spouse's first and last name fields should remain hidden. If they select married, then the container should become visible.

Any help in how to do this through the wizard?

Hi csteele,

Please see this FAQ which has some similar code that could be adapted to work with a radio button and more than one input.

Bob