Masquer champs du formulaire avec condition

Version imprimable

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:

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

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

Code:

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", "");
 
 
       }
   }
};
};

30/01/2018, 16h50
Rizcolas62

Ok merci !!
c'est pas plus simple en incluant du php plûtot que du javascript?
30/01/2018, 17h11
headmax

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.

1 pièce(s) jointe(s)

Ok ça marche
Sauf que je n'arrive pas à chargé le javascript .
cela m'affiche ceci dans la console:
Pièce jointe 347123

voici mon script en entier:

Code:

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

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:

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:

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

02/02/2018, 13h28
Rizcolas62

Merci beaucoup ! ça marche impec
02/02/2018, 13h40
headmax

Très bien, peut être clore ce Topic si te semble résolu, bien à toi.