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

jQuery Discussion :

Form dialog jQuery dans un formulaire HTML [UI]


Sujet :

jQuery

Vue hybride

Message précédent Message précédent   Message suivant Message suivant
  1. #1
    Candidat au Club
    Homme Profil pro
    Directeur des systèmes d'information
    Inscrit en
    Mars 2015
    Messages
    2
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations professionnelles :
    Activité : Directeur des systèmes d'information
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Mars 2015
    Messages : 2
    Par défaut Form dialog jQuery dans un formulaire HTML
    Bonjour à tous,

    je débute avec jQuery et je rencontre un problème qui, je l'espère, vous paraîtra simple à identifier et à solutionner.
    Je souhaite implémenter une form dialog jQuery dans une page HTML comportant déjà un formulaire (balise <form>).
    Lorsque je clic sur le bouton qui permet l'ouverture de la form dialog, je vois apparaître la boite de dialogue mais cette dernière se referme aussitôt.
    Si je retire le formulaire initiale de ma page HTML (toujours la balise <form>), je ne rencontre plus ce problème.
    Auriez-vous une solution ou une piste à me donner ?

    Merci par avance

    Ci-dessous le code de ma page :

    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
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    $(function() {
        var dialog, form,
     
          // From http://www.whatwg.org/specs/web-apps/current-work/multipage/states-of-the-type-attribute.html#e-mail-state-%28type=email%29
          emailRegex = /^[a-zA-Z0-9.!#$%&'*+\/=?^_`{|}~-]+@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*$/,
          name = $( "#name" ),
          prenom = $( "#prenom" ),
          email = $( "#email" ),
          password = $( "#password" ),
          allFields = $( [] ).add( name ).add( email ).add( password ),
          tips = $( ".validateTips" );
     
        function updateTips( t ) {
          tips
            .text( t )
            .addClass( "ui-state-highlight" );
          setTimeout(function() {
            tips.removeClass( "ui-state-highlight", 1500 );
          }, 500 );
        }
     
        function checkLength( o, n, min, max ) {
          if ( o.val().length > max || o.val().length < min ) {
            o.addClass( "ui-state-error" );
            updateTips( "La taille de " + n + " doit être comprise entre " +
              min + " et " + max + "." );
            return false;
          } else {
            return true;
          }
        }
     
        function checkRegexp( o, regexp, n ) {
          if ( !( regexp.test( o.val() ) ) ) {
            o.addClass( "ui-state-error" );
            updateTips( n );
            return false;
          } else {
            return true;
          }
        }
     
        function addUser() {
          var valid = true;
          allFields.removeClass( "ui-state-error" );
     
          valid = valid && checkLength( name, "username", 3, 16 );
          valid = valid && checkLength( prenom, "username", 3, 16 );
          valid = valid && checkLength( email, "email", 6, 80 );
          valid = valid && checkLength( password, "password", 5, 16 );
     
          valid = valid && checkRegexp( name, /^[a-z]([0-9a-z_\s])+$/i, "Username may consist of a-z, 0-9, underscores, spaces and must begin with a letter." );
          valid = valid && checkRegexp( email, emailRegex, "eg. ui@jquery.com" );
          valid = valid && checkRegexp( password, /^([0-9a-zA-Z])+$/, "Password field only allow : a-z 0-9" );
     
          if ( valid ) {
     
            $( "#users tbody" ).append( "<tr>" +
                "<td>" + name.val() + "</td>" +
                "<td>" + prenom.val() + "</td>" +
                "<td>" + email.val() + "</td>" +
                "<td style='display:none;'>" + password.val() + "</td>" +
                "<td><img src='web/images/'></td>" +
            "</tr>" );
            $( "#users-contain" ).show();
            dialog.dialog( "close" );
          }
          return valid;
        }
     
        dialog = $( "#dialog-form" ).dialog({
          autoOpen: false,
          height: 400,
          width: 350,
          modal: true,
          buttons: {
            "Valider": addUser,
            Annuler: function() {
              dialog.dialog( "close" );
            }
          },
          close: function() {
            form[ 0 ].reset();
            allFields.removeClass( "ui-state-error" );
          }
        });
     
        form = dialog.find( "#userform" ).on( "submit", function( event ) {
          event.preventDefault();
          addUser();
        });
     
        $( "#create-user" ).button().on( "click", function() {
          dialog.dialog( "open" );
        });
     
        $( "#reset-mainform" ).button();
        $( "#submit-mainform" ).button();
      });
    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
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    <div id="dialog-form" title="Ajouter un élève">
            <p class="validateTips">Veuillez renseigner tous les champs du formulaire</p>
     
            <form id="userform" name="userform">
                <fieldset>
                    <label for="name">Nom</label>
                    <input type="text" name="name" id="name" value="Smith" class="text ui-widget-content ui-corner-all">
                    <label for="name">Prénom</label>
                    <input type="text" name="prenom" id="prenom" value="Jane" class="text ui-widget-content ui-corner-all">
                    <label for="email">Email</label>
                    <input type="text" name="email" id="email" value="jane@smith.com" class="text ui-widget-content ui-corner-all">
                    <label for="password">Mot de passe</label>
                    <input type="password" name="password" id="password" value="xxxxxxx" class="text ui-widget-content ui-corner-all">
     
                    <!-- Allow form submission with keyboard without duplicating the dialog button -->
                    <input type="submit" tabindex="-1" style="position:absolute; top:-1000px">
                </fieldset>
            </form>
        </div>
     
        <div class="wrapper">
     
           <form id="mainform" name="mainform" method="post" action="/">
    	<fieldset>
                    <h2>Représentant légal</h2>
     
                    <label for="repleg_nom">Nom</label>
                    <input type="text" name="nom" id="repleg_nom" class="text ui-widget-content ui-corner-all" />         
     
                    <label for="repleg_prenom">Prénom</label>
                    <input type="text" name="prenom" id="repleg_prenom" class="text ui-widget-content ui-corner-all" />
     
                    <label for="repleg_email">Email</label>                
                    <input type="email" name="email" id="repleg_email" class="text ui-widget-content ui-corner-all" />
     
                </fieldset>
     
     
                <h2>Elèves</h2>
                <div id="users-contain" class="ui-widget" style="display:none;">
                    <h1>Existing Users:</h1>
                    <table id="users" class="ui-widget ui-widget-content">
                        <thead>
                            <tr class="ui-widget-header ">
                                <th>Nom</th>
                                <th>Prénom</th>
                                <th>Email</th>
                                <th style="display:none;">Mot de passe</th>
                                <th>Supprimer</th>
                            </tr>
                        </thead>
                        <tbody>
                            <!--
                            <tr>
                                <td>John Doe</td>
                                <td>john.doe@example.com</td>
                                <td>johndoe1</td>
                            </tr>
                            -->
                        </tbody>
                    </table>
                </div>
                <!--<button id="create-user">Create new user</button>-->
                <button id="create-user">Ajouter un élève</button>
     
                <p>
                    <button id="reset-mainform" type="reset">Reset</button>
                    <button id="submit-mainform" type="submit">Envoyer la demande</button>    
                </p>
     
     
           </form>
     
        </div>
     
    </body>
    </html>

  2. #2
    Rédacteur

    Avatar de danielhagnoul
    Homme Profil pro
    Étudiant perpétuel
    Inscrit en
    Février 2009
    Messages
    6 389
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 74
    Localisation : Belgique

    Informations professionnelles :
    Activité : Étudiant perpétuel
    Secteur : Enseignement

    Informations forums :
    Inscription : Février 2009
    Messages : 6 389
    Billets dans le blog
    125
    Par défaut
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    $( "#create-user" )
    .button()
    .on( "click", function() {
        dialog.dialog( "open" );
     
        // Si on ne bloque pas la propagation de l'événement, on provoque la soumission du formulaire.
        return false;
    });

    Blog

    Sans l'analyse et la conception, la programmation est l'art d'ajouter des bogues à un fichier texte vide.
    (Louis Srygley : Without requirements or design, programming is the art of adding bugs to an empty text file.)

  3. #3
    Candidat au Club
    Homme Profil pro
    Directeur des systèmes d'information
    Inscrit en
    Mars 2015
    Messages
    2
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations professionnelles :
    Activité : Directeur des systèmes d'information
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Mars 2015
    Messages : 2
    Par défaut
    Merci à toi danielhagnoul, ça marche nickel

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. [HTML] Sql dans un formulaire HTML
    Par chrosnir dans le forum Balisage (X)HTML et validation W3C
    Réponses: 11
    Dernier message: 03/12/2007, 17h53
  2. [Form] deux actions dans un formulaire ?
    Par FraK dans le forum Balisage (X)HTML et validation W3C
    Réponses: 21
    Dernier message: 16/07/2007, 15h11
  3. Réponses: 3
    Dernier message: 12/01/2007, 17h43
  4. integrer une variable dans un formulaire html
    Par oops! dans le forum Langage
    Réponses: 3
    Dernier message: 08/09/2006, 19h48
  5. integrer une variable dans un formulaire html
    Par oops! dans le forum Langage
    Réponses: 3
    Dernier message: 08/09/2006, 19h48

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