Discussion :

[pony99]

Bonjour,

Je vais essayé d'être précis, car mon problème est difficile à expliqué.

J'ai un formulaire qui sert à faire une recherche sur les projets présents sur le site.
Le but étant de sélectionner le critère de recherche, puis ajouter le mot clé recherché

Au début il y a qu'un seul champ "Critère" visible, c'est un "select", selon la valeur sélectionné, un champ apparaît pour mettre le mot clé.

Par exemple si je sélectionne "S.1" un champ " C.1 " apparaît qui est obligatoire (required)
Si je sélectionne "S.2" le champ "C.2" apparaît. qui est aussi obligatoire (required)

Le problème

Comme les champs sont obligatoire, je ne peux pas valider le formulaire, en effet si je choisie "S.1" et saisie une valeur dans "C.1" le formulaire refuse d’être valider parce que "C.2" est vide. logique.

Comment je peux faire pour que quand je sélectionne "S.1", le requise du C.2 soit supprimer.

voici les code

Le formulaire

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
<div id="form-saisie" class="post">
 
 
	<form action="index.php?page=saisie_proj&mode=RESULT" method="post" id="signup">
           		<div id="titreForm">Recherche d'un Projet</div>
<div id="corpForm2">		
		<fieldset>
			<ol>
				<li>
					<label for="statut">Rechercher par *:</label>
						<select placeholder="Acronyme du projet" name="type" id="statut" onchange="DisplayOrNot(this.value);">
							<option disabled selected></option>
							<option value="1">Acronyme</option>
							<option value="2">Responsable</option>
							<option value="3">mot(s) clé(s)</option>
						</select>
				</li>
				<li id="LowRep" name="LowRep">	
					<label for="acronyme">Acronyme  *:</label> 
					<input type="text" id="acronyme" name="acronyme" placeholder="Acronyme du projet" required />
				</li>
				<li id="LowRep2" name="LowRep2">	
					<label for="responsable" id="responsable">Responsable * :</label> 
					<select name="responsable" size="1">
					<?php  echo $champopt_user;?> </select>	
				</li>
				<li id="LowRep3" name="LowRep3">	
					<label for="montant">mot(s) clé(s) *:</label> 
					<input type="text" id="montant" name="motcle" placeholder="séparez les mots clés par une virgule" required />
				</li>
 
			</ol>
			</fieldset>		
          		<div id="piedForm">
			<input type="reset" name="reset" id="Annuler" value="Annuler" />
			<input type="submit" name="valid" id="Valider" value="Valider" />
		</div> 
</div>	
</form>
 
 
</div>

Le Script 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
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
function ApparitionInput() {
 
			document.getElementById("LowRep").style.display = "none";
			document.getElementById("LowRep2").style.display = "none";
			document.getElementById("LowRep3").style.display = "none";
         }
			function DisplayOrNot(p) {
 
			var lowrep = document.getElementById("LowRep");
			var lowrep2 = document.getElementById("LowRep2");
			var lowrep3 = document.getElementById("LowRep3");		
 
		if (p==1) {
 
			lowrep.style.display = "inline";			
			lowrep2.style.display = "none";
			lowrep3.style.display = "none";
        }
		else if (p==2) {
			lowrep.style.display = "none";			
			lowrep2.style.display = "inline";
			lowrep3.style.display = "none";
        }
		else if (p==3) {
 
			lowrep.style.display = "none";			
			lowrep2.style.display = "none";
			lowrep3.style.display = "inline";
        }
        else {
 
			lowrep.style.display = "none";
			lowrep2.style.display = "none";
			lowrep3.style.display = "none";
			}
      }
 
 
        window.onload = ApparitionInput;

Merci pour votre aide

[Golgotha]

Bonjour,

Essaye de disable celui que tu ne voie pas, il ne sera pas transmis dans le form, ça réglera peut être ton problème.

http://www.w3schools.com/tags/att_input_disabled.asp

