Formulaire web avec champs conditionnels

Résolu/Fermé

traderpierre Messages postés 291 Date d'inscription mercredi 11 octobre 2006 Statut Membre Dernière intervention 6 janvier 2024 - Modifié par jordane45 le 16/08/2015 à 01:55
traderpierre Messages postés 291 Date d'inscription mercredi 11 octobre 2006 Statut Membre Dernière intervention 6 janvier 2024 - 17 août 2015 à 17:28

Bonjour,
Je souhaites faire apparaître ou masquer des lignez d'un tableau de formulaire en fonction du choix d'une option de paiement dans champs de type menu dans lequel j'ai incorporé le comportement onClik qui renvoit sur la fonction développée dans le javascript du head.
+1 autre javascript fin de formulaire qui devrait faire diparaître les lignes en question.

Voici les code javascript et body HTML succinct concerné :

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
  <meta http-equiv="Content-Type"
 content="text/html; charset=utf-8">
  <title>Formulaire avec lignes conditionnelles</title>
  <script type="text/javascript">
function btn_show_mode_paiement(choix_select){
if (choix_select=='Carte Bancaire ou PayPal') {
$("#paicbpp").show();
}
else {
$("#paicbpp").hide();
}
if (choix_select=='Virement') {
$("#paivir").show();
}
else {
$("#paivir").hide();
}
if (choix_select=='Chèque') {
$("#paieck").show();
}
else {
$("#paieck").hide();
}}
  </script>
</head>
<body>
<form>
  <table border="0" cellpadding="3" cellspacing="0"
 width="500">
    <tbody>
      <tr>
        <td class="Normal-10NoirGrasDroite" align="right"
 width="208">Mode paiment</td>
        <td class="Normal-10RougeGrasCentre" width="10"> </td>
        <td class="Normal-9NoirGauche" width="280"><span
 id="spryselect3">
        <select name="mode_paiement" id="mode_paiement"
 onclick="btn_show_mode_paiement()"
 class="Normal-10NoirGrasGauche">
        <option selected="selected">Sélectionnez
votre mode de paiement</option>
        <option value="Carte Bancaire ou PayPal">Carte
Bancaire ou PayPal</option>
        <option value="Virement">Virement Bancaire</option>
        <option value="Chèque">Chèque</option>
        </select>
        </span></td>
      </tr>
      <tr id="paicbpp">
        <td class="Normal-10NoirGrasCentre" colspan="3"
 align="center" valign="middle">ici futur formulaire
de paiement PayPal et carte de crédit</td>
      </tr>
      <tr id="paivir">
        <td class="Normal-10NoirGrasCentre" colspan="3"
 align="center" valign="middle">Ici renseignement RIB</td>
      </tr>
      <tr id="paieck">
        <td class="Normal-10NoirGrasCentre" colspan="3"
 align="center" valign="middle">Ici établir
le chèque à l'ordre de XXXX<br>
et l'envoyer à cette adresse XXXX</td>
      </tr>
    </tbody>
  </table>
</form>
<script type="text/javascript">
$("#paicbpp").hide();
$("#paivir").hide();
$("#paieck").hide();
//$("#").hide();
$("#liens").hide();
</script>
</body>
</html>

_____________________________________

Pouvez-vous m'aider ???

Merci par avance

EDIT : Ajout des balises de code. (la coloration syntaxique )
Explication disponible ici : https://codes-sources.commentcamarche.net/faq/10686-le-nouveau-codes-sources-comment-ca-marche#balises-code

Merci d'y penser à l'avenir.

A voir également:

Formulaire web avec champs conditionnels
Instagram web - Guide
Traduire une page web - Guide
Web office - Guide
Capture web - Guide
Adresse web - Guide

4 réponses

Réponse 1 / 4

jordane45 Messages postés 38138 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 17 avril 2024 4 649
Modifié par jordane45 le 16/08/2015 à 02:03

Bonjour,

Sur un SELECT ... ce n'est pas ONCLICK qu'on utilise .. mais ONCHANGE
https://www.w3schools.com/jsref/event_onchange.asp

De plus... je vois que tu utilises la syntaxe de JQUERY.... hors... je ne vois nul part dans ton code.. son import....

NB : Pour poster du code sur le forum.. merci d'utiliser la coloration syntaxique (les balises de code).
Explications disponibles ici : https://codes-sources.commentcamarche.net/faq/10686-le-nouveau-codes-sources-comment-ca-marche#balises-code

