Comment désactiver required lors d'un onchange()
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:
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:
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
elementHtml.removeAttribute supprimé un attribut d'un tag html <elementHtml attribut="value" attributn=... >
Bonjour selon tes opérations tu supprime l'attribut required comme ceci :
ex: pour ton input montant
Code:
1
2
|
document.getElementById('montant').removeAttribute('required'); |
Et pour le recreer comme ceci :
Code:
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'); |
