IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

JavaScript Discussion :

Bouton 'submit' grisé quand qu'un formulaire à pas été rempli au complet


Sujet :

JavaScript

  1. #1
    Membre éclairé
    Inscrit en
    Septembre 2008
    Messages
    384
    Détails du profil
    Informations forums :
    Inscription : Septembre 2008
    Messages : 384
    Par défaut Bouton 'submit' grisé quand qu'un formulaire à pas été rempli au complet
    Bonjour

    J'ai un formulaire avec 2 series de radios boutons et 6 textboxes.

    Je voudrai que le bouton 'submit' reste grisé / inactif tant que qu'aucun choix n'a été fait sur chacune des 2 series de radio bouton et qu'un mois 1 caractère ait été entrés dans chacune des textboxes.

    Je ne sais pas trop comment démarrer, pour le moment je pensai déclarer le bouton submit en disabled, ainsi dès le chargement de la page, ce bouton n'est pas actif.

    Par contre pour valider les autres conditions je ne sais pas trop comment faire.

    Faut il boucle qui tourne sans cesse et qui verifie l'état de chacun des éléments du formulaire ?

    je ne sais pas comment gérer mes 2 series de radios boutons ...


    Si vous disposez d'un petit code qui pourrait me montrer un exemple, ça m'aiderait.
    Je vous remercie de votre aide,

  2. #2
    Rédacteur/Modérateur

    Avatar de SpaceFrog
    Homme Profil pro
    Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Inscrit en
    Mars 2002
    Messages
    39 658
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 75
    Localisation : Royaume-Uni

    Informations professionnelles :
    Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Secteur : Industrie

    Informations forums :
    Inscription : Mars 2002
    Messages : 39 658
    Billets dans le blog
    1
    Par défaut
    mets ton bouton en disabled au demarrage
    puis sur le onblur ou onchange de tes champs de saisie lance une routine qui verfiera la saisie et bascule ou non le bouton en disabled=false
    Ma page Developpez - Mon Blog Developpez
    Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts)
    Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir...
    Votre post est résolu ? Alors n'oubliez pas le Tag

    Venez sur le Chat de Développez !

  3. #3
    Membre éclairé
    Inscrit en
    Septembre 2008
    Messages
    384
    Détails du profil
    Informations forums :
    Inscription : Septembre 2008
    Messages : 384
    Par défaut
    Oui, je vois le principe mais c'est la routine qui me pose pb:

    Comment faire pour vérifier que l'ensemble des textboxes ont été remplis, et qu'au moins 1 radiobouton dans chaque série à eu un état defini ?

    Merci de votre aide,

  4. #4
    Rédacteur/Modérateur
    Avatar de andry.aime
    Homme Profil pro
    Inscrit en
    Septembre 2007
    Messages
    8 391
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : Ile Maurice

    Informations forums :
    Inscription : Septembre 2007
    Messages : 8 391
    Par défaut
    Bonjour,

    Regarde sur la faq.

    A+.

  5. #5
    Membre éclairé
    Inscrit en
    Septembre 2008
    Messages
    384
    Détails du profil
    Informations forums :
    Inscription : Septembre 2008
    Messages : 384
    Par défaut
    Pour chaque textboxe à remplir, je leur ai ajouté la fonction ' verif_remplissage()' ci dessous mais ça ne fonctionne pas ...

    Savez vous pourquoi ?

    Et, je ne vois toujours pas comment traiter mes 2 séries de radioboutons.


    Code HTML des textboxes :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
     
    <input type="text" name="t1" id="T1"  onKeyUp="verif_remplissage();"/>
    <input type="text" name="t2" id="T3"  onKeyUp="verif_remplissage();"/>
    <input type="text" name="t3" id="T3"  onKeyUp="verif_remplissage();"/>
    ... etc ...
    Code HTML du bouton 'submit':
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    <input type="submit" id="Prog" value="Envoyer">
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    function verif_remplissage()
    {
     
    if (document.getElementById('T1').value.length == 0 || document.getElementById('T2').value.length == 0 || document.getElementById('T3').value.length == 0 || document.getElementById('T4').value.length == 0 || document.getElementById('T5').value.length == 0 || document.getElementById('T6').value.length == 0)
    {
    document.getElementById('Prog').disabled = true
    }
    else
    {
    document.getElementById('Prog').disabled = false
    }
    }

  6. #6
    Membre éclairé
    Homme Profil pro
    Étudiant
    Inscrit en
    Mai 2011
    Messages
    442
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations professionnelles :
    Activité : Étudiant

    Informations forums :
    Inscription : Mai 2011
    Messages : 442
    Par défaut
    crée un tableau ou quelque chose qui stock individuellement la validité d'un champ. Par exemple :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    Tform = new Array(6);
    for...{
      Tform["idDuChamp"]=false;
    }
    Ensuite, tu fais des
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    ...onchange="testChamp(event,type);"...
    testChamps = function(event,type) {
      if(type=="radio") {
        Tform[event.source.name]=true;
      } else {
        Tform[event.source.name] = event.source.value!="";
      }
      testForm();
    }
    testForm = function() {return !Tform.toString().match(false);}
    Je suis pas sûr de la syntaxe exacte, mais c'est juste pour l'idée

  7. #7
    Rédacteur/Modérateur

    Avatar de SpaceFrog
    Homme Profil pro
    Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Inscrit en
    Mars 2002
    Messages
    39 658
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 75
    Localisation : Royaume-Uni

    Informations professionnelles :
    Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Secteur : Industrie

    Informations forums :
    Inscription : Mars 2002
    Messages : 39 658
    Billets dans le blog
    1
    Par défaut
    du principe de validation de formulaire

    http://www.developpez.net/forums/d55...on-formulaire/
    Ma page Developpez - Mon Blog Developpez
    Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts)
    Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir...
    Votre post est résolu ? Alors n'oubliez pas le Tag

    Venez sur le Chat de Développez !

Discussions similaires

  1. Bouton submit grisé si AU MOINS une checkbox n'est pas cochée
    Par Equinoxe5 dans le forum Général JavaScript
    Réponses: 2
    Dernier message: 20/10/2011, 01h36
  2. Bouton suivant grisé sur ouverture de formulaire
    Par Tatoine dans le forum VBA Access
    Réponses: 3
    Dernier message: 27/08/2009, 16h42
  3. [DOM] Vérification d'un formulaire avec "bouton submit grisé"
    Par SunBoy dans le forum Général JavaScript
    Réponses: 6
    Dernier message: 01/12/2008, 21h39
  4. Bouton submit grisé avant ouverture lien
    Par Ben42 dans le forum Général JavaScript
    Réponses: 6
    Dernier message: 30/01/2006, 17h04
  5. Réponses: 7
    Dernier message: 03/03/2005, 11h36

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo