Forums

ChronoForms v8 is now WordPress ready, ChronoMails is out

The JED needs volunteers!

ChronoForms & JavaScript

rc
rcharles 19 Oct, 2009
Hello,

Very great product! Unfortunately, I'm encountering a problem to add a JavaScript function.
I'm gonna to explain what i would in first.

I did a form with the wizard edit of chronoforms called 'model'.
In this form, i have a dropdown with two possible answers : 'Oui' or 'Non'.
If it's 'Oui', i would like to display 6 textBoxs, that they are hidden for the moment.
If it's 'Non', i would like to display 2 others textBoxs, that they are hidden for the moment.

So, I must get the value of the dropdown, test it, and display the correct textBoxs.

Actually, it's my HTML code, it works:
<div class="form_item">
  <div class="form_element cf_heading">
    <h1 class="cf_text">Modélisation</h1>
  </div>
  <div class="cfclear"> </div>
</div>

<div class="form_item">
  <div class="form_element cf_textbox">
    <label class="cf_label" style="width: 150px;">Nom            </label>
    <input class="cf_inputbox required validate-alpha" maxlength="150" size="30" title="Entrez votre nom ici" id="text_2" name="text_2" type="text" />
  
  </div>
  <div class="cfclear"> </div>
</div>

<div class="form_item">
  <div class="form_element cf_textbox">
    <label class="cf_label" style="width: 150px;">Prénom</label>
    <input class="cf_inputbox required validate-alpha" maxlength="150" size="30" title="Entrez votre prénom ici" id="text_3" name="text_3" type="text" />
  
  </div>
  <div class="cfclear"> </div>
</div>

<div class="form_item">
  <div class="form_element cf_textbox">
    <label class="cf_label" style="width: 150px;">Employeur</label>
    <input class="cf_inputbox" maxlength="150" size="30" title="Entrez votre employeur ici" id="text_4" name="text_4" type="text" />
  
  </div>
  <div class="cfclear"> </div>
</div>

<div class="form_item">
  <div class="form_element cf_textbox">
    <label class="cf_label" style="width: 150px;">Fonction</label>
    <input class="cf_inputbox" maxlength="150" size="30" title="Entrez votre fonction ici" id="text_5" name="text_5" type="text" />
  
  </div>
  <div class="cfclear"> </div>
</div>

<div class="form_item">
  <div class="form_element cf_textbox">
    <label class="cf_label" style="width: 150px;">Adresse e-mail</label>
    <input class="cf_inputbox required validate-email" maxlength="150" size="30" title="Entrez votre adresse e-mail ici" id="text_6" name="text_6" type="text" />
  
  </div>
  <div class="cfclear"> </div>
</div>

<div class="form_item">
  <div class="form_element cf_textbox">
    <label class="cf_label" style="width: 150px;">Téléphone</label>
    <input class="cf_inputbox validate-digits" maxlength="150" size="30" title="Entrez votre téléphone ici" id="text_7" name="text_7" type="text" />
  
  </div>
  <div class="cfclear"> </div>
</div>

<div id="ouinon" class="form_item">
  <div class="form_element cf_dropdown">
    <label class="cf_label" style="width: 650px;">Souhaitez-vous saisir le plan d'investissement prévisionnel année par année ?</label>
    <select class="cf_inputbox validate-selection" id="select_11" size="1" title="Vous n'avez pas répondu à la question" name="select_11" onChange="affiche()">
    <option value="">Oui ou Non</option>
      <option value="Oui">Oui</option>
<option value="Non">Non</option>

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

<div id="oui" Style="display:none" class="form_item">
  <div class="form_element cf_text"> <span class="cf_text">Veuillez saisir le plan d'ivestissement de  2009 à 2014</span> </div>
  <div class="cfclear"> </div>
</div>

<div id="non" Style="display:none" class="form_item">
  <div class="form_element cf_text"> <span class="cf_text">Veuillez saisir le plan d'ivestissement 2009 et le taux d'augmentation annuel des dépenses</span> </div>
  <div class="cfclear"> </div>
</div>

