Discussion :

[Sh4dow49]

Bonjour,

Voila je n'y connais pas grand chose en javascript (pour nepas dire rien du tout ...) mais je voudrais faire qquelque chose qui nécessite cette techno, ce pourquoi je sollicite votre aide (après uen recherche sans résultat intéressant)

Voila, j'ai un formulaire php, et je voudrais cacher ou verouiller le bouton submit tant que l'un des champs de mon formulaire a une valeur vide

Par exemple sur un formulaire classique du type nom prénom civilité, tant que soit nom est vide, soit prénom est vide soit on n'a pas sélectionné monsieur ou madamme dans la liste civilité (sélection de départ a une valeur nulle) je voudrais que mon bouton valider soit invisible ou innaccessible.

Merci d'avance pour votre aide

[SpaceFrog]

fais une recherche sur

Code :

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

style.visibility

ou

Code :

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

style.display

[Sh4dow49]

Alors j'ai trouvé quelques trucs sur ce que tu m'a dis, mais j'aurai une question à laquelle je n'ai pas vu de réponses dans mes recherches (ou alors je suis passé à coté)

J'ai vu des exemples sur des petits formulaires (1 ou 2 éléments) dans lesquels ils regardaient si l'élément (repéré par son id) était checké ou non.

J'ai des formulaires allant de 5 à 10 éléments, je dois faire la vérification sur chacun des éléments ou bien y a-t-il un moyen de faire la vérification sur l'ensemble du formulaire d'un coup ?

Egalement, pour le cas ou je dois faire du cas par cas, je n'ai pas trouvé comment effectuer la vérif pour les champs (etant donné que je n'ai que ca et des listes déroulantes et que je n'ai trouvé que les vérifs pour les boutons ratios et cases à cocher ... )

[Sh4dow49]

En fait j'ai trouvé comment effectuer la cérif sur les champ texte, il suffit d'appeler la fonction en mettant en parametre this.value

Mais cela ne résouds pas toute la question...

[hiul dragonfel]

si tu met le même nom pour tes éléments tu peux faire ça

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
 
var elements = document.getElementsByName("mexChockBox");
 
var elementsVides = 0;
 
var i;
for (i = 0; i < elements.length; i++){
   if(elements[i].value != '') elementsVides++;
}
 
if(elementsVides > 0){
   document.getElementById("boutonSubmit").disabled = true;
}else{
   document.getElementById("boutonSubmit").disabled = false;
}

voilà

[SpaceFrog]

oui que l'on peut écrire un peu plus simplement

Code :

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

1
2
 
   document.getElementById("boutonSubmit").disabled =(elementsVides > 0)?true:false;

[Sh4dow49]

Justement d'une part je n'ai pas de checbox et d'autre part (la suite logique) je n'ai aps le même nom a chaque élément.

Par contre, peut-on utiliser le principe avec les id ? (mettre le même id a chaque composant du formulaire et effectuer la vérif)

[SpaceFrog]

un id doit être unique sur la page ...

[Sh4dow49]

erf pas fo, et une class c'est possible ? avec une fonction js genre GetElementByClass ? comme la fonction GetElementById ^^ (je demande on ne sait jamais)

[Bovino]

Non, ça n'existe pas, sauf dans certains frameworks, en revanche, tu peux passer par

Code :

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

document.forms[ton_formulaire].elements[i]

[Sh4dow49]

ouai ca parait plus convenir a ma situation

par contre (pour me confirmer) j'appelle quand même bien la fonction avec un parametre "onchange()" sur chaque élément ou y a-t-il un moment plus propice a la vérification ?

je rappelle que ce que je voudrais faire, c'est cacher ou verrouiller le bouton valider dès qu'un champ texte est vide ou dès qu'une liste déroulante a l'élément vide sélectionné, et le montrer ou le déverouiller dès que tout est ok

[mLk92]

Egalement, pour le cas ou je dois faire du cas par cas, je n'ai pas trouvé comment effectuer la vérif pour les champs (etant donné que je n'ai que ca et des listes déroulantes et que je n'ai trouvé que les vérifs pour les boutons ratios et cases à cocher ... )

Si on reprend ton premier post, il s'agirait d'un champs select pour madame, monsieur, etc, et un champ texte pour le nom ou prénom.

t'a le choix, jte conseille :

