Dynamic form

jnaylies 21 Jul, 2009
Hi everybody

I'm noob with chronoForm and I would like to create a dynamic form.

I have a DropDown with 3 value

after this dropdown, I have 4 textbox

If the dropDown had val_1 as value, I would like to see all TextBox
If the dropDown had val_2 or val_3 as value, I would like to see only TB_3 and TB_4

Please, could you help me to do this?

jnaylies 22 Jul, 2009

I've already post this question here but I don't think it is the right place.
As I don't know how to transfer my first question, I post it again here.

Could you help me to make a dynamic form please?

GreyHead 23 Jul, 2009
Hi Jérôme,

There isn't any easy answer to this. You need a few lines of custom JavaScript to do it. It's not difficult but I don't have time to write it for you here and now.

jnaylies 23 Jul, 2009
Hi GreyHead,

Thanks for your response.

I see in the FAQ47 a solution for a radio box that is not working when i test it.
Also, i don't know how to addapt it to a dropdown😟
<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" />
  <input type="checkbox" name="1st_Kitchen" value="Yes" />
  <input type="checkbox" name="1st_Living_room" value="Yes" />
  Living room
<br />
<input name="Submit" type="submit" />

My DropDown looks like that:
<div class="form_item">
  <div class="form_element cf_dropdown">
    <label class="cf_label" style="width: 150px;">Qualité *</label>
    <select class="cf_inputbox validate-selection" id="select_5" size="1" title="Obligatoire"  name="CQualite">
    <option value="">Sélectionner</option>
      <option value="Adhérent Jumeaux et Plus">Adhérent Jumeaux et Plus</option>
<option value="Professionnel de la santé">Professionnel de la santé</option>
<option value="Professionnel de l'éducation">Professionnel de l'éducation</option>
<option value="Autre professionnel">Autre professionnel</option>
<option value="Particulier (non adhérent)">Particulier (non adhérent)</option>

    <a class="tooltiplink" onclick="return false;"><img height="16" border="0" width="16" class="tooltipimg" alt="" src="components/com_chronocontact/css/images/tooltip.png"/></a>
				<div class="tooltipdiv">Qualité * :: Votre qualité</div>
  <div class="cfclear"> </div>

and the textbox I want to display or not
<div class="form_item">
  <div class="form_element cf_textbox">
    <label class="cf_label" style="width: 150px;">Départ. d'adhésion</label>
    <input class="cf_inputbox validate-number" maxlength="2" size="2" title="" id="text_6" name="LAssoDe" type="text" />
  <a class="tooltiplink" onclick="return false;"><img height="16" border="0" width="16" class="tooltipimg" alt="" src="components/com_chronocontact/css/images/tooltip.png"/></a>
				<div class="tooltipdiv">Départ. d'adhésion :: Numéro du département d'adhésion</div>
  <div class="cfclear"> </div>

i would like to display "Depart. d'adhésion" only when the drop down choice is "Adhérent Jumeaux et Plus"

Max_admin 27 Jul, 2009
Hi Jérôme,

I will write something quick here:

#1- you need to add onChange event for your dropdown inside the select tag like:

<select onChange="setChanges()"

#2- the setChange function should be something "similar" to this, all fields ids or values should be changed according to what you have in your code:

function setChanges(){
if($('mydropdownid').value == "value_1"){

and so on! those are only some guidelines, but with some tries I'm sure you can do it now!

ChronoForms developer...
Did you try ChronoMyAdmin for managing your Joomla database tables ?
This topic is locked and no more replies can be posted.