.
Cordialement,
Jordane

Réponse 2 / 4

traderpierre Messages postés 291 Date d'inscription mercredi 11 octobre 2006 Statut Membre Dernière intervention 6 janvier 2024 6
16 août 2015 à 17:15

Bonjour,

Merci pour ta réponse.

Avec onchange c'est idem, ça ne fonctionne pas !!!

De plus dans le code fourni il n'est fait aucune mention de la syntaxe de jQuery, je ne vois pas où tu as trouvé cela ???....

Réponse 3 / 4

jordane45 Messages postés 38138 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 17 avril 2024 4 649
16 août 2015 à 19:00

De plus dans le code fourni il n'est fait aucune mention de la syntaxe de jQuery, je ne vois pas où tu as trouvé cela ???....

Ben... en lisant le code tout simplement....

Quand on regarde les instructions utilisées .... il ne peut s'agir que de JQUERY... ce code n'est pas écrit en "pur" javascript !

Avec onchange c'est idem, ça ne fonctionne pas !!!

( Voir le point précédent concernant JQUERY)
Et donc... Normal que ça ne fonctionne pas !

Il te faut donc :
- Soit Inclure JQUERY à ta page
- Soit modifier le code pour le faire en "pur" javascript

jordane45 Messages postés 38138 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 17 avril 2024 4 649
16 août 2015 à 19:10

Voici ton code transformé en "pur" javascript

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
  <meta http-equiv="Content-Type"
 content="text/html; charset=utf-8">
  <title>Formulaire avec lignes conditionnelles</title>
</head>
<body>
<form>
  <table border="0" cellpadding="3" cellspacing="0"
 width="500">
    <tbody>
      <tr>
        <td class="Normal-10NoirGrasDroite" align="right" width="208">Mode paiment</td>
        <td class="Normal-10RougeGrasCentre" width="10"> </td>
        <td class="Normal-9NoirGauche" width="280">
	  <span id="spryselect3">
	   <select name="mode_paiement" id="mode_paiement" onchange="btn_show_mode_paiement(this.value)" class="Normal-10NoirGrasGauche">
            <option selected="selected">Sélectionnez votre mode de paiement</option>
            <option value="Carte Bancaire ou PayPal">Carte Bancaire ou PayPal</option>
            <option value="Virement">Virement Bancaire</option>
            <option value="Chèque">Chèque</option>
           </select>
          </span>
	</td>
      </tr>
      <tr id="paicbpp" style='display:none'>
        <td class="Normal-10NoirGrasCentre" colspan="3" align="center" valign="middle">
	  ici futur formulaire de paiement PayPal et carte de crédit
	</td>
      </tr>
      <tr id="paivir" style='display:none'>
        <td class="Normal-10NoirGrasCentre" colspan="3" align="center" valign="middle">
	  Ici renseignement RIB
	</td>
      </tr>
      <tr id="paieck" style='display:none'>
        <td class="Normal-10NoirGrasCentre" colspan="3" align="center" valign="middle">
	 Ici établir le chèque à l'ordre de XXXX<br>et l'envoyer à cette adresse XXXX
	</td>
      </tr>
    </tbody>
  </table>
</form>
</body>
</html>

 <script type="text/javascript">

function btn_show_mode_paiement(choix_select){

 var paicbpp = document.getElementById('paicbpp');
 var paivir = document.getElementById('paivir');
 var paieck = document.getElementById('paieck');
 
 //On masque les trois TR
  paicbpp.style.display='none';
  paivir.style.display='none';
  paieck.style.display='none';
  
  //En fonction de l'élément choisi..on affiche le TR
  switch(choix_select){
   case 'Carte Bancaire ou PayPal':
     paicbpp.style.display='';
   break;
   case 'Virement':
     paivir.style.display='';
   break;  
   case 'Chèque':
    paieck.style.display='';
   break; 
  }
}
  </script>

Réponse 4 / 4

traderpierre Messages postés 291 Date d'inscription mercredi 11 octobre 2006 Statut Membre Dernière intervention 6 janvier 2024 6
Modifié par jordane45 le 17/08/2015 à 00:05

Parfait, t'es super balèse
Je venait juste d'y arriver avec tes explications d'avant ce code, mais là c'est encore moins dense au niveau des lignes de code.

