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