<div id="2009" Style="display:none" class="form_item">
  <div class="form_element cf_textbox">
    <label class="cf_label" style="width: 150px;">Plan d'investissement 2009</label>
    <input class="cf_inputbox validate-number" maxlength="150" size="30" title="Vous n'avez pas entré le plan d'investissement 2009" id="text_12" name="text_12" type="text" />
  
  </div>
  <div class="cfclear"> </div>
</div>

<div id="2010" Style="display:none" class="form_item">
  <div class="form_element cf_textbox">
    <label class="cf_label" style="width: 150px;">Plan d'investissement 2010</label>
    <input class="cf_inputbox validate-number" maxlength="150" size="30" title="Vous n'avez pas entré le plan d'investissement 2010" id="text_13" name="text_13" type="text" />
  
  </div>
  <div class="cfclear"> </div>
</div>

<div id="2011" Style="display:none" class="form_item">
  <div class="form_element cf_textbox">
    <label class="cf_label" style="width: 150px;">Plan d'ivestissement 2011</label>
    <input class="cf_inputbox validate-number" maxlength="150" size="30" title="Vous n'avez pas entré le plan d'investissement 2011" id="text_17" name="text_17" type="text" />
  
  </div>
  <div class="cfclear"> </div>
</div>

<div id="2012" Style="display:none" class="form_item">
  <div class="form_element cf_textbox">
    <label class="cf_label" style="width: 150px;">Plan d'ivestissement 2012</label>
    <input class="cf_inputbox validate-number" maxlength="150" size="30" title="Vous n'avez pas entré le plan d'investissement 2012" id="text_18" name="text_18" type="text" />
  
  </div>
  <div class="cfclear"> </div>
</div>

<div id="2013" Style="display:none" class="form_item">
  <div class="form_element cf_textbox">
    <label class="cf_label" style="width: 150px;">Plan d'investissement 2013</label>
    <input class="cf_inputbox validate-number" maxlength="150" size="30" title="Vous n'avez pas entré le plan d'investissement 2013" id="text_19" name="text_19" type="text" />
  
  </div>
  <div class="cfclear"> </div>
</div>

<div id="2014" Style="display:none" class="form_item">
  <div class="form_element cf_textbox">
    <label class="cf_label" style="width: 150px;">Plan d'ivestissement 2014</label>
    <input class="cf_inputbox validate-number" maxlength="150" size="30" title="Vous n'avez pas entré le plan d'investissement 2014" id="text_20" name="text_20" type="text" />
  
  </div>
  <div class="cfclear"> </div>
</div>

<div id="taux" Style="display:none" class="form_item">
  <div class="form_element cf_textbox">
    <label class="cf_label" style="width: 150px;">Taux d'augmentation annuel des dépenses</label>
    <input class="cf_inputbox validate-number" maxlength="150" size="30" title="Vous n'avez pas entré le taux d'augmentation annuel des dépenses" id="text_21" name="text_21" type="text" />
  
  </div>
  <div class="cfclear"> </div>
</div>

<div class="form_item">
  <div class="form_element cf_textarea">
    <label class="cf_label" style="width: 650px;">Afin de pouvoir effectuer la simulation et la comparaison entre l'option loi MOP (Maîtrise d'ouvrage Publique) et le recours à un mode de commande publique complexe (PPP), nous vous prions de nous donner : le montant du ou des projets d'investissement qui pourraient être réalisés sous forme de contrat de partenariat (PPP) et l'année au cours de laquelle vous projetez d'effectuer ceux-ci :</label>
    <textarea class="cf_inputbox required" rows="10" id="text_8" title="Entrez l'information demandée" cols="100" name="text_8"></textarea>
    
  </div>
  <div class="cfclear"> </div>
</div>

<div class="form_item">
  <div class="form_element cf_textarea">
    <label class="cf_label" style="width: 150px;">Commentaire</label>
    <textarea class="cf_inputbox" rows="7" id="text_16" title="" cols="100" name="text_16"></textarea>
    
  </div>
  <div class="cfclear"> </div>
</div>

<div class="form_item">
  <div class="form_element cf_captcha">
    <label class="cf_label" style="width: 150px;">Anti-Spam</label>
    <span>{imageverification}</span> 
    
    </div>
  <div class="cfclear"> </div>