Juste une petite demande supplémentaire
J'ai rajouté des boutons radios et je souhaiterais que quant on clique sur autre montant, la ligne<tr id="trAutre_montant"> apparaisse uniquement uniquement dans ce cas.
et ce sera super parfait.

Merci par avance/

Voici mon nouveau code :

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
  <meta http-equiv="Content-Type"
 content="text/html; charset=utf-8">
  <title>Formulaire avec lignes conditionnelles</title>

<script type="text/javascript">
function btn_show_mode_paiement(choix_select){
var trPaypal = document.getElementById('trPaypal');
var trVirement = document.getElementById('trVirement');
var trCheque = document.getElementById('trCheque');
//On masque les trois TR
trPaypal.style.display='none';
trVirement.style.display='none';
trCheque.style.display='none';
//En fonction de l'élément choisi..on affiche le TR
switch(choix_select){
case 'Carte Bancaire ou PayPal':
trPaypal.style.display='';
break;
case 'Virement':
trVirement.style.display='';
break; case 'Chèque':
trCheque.style.display='';
break; }
}
</script>
</head>
<body>
<form>
  <table border="0" cellpadding="3" cellspacing="0"
 width="500">
    <tbody>
      <tr>
        <td align="right" valign="top">Don
        </td>
        <td></td>
        <td>
        <table width="200">
          <tbody>
            <tr>
              <td><label><input name="don"
 value="20" id="don_0" type="radio">20
€</label></td>
            </tr>
            <tr>
              <td><label><input name="don"
 value="50" id="don_1" type="radio">50
€</label></td>
            </tr>
            <tr>
              <td><label><input name="don"
 value="100" id="don_2" type="radio">100
€</label></td>
            </tr>
            <tr>
              <td><label><input name="don"
 value="0" id="don_3" onclick="btn_show_don_3("
 0="" )="" type="radio">Autre montant</label></td>
            </tr>
          </tbody>
        </table>
        </td>
      </tr>
      <tr id="trAutre_montant">
        <td align="right" valign="middle">Autre
montant</td>
        <td></td>
        <td><input name="autre_montant"
 id="id_autre_montant" size="50" maxlength="10"
 type="text"></td>
      </tr>
      <tr>
        <td align="right" width="208">Mode paiment</td>
        <td width="10"> </td>
        <td width="280">
        <span id="spryselect3">
        <select name="mode_paiement" id="mode_paiement"
 onchange="btn_show_mode_paiement(this.value)">
        <option selected="selected">Sélectionnez
votre mode de paiement</option>
        <option value="Carte Bancaire ou PayPal">Carte
Bancaire ou PayPal</option>
        <option value="Virement">Virement Bancaire</option>
        <option value="Chèque">Chèque</option>
        </select>
        </span>
        </td>
      </tr>
      <tr id="trPaypal" style="display: none;">
        <td colspan="3" align="center" valign="middle">
ici futur formulaire de paiement PayPal et carte de crédit
        </td>
      </tr>
      <tr id="trVirement" style="display: none;">
        <td colspan="3" align="center" valign="middle">
Ici renseignement RIB
        </td>
      </tr>
      <tr id="trCheque" style="display: none;">
        <td colspan="3" align="center" valign="middle">
Ici établir le chèque à l'ordre de XXXX<br>
et l'envoyer à cette adresse XXXX
        </td>
      </tr>
    </tbody>
  </table>
</form>
</body>
</html><code>

</code>

jordane45 Messages postés 38138 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 17 avril 2024 4 649
17 août 2015 à 00:08

Pour faire simple :
Tu mets un ONCLICK sur TOUS tes boutons radios ... et tu créés une nouvelle fonction qui affiche ou masque en fonction de la valeur de l'élément radio cliqué.

si value == '0'
==> Tu affiches
Sinon... tu masques

traderpierre Messages postés 291 Date d'inscription mercredi 11 octobre 2006 Statut Membre Dernière intervention 6 janvier 2024 6
17 août 2015 à 17:28

Super merci pour ton aide.
Sans toi, je n'y serais pas arrivé.
Cool :-))

Discussions similaires

Problème pour remplir formulaire PDF

Web-DL, DVDRIP-DIVX-MP et DVDSCR : ça veut dire quoi ?

Contacter le "bon coin"

Discussions similaires

Newsletters