- avec des méthodes comme onblur ou onkeyup sur ton champ texte, tu peut faire appel à une méthode javascript qui vérifie ton champ avec une pattern (t'appel ensuite la validation de ton bouton si ton autre champs renvoi quelque chose)

- avec un onchange, tu fais une vérif que ton autre champs à vérifier est validé, et là tu appelle t'a fonction qui valide ton bouton.

ex:

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
 
 
function validName(){
   var name = document.getElementById('idduchamptexte');
   var pattern = new RegExp("[A-Za-z]", "g");
   if(!pattern.test(fieldValue)){
         /*message d'erreur*/
   }else{
         validForm();
   }
}
 
function validForm(){
   var selectValue = document.getElementById('idduselect').value;
   if(selectValue != ' '){
        document.getElementById('submit').disabled = false;
  }else{
        document.getElementById('submit').disabled = true;
  }
}

Bon ya surement des ajustements, je l'ai écrit trop rapidement pour le valider, mais en gros tu valide le champs texte en appelant la fonction Validname(); ensuite tu appel ta fonction qui valide le select et qui met ton bouton de sauvegarde en grisé ou non.

[SpaceFrog]

j'ai proposé recemment un script getElementsByIdBeginning() ...

pour récupérer les éléments dont l'id commence par ...

Une petite recherche

[Sh4dow49]

ouai c'est une idée pas mal que je garde sous la main (en parlant du code proposé par mLk92), mais sur un formulaire de 5 champs ou plus ca devient vite un peu lourd nan ?

l'idée d'utiliser document.forms[].element[] me plaisais bien, j'ai essayé un petit truc que voici :

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
 
function enable_disable()
{
    var elementsVides = 0;
    var i;
    for (i=0; i<= document.forms["nom_formulaire"].elements.length; i++)
    {
        if (document.forms["formulaire"].element[i].value == "" or document.forms["formulaire"].element[i].value == null)
        {
            elementsVides++;
        }
    }
 
    document.GetElementById("boutonValider").disabled=(elementsVides > 0)?true:false;
}

Seulement je ne sais pas trop ou l'appeler, j'ai essayé avec des onchange sur les champs mais sans résultat ... Peut être une erreur dans la fonction, ou bien l'appel qui n'est pas bon (ou les deux ...)

[mLk92]

ouai c'est une idée pas mal que je garde sous la main (en parlant du code proposé par mLk92), mais sur un formulaire de 5 champs ou plus ca devient vite un peu lourd nan ?

Oui, je l'avais proposé que pour deux champs ^^ (et puis mon code te permet une vérification personnelle des champs)

Seulement je ne sais pas trop ou l'appeler, j'ai essayé avec des onchange sur les champs mais sans résultat ... Peut être une erreur dans la fonction, ou bien l'appel qui n'est pas bon (ou les deux ...)

Tu dois l'appeler après ou avant ton code du formulaire sous cette forme :

Code :

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

1
2
3
4
 
<script language="javascript">
 enable_disable();
</script>

Ton code est lui soit au-dessus du form, soit dans un fichier.js.

[hiul dragonfel]

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
function enable_disable()
{
    var elementsVides = 0;
    var i;
    for (i=0; i<= document.forms["nom_formulaire"].elements.length; i++)
    {
        if (document.forms["nom_formulaire"].element[i].value == "" or document.forms["nom_formulaire"].element[i].value == null)
        {
            elementsVides++;
        }
    }
 
    document.GetElementById("boutonValider").disabled=(elementsVides > 0)?true:false;
}

c'est peut etre une erreur de copier coller mais vérifie dans ta fonction quand même

[Sh4dow49]

j'ai mis mon code js entre les balises <head> de ma page html donc je pense que c'est bon pour ça.

par contre lorsque j'arrive sur mon formulaire avec les champs vides, le bouton est quand même dispo. J'ai revérifié ma fonction mais je n'ai pas vu d'erreur ... (peut être parce que je ne connais pas le javascript ... pourtant il n'y a pas grand chose et ce n'est pas très compliqué ... )

[hiul dragonfel]

est ce que ton bouton est désactivé par défaut ?

Code :

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

<input type="submit" disabled="disabled" />

[mLk92]

Il faut que ta fonction soit appelé au chargement de ton formulaire.

Alors essai de mettre l'appel de ta fonction entre la balise <script></script> après ton input du bouton et avant la balise de fin du form.

[Sh4dow49]

non il ne l'est pas.

Je viens d'essayer en le rendant disabled par défaut et j'ai essayé de remplir le formulaire mais il reste disabled (tout comme il reste enabled si je ne le rends pas disabled par défaut)