Insertion login et mot de passe dans une BDD

**rclaisse** · 17/06/2013, 14h37

Bonjour,

Je cherche a insérer dans une base de donnée comme l'indique le titre le login et le mot de passe.
J'utilise le widjet modal form lien vers la page ici : http://jqueryui.com/dialog/#modal-form .

Voici mon code :

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
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
 
<!doctype html>
 
<html lang="fr">
<head>
  <meta charset="utf-8" />
  <title>jQuery UI Dialog - Modal form</title>
  <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
  <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
  <script charset="utf-8" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/i18n/jquery-ui-i18n.min.js"></script>
  <script charset="utf-8" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script>
  <link rel="stylesheet" href="/resources/demos/style.css" />
  <style>
    body { font-size: 62.5%; }
    label, input { display:block; }
    input.text { margin-bottom:12px; width:95%; padding: .4em; }
    fieldset { padding:0; border:0; margin-top:25px; }
    h1 { font-size: 1.2em; margin: .6em 0; }
    div#users-contain { width: 350px; margin: 20px 0; }
    div#users-contain table { margin: 1em 0; border-collapse: collapse; width: 100%; }
    div#users-contain table td, div#users-contain table th { border: 1px solid #eee; padding: .6em 10px; text-align: left; }
    .ui-dialog .ui-state-error { padding: .3em; }
    .validateTips { border: 1px solid transparent; padding: 0.3em; }
  </style>
  <script>
  $(function() {
  $("#dialog").dialog("destroy");
    var name = $( "#name" ),
      password = $( "#password" ),
      allFields = $( [] ).add( name ).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( "Length of " + n + " must be between " +
          min + " and " + 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;
      }
    }
 
    $( "#dialog-form" ).dialog({
      autoOpen: false,
      height: 300,
      width: 350,
      modal: true,
      buttons: {
        "Creer un compte": function() {
		$(".ajax").trigger('submit');
          var bValid = true;
          allFields.removeClass( "ui-state-error" );
 
          bValid = bValid && checkLength( name, "username", 3, 16 );
          bValid = bValid && checkLength( password, "password", 5, 16 );
          bValid = bValid && checkRegexp( name, /^[a-z]([0-9a-z_])+$/i, "Username may consist of a-z, 0-9, underscores, begin with a letter." );
          // From jquery.validate.js (by joern), contributed by Scott Gonzalez: http://projects.scottsplayground.com/email_address_validation/
          bValid = bValid && checkRegexp( password, /^([0-9a-zA-Z])+$/, "Password field only allow : a-z 0-9" );
 
          if ( bValid ) {
            $( "#users tbody" ).append( "<tr>" +
              "<td>" + name.val() + "</td>" +
              "<td>" + password.val() + "</td>" +
            "</tr>" );
            $( this ).dialog( "close" );
 
          }
        },
        Cancel: function() {
          $( this ).dialog( "close" );
        }
      },
      close: function() {
        allFields.val( "" ).removeClass( "ui-state-error" );
      }
 
 
 
 
    });	
		$(".ajax").submit(
		function(e) {
		var datas = $(this).serialize();
		$.ajax({
			type: 'POST',      // envoi des données en POST
			url: 'InsertionBDD.php',    
			data: datas,     // sélection des champs à envoyer
			success: function() { 
				$("#dialog-form").dialog('close');
 
			}
		});
		return false; // Pour empêcher le submit vers la page 'action'
	});
 
    $( "#create-user" )
      .button()
      .click(function() {
       $( "#dialog-form" ).dialog( "open" );
 
 
      });
  });
  </script>
</head>
<body>
 
<div id="dialog-form" title="Create new user">
  <p class="validateTips">All form fields are required.</p>
 
  <form class="ajax">
  <fieldset>
    <label for="name">Name</label>
    <input type="text" name="name" id="name" class="text ui-widget-content ui-corner-all" />
    <label for="password">Password</label>
    <input type="password" name="password" id="password" value="" class="text ui-widget-content ui-corner-all" />
  </fieldset>
  </form>
</div>
 
 
<div id="users-contain" class="ui-widget">
  <h1>Existing Users:</h1>
  <table id="users" class="ui-widget ui-widget-content">
    <thead>
      <tr class="ui-widget-header ">
        <th>Name</th>
        <th>Password</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>John Doe</td>        
        <td>johndoe1</td>
      </tr>
    </tbody>
  </table>
</div>
<button id="create-user">Creer un compte</button>
 
 
</body>
</html>

Je n'arrive pas a ouvrir la fenetre quand je clique sur le bouton et ma BDD reste vide...

Pouvez vous m'aider?

Merci d'avance!!!

**NoSmoking** · 17/06/2013, 15h04

Bonjour,
il te faut choisir un fichier source et un seul

Code html :

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

1
2
<script charset="utf-8" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/i18n/jquery-ui-i18n.min.js"></script>
<script charset="utf-8" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script>

**rclaisse** · 17/06/2013, 15h08

ok merci pour ta réponse aussi rapide!!!^^

j'ai pris en compte ta remarque mais je n'ai toujours aucun resultat.

merci encore!!!

**NoSmoking** · 17/06/2013, 16h38

j'ai pris en compte ta remarque mais je n'ai toujours aucun resultat.

cela reste vague le formulaire s'affiche t-il au moins?

**rclaisse** · 17/06/2013, 16h49

non il ne d'affiche pas dans la fenetre modal...

**NoSmoking** · 17/06/2013, 17h16

en prenant ton code et en ne mettant que

Code html :

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

1
2
  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
  <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>

comme script, la fenêtre apparait.

**rclaisse** · 19/06/2013, 10h13

En fait je voulais insérer dans ma BDD le login et le mot de passe rentrer pas l'utilisateur.

J'ai trouver la solution, j'ai utiliser la méthode $.post dont l'exemple :

Code :

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

1
2
3
var login = $('#name').val();
var pass = $('#password').val();
$.post('InsertionBDD.php',{'login':login, 'pass':pass})

Merci pour ton aide!!!!

Insertion login et mot de passe dans une BDD [UI]

jQuery

Discussions similaires

Partager

Partager