Masquer champs du formulaire avec condition

**Rizcolas62** · 30/01/2018, 14h59

Bonjour,
Je m'explique en fonction de la situation de la personne en l'occurence ici "Célibataire"
je voudrais masquer ou griser, voir bloquer les champs du formulaire2.
pouvez vous m'aider?

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
20
21
22
23
24
25
26
27
28
<h2> Formulaire </h2>
		<FORM NAME=ajout method=GET action=ajout_ok.php>
		<!-- Formulaire1 -->
		Nom : <INPUT type=text name=nom1 autocomplete=on required>  Prénom : <INPUT type=text name=prenom1 autocomplete=on required><BR>
		Sexe : 
		<INPUT type="radio" name="sexe" value="M1" id="M1"/>
		<label for="M1">M</label>
		<INPUT type="radio" name="sexe" value="F1" id="F1"/>
		<label for="F1">F</label><BR>
		Date de naissance :
		<INPUT type="date" name="naissance1" autocomplete=on/><BR>
		Situation :
		<INPUT type="radio" name="situation" value="En Couple" id="EC"/>
		<label for="En Couple">En Couple</label>
		<INPUT type="radio" name="situation" value="Célibataire" id="C"/>
		<label for="Célibataire">Célibataire</label><BR>
 
		<!-- Formulaire2 -->
		Nom : <INPUT type=text name=nom2 autocomplete=on required>  Prénom : <INPUT type=text name=prenom2 autocomplete=on required><BR>
		Sexe : 
		<INPUT type="radio" name="sexe" value="M2" id="M2"/>
		<label for="M2">M</label>
		<INPUT type="radio" name="sexe" value="F2" id="F2"/>
		<label for="F2">F</label><BR>
		Date de naissance :
		<INPUT type="date" name="naissance2" autocomplete=on required><BR>
 
		<INPUT type=submit value="Enregistrer les modifications"><BR>

Merci d'avance

**headmax** · 30/01/2018, 15h04

Dans tes inputs rajoute l'attribut <input disabled .../>https://developer.mozilla.org/fr/doc.../Element/Input

Code javascript :

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
 
var form2_inputs = ['nom2','prenom2','sexe','naissance2'];
document.body.onload = function(){
document.getElementById('C').onclick = function() {
  console.log("click")
   if (!this.checked) {
     console.log("false")
      this.click();
        for(var i in form2_inputs){
           document.querySelector("input[name='" + form2_inputs[i] + "']").removeAttribute('disabled');
       }
   }else{
     console.log('true')
         for(var i in form2_inputs){
           var input = document.querySelector("input[name='" + form2_inputs[i] + "']").setAttribute("disabled", "");
 
 
       }
   }
};
};

**Rizcolas62** · 30/01/2018, 16h50

Ok merci !!
c'est pas plus simple en incluant du php plûtot que du javascript?

**headmax** · 30/01/2018, 17h11

En fait le javascript réagit a l’événement click côté client (son navigateur), PHP ne gère que le côté serveur le seul moyen d'avoir une interaction avec PHP c'est via une requête ajax en POST ou GET ou lors d'un rafraichissement de page sinon je vois mal un click sur un radio et un appel PHP pour prendre en compte se click se qui ne pourrait pas allé et risquerais plus d'alourdir ta page.

**Rizcolas62** · 31/01/2018, 01h07

Ok ça marche
Sauf que je n'arrive pas à chargé le javascript .
cela m'affiche ceci dans la console:
Nom : impr.jpg
Affichages : 1227
Taille : 57,4 Ko

voici mon script en entier:

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
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
45
46
47
48
49
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>an</title>
	<SCRIPT src="condition.js"></SCRIPT>
  </head>
  <body>
    <h1>an</h1>
	<h2> Avant propos </h2>
    <p><b>rr !</b><br/>
		trip
    <h2> Formulaire </h2>
		<FORM NAME=ajout method=GET action=ajout_ok.php>
		<!-- Formulaire1 -->
		Nom : 
			<INPUT type=text name=nom1 autocomplete=on required>  
		Prénom : 
			<INPUT type=text name=prenom1 autocomplete=on required><BR>
		Sexe : 
			<INPUT type="radio" name="sexe" value="M1" id="M1"/>
			<label for="M1">M</label>
			<INPUT type="radio" name="sexe" value="F1" id="F1"/>
			<label for="F1">F</label><BR>
		Date de naissance :
			<INPUT type="date" name="naissance1" autocomplete=on/><BR>
		Situation :
			<INPUT type="radio" name="situation" value="En Couple" id="EC"/>
			<label for="En Couple">En Couple</label>
			<INPUT type="radio" name="situation" value="Célibataire" id="C"/>
			<label for="Célibataire">Célibataire</label><BR>
 
		<!-- Formulaire2 -->
		Nom : 
			<INPUT disabled type=text name=nom2 autocomplete=on required>  
		Prénom : 
			<INPUT disabled type=text name=prenom2 autocomplete=on required><BR>
		Sexe : 
			<INPUT disabled type="radio" name="sexe2" value="M2" id="M2"/>
			<label for="M2">M</label>
			<INPUT disabled type="radio" name="sexe2" value="F2" id="F2"/>
			<label for="F2">F</label><BR>
		Date de naissance :
			<INPUT disabled type="date" name="naissance2" autocomplete=on required><BR>
 
			<INPUT type=submit value="Enregistrer les modifications"><BR>
	</p>
  </body>
