Formulaire tableau avec lignes conditionnelles

**traderpierre** · 15/08/2015, 22h25

Bonjour,
Je souhaites faire apparaître ou masquer des lignes 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é :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
<!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">

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
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();
}}

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
  </script>
</head>
<body>
<form>
  <table border="1" 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">&nbsp;</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&eacute;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&egrave;que">Ch&egrave;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&eacute;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 &eacute;tablir
le ch&egrave;que &agrave; l'ordre de XXXX<br>
et l'envoyer &agrave; cette adresse XXXX</td>
      </tr>
    </tbody>
  </table>
</form>
<script type="text/javascript">

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
$("#paicbpp").hide();
$("#paivir").hide();
$("#paieck").hide();
//$("#").hide();
$("#liens").hide();

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
</script>
</body>
</html>

__________________________________________

Merci par avance pour votre aide

**01001111** · 16/08/2015, 03h05

Bonsoir, il manque la source jquery pour que ça fonctionne.
Un coup d'oeil dans la console te l'aurait dit mieux que moi.
$ fait référence à jquery, hors, il n'est pas renseigné dans ta page.

commence par télécharger jquery, mets-le dans ton environnement de test et ajoute:

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

<script type="text/javascript" src="jquery-2.1.4.min.js"></script>

dans le head de ton fichier html.

ensuite il faut faire

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
<select name="mode_paiement" id="mode_paiement"
onchange="btn_show_mode_paiement(this.value)"
class="Normal-10NoirGrasGauche">

et pas onclick sans renseigner la variable que "btn_show_mode_paiement" attend

Formulaire tableau avec lignes conditionnelles

JavaScript

Discussions similaires

Partager

Partager