</div>

<div class="form_item">
  <div class="form_element cf_button">
    <input value="Envoyer" name="button_10" type="submit" />
  </div>
  <div class="cfclear"> </div>
</div>


And this is my JavaScript Code (i'm a beginner) :
function affiche() {

var form =  document.ChronoContact.model;
var texte;

texte=form.getElementById('ouinon').options[form.getElementById('ouinon').selectedIndex].text;

if (texte=="Oui") {
form.getElementById('oui').style.display = 'block';
form.getElementById('2009').style.display = 'block';
form.getElementById('2010').style.display = 'block';
form.getElementById('2011').style.display = 'block';
form.getElementById('2012').style.display = 'block';
form.getElementById('2013').style.display = 'block';
form.getElementById('2014').style.display = 'block';
}
else {
if (texte=="Non") {
form.getElementById('non').style.display = 'block';
form.getElementById('2009').style.display = 'block';
form.getElementById('taux').style.display = 'block';
}
}

}


And on the general menu when you edit your form, in core/view form settings, i put 'yes' for this option : Load Chronoforms CSS/JS Files?.

But my JavaScript Code doesn't work and i don't know how to fix it.
So i need some help.
Thanks.

PS : Sorry for my poor english.
Gr
GreyHead 19 Oct, 2009
Hi rcharles,

I think you have the form id wrong - it should be 
var form =  document.ChronoContact_model;


Bob

PS I usually prefer to use the shorter MooTools syntax of 
var texte = $('ouinon').value;
From memory but I think it's OK
rc
rcharles 20 Oct, 2009
Hi Bob,

It already doesn't work.
It looks like that JavaScript Code doesn't work, but the HTML Code works.

Another idea ?

Charles.
rc
rcharles 26 Oct, 2009
Is there any bug on ChronoForms ?
Or is there any error on my code ?

Thanks to help me.

Charles.
rc
rcharles 26 Oct, 2009
I've juste fixed the error.
This is the solution.

HTML Code:
<div id="ouinon" class="form_item">
  <div class="form_element cf_dropdown">
    <label class="cf_label" style="width: 650px;">Souhaitez-vous saisir le plan d'investissement prévisionnel année par année ?</label>
    <select class="cf_inputbox validate-selection" id="select_11" size="1" title="Vous n'avez pas répondu à la question" name="select_11" onChange="affiche(this.value)">
    <option value="">Oui ou Non</option>
      <option value="Oui">Oui</option>
<option value="Non">Non</option>

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


Javascript Code:
function affiche(texte) {

var form =  document.ChronoContact_model;

if (texte=="Oui") {
form.getElementById('oui').style.display = 'block';
form.getElementById('non').style.display = 'none';
form.getElementById('2009').style.display = 'block';
form.getElementById('2010').style.display = 'block';
form.getElementById('2011').style.display = 'block';
form.getElementById('2012').style.display = 'block';
form.getElementById('2013').style.display = 'block';
form.getElementById('2014').style.display = 'block';
form.getElementById('taux').style.display = 'none';
}
else {
if (texte=="Non") {
form.getElementById('oui').style.display = 'none';
form.getElementById('non').style.display = 'block';
form.getElementById('2009').style.display = 'block';
form.getElementById('2010').style.display = 'none';
form.getElementById('2011').style.display = 'none';
form.getElementById('2012').style.display = 'none';
form.getElementById('2013').style.display = 'none';
form.getElementById('2014').style.display = 'none';
form.getElementById('taux').style.display = 'block';
}
}

}


Thanks for your help.
Gr
GreyHead 26 Oct, 2009
Hi Charles,

Yes, there are several errors in your JavaScript. I've just spent rather too long trying to debug it and failed (I get a mysterious FireBug error that I can't resolve).

I suggest that you start out with a very simple version of your form and build your script up step by step.

One fundamental problem is that you are trying to get a value of the input you have called 'ouinon' but actually ouinon is a div wrapping the input.

Bob
rc
Gr
GreyHead 27 Oct, 2009
Hi Charles,

Excellent, out posts yesterday crossed. I hadn't seen that you had found a fix when I made my post - so I was referring to your earlier code.

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