[headmax]

Bonjour selon tes opérations tu supprime l'attribut required comme ceci :
ex: pour ton input montant

Code :

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

1
2
 
document.getElementById('montant').removeAttribute('required');

Et pour le recreer comme ceci :

Code :

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

1
2
3
4
5
6
7
 
document.getElementById('montant').setAttribute('required');
 
//solution plus efficace au dessus serait de switcher
document.getElementById('montant').setAttribute('disabled');
 
document.getElementById('montant').removeAttribute('disabled');

[pony99]

Hello headmax

Désolé de répondre que maintenant, car un peu débordé.

J'ai essayé ta solution comme ci-dessous mais cela ne fonctionne pas, je ne suis pas un AS du JavaCript, tonaide serait précieuse

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
			function DisplayOrNot(p) {
 
			var acronyme = document.getElementById("acronyme");
			var responsable = document.getElementById("responsable");
			var motcle = document.getElementById("motcle");		
 
		if (p==1) {
 
			acronyme.style.display = "inline";			
			responsable.style.display = "none";
			motcle.style.display = "none";
 
			acronyme.setAttribute="required";
			responsable.removeAttribute="required";
			motcle.removeAttribute="required";
 
 
        }
		else if (p==2) {
			acronyme.style.display = "none";			
			responsable.style.display = "inline";
			motcle.style.display = "none";
 
			acronyme.removeAttribute="required";
			responsable.setAttribute="required";
			motcle.removeAttribute="required";
        }
		else if (p==3) {
 
			acronyme.style.display = "none";			
			responsable.style.display = "none";
			motcle.style.display = "inline";
 
			acronyme.removeAttribute="required";
			responsable.removeAttribute="required";
			motcle.setAttribute="required";
        }
        else {
 
			acronyme.style.display = "none";
			responsable.style.display = "none";
			motcle.style.display = "none";
			}
      }

[SpaceFrog]

l'exemple donné :

Code :

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

.setAttribute('required');

ce que tu as codé

Code :

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

.setAttribute="required";

Ce n'est plus une question d'être un as en JavaScript ...

[Bovino]

Personnellement, je déconseille les méthodes comme setAttribute() ou removeAttribute().
Notamment pour une question de logique : ces méthodes manipulent des éléments HTML, alors qu'en toute logique, en JavaScript, ce sont les propriétés des éléments du DOM qu'il faut gérer.

On peut donc très bien faire

Code :

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

1
2
3
acronyme.required=true;
responsable.required=false;
motcle.required=false;

[pony99]

@Bovino, merci pour ton aide cela fonctionne correctement
@SpaceFrog cela ne fonctionne pas

[Bovino]

@SpaceFrog cela ne fonctionne pas

C'est parce que setAttribute() attend 2 paramètres : le nom de l'attribut et sa valeur.

[headmax]

Code :

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

1
2
 
.setAttribute('required',true);

[Bovino]

C'est bien la différence entre un attribut HTML et une propriété JavaScript : si tu affectes l'attribut, alors la valeur ne peut pas valoir un booléen.
Pour info, en HTML, seule la présence de l'attribut permet d'affecter le comportement, tu peux donc en théorie lui donner n'importe quelle valeur textuelle (voire aucune si c'est du HTML et non du xhtml) bien que seule la valeur correspondante au nom de l'attribut (donc ici "required") ne soit valide pour le W3C.
En revanche, pour la propriété JavaScript correspondante, c'est bien un booléen qu'il faut affecter.

[headmax]

Je suis tout a fait d'accord avec toi d'ailleurs c'est une mauvaise habitude que j'ai prit en utilisant les lib jquery et le fameux $().attr({}) , mais effectivement il vaut mieux profiter de l'object html et modifier ses propriétés que de passer pas des functions js de modification du dom.

[pony99]

Hello,

Désolé, je me suis un peu précipité, et le problème reste le même , impossible de valider

[pony99]

Up