Dynamic form

Hi everybody

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

I have a DropDown with 3 value
val_1
val_2
val_3

after this dropdown, I have 4 textbox
TB_1
TB_2
TB_3
TB_4

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?

Regards
Jérôme

Hi

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?

Regards
Jérôme

no idea?
😢

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.

Bob

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" />
  Bathroom 
  <input type="checkbox" name="1st_Kitchen" value="Yes" />
  Kitchen 
  <input type="checkbox" name="1st_Living_room" value="Yes" />
  Living room
</div>
<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>

    </select>
    <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>
  <div class="cfclear"> </div>
</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>
  <div class="cfclear"> </div>
</div>

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

Regards
Jérôme

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"){
$('text_box_id_1').setStyle.display('block');//show
$('text_box_id_2').setStyle.display('none');//hide
$('text_box_id_3').setStyle.display('none');//hide
$('text_box_id_4').setStyle.display('none');//hide
}
}

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

Cheers
Max