</html>

Merci d'avance pour ton aide

**headmax** · 31/01/2018, 20h42

Salut il faut par exemple vérifier si tu as un type radio ou text car les deux ne réagit pas de la même manière, autre soucis tu nomme 4 radios avec le name="sexe" se qui implique que tu ne peux utiliser qu'un seul formulaire, couple ou célibataire. Si le cas couple est sélectionné tu ne pourra pas choix le sexe de la deuxième personne brefs quelques propositions :

js

Code javascript :

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
 
var form2_inputs = ['nom2','prenom2','s2','naissance2'];
document.body.onload = function(){
document.getElementById('C').onclick = function() {
   if (this.checked) {
         for(var i in form2_inputs){
           if(document.querySelectorAll("input[name='" + form2_inputs[i] + "']").length > 1){
             var radios = document.querySelectorAll("input[name='" + form2_inputs[i] + "']");
             for(var j in radios){
               if(typeof radios[j].setAttribute === 'function'){
                 radios[j].checked = false;
                 radios[j].setAttribute("disabled", "");
               }
             }
           }
           document.querySelector("input[name='" + form2_inputs[i] + "']").value = "";
           document.querySelector("input[name='" + form2_inputs[i] + "']").setAttribute("disabled", "");
       }
   }
};
 
document.getElementById('EC').onclick = function() {
   /*if (this.checked) {*/
         for(var i in form2_inputs){
           if(document.querySelectorAll("input[name='" + form2_inputs[i] + "']").length > 1){
             var radios = document.querySelectorAll("input[name='" + form2_inputs[i] + "']");
             for(var j in radios){
               if(typeof radios[j].setAttribute === 'function'){
                 radios[j].checked = false;
                 radios[j].removeAttribute("disabled");
               }
             }
           }
           document.querySelector("input[name='" + form2_inputs[i] + "']").removeAttribute("disabled");
       }
   /*}*/
};
 
};

html

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
 
<h2> Formulaire </h2>
		<FORM NAME=ajout method=GET action=ajout_ok.php>
 
		<!-- Formulaire1 -->
		Nom : <INPUT type=text name=nom1 autocomplete=on required>  Prénom : <INPUT type=text name=prenom1 autocomplete=on required><BR>
		Sexe : 
		<INPUT type="radio" name="sexe1" value="M1" id="M1"/>
		<label for="M1">M</label>
		<INPUT type="radio" name="sexe1" value="F1" id="F1"/>
		<label for="F1">F</label><BR>
		Date de naissance :
		<INPUT type="date" name="naissance1" autocomplete=on/><BR>
		Situation :
		<INPUT type="radio" name="situation" value="En Couple" id="EC"/>
		<label for="En Couple">En Couple</label>
		<INPUT type="radio" name="situation" value="Célibataire" id="C"/>
		<label for="Célibataire">Célibataire</label><BR>
 
		<!-- Formulaire2 -->
		Nom : <INPUT type=text name=nom2 autocomplete=on required>  Prénom : <INPUT type=text name=prenom2 autocomplete=on required><BR>
		Sexe : 
		<INPUT type="radio" name="s2" value="M2" id="M2"/>
		<label for="M2">M</label>
		<INPUT type="radio" name="s2" value="F2" id="F2"/>
		<label for="F2">F</label><BR>
		Date de naissance :
		<INPUT type="date" name="naissance2" autocomplete=on required><BR>
 
		<INPUT type=submit value="Enregistrer les modifications"><BR>

démo : https://codepen.io/headmax/pen/wyaxvg?editors=1010

Masquer champs du formulaire avec condition

HTML

Vue hybride

Discussions similaires

Partager

Partager