Nieuwe klant form in Jquery

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Donny Wie weet

Donny Wie weet

06/02/2012 00:24:56
Quote Anchor link
Beste alle, ik heb met Jquery een moderner veld gemaakt voor een scriptje. Heb op de site gekeken, de code geknipt en aangepast, alleen krijg ik het laatste niet voor mekaar... Hij voegt ze niet in de nieuwe tabel toe:S Willen jullie ernaar kijken?

Mijn dank:)


Code (php)
PHP script in nieuw venster Selecteer het PHP script
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
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Naamloos document</title>
</head>

<body>

<meta charset="utf-8">
    
    <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>
    
    <link type="text/css" href="css/custom-theme/jquery-ui-1.8.17.custom.css" rel="stylesheet" />
    <script src="js/jquery-1.7.1.min.js" type="text/javascript"></script>
    <script src="js/jquery-ui-1.8.17.custom.min.js" type="text/javascript"></script>
    
    
    <script>
    $(function() {
        // a workaround for a flaw in the demo system (http://dev.jqueryui.com/ticket/4375), ignore!
        $( "#dialog:ui-dialog" ).dialog( "destroy" );
        
        var pasnummer = $( "#pasnummer" ),
            voorletters = $( "#voorletters" ),
            achternaam = $( "#achternaam" ),
            geboortedatum = $( "#geboortedatum" ),
            adres = $( "#adres" ),
            postcode = $( "#postcode" ),
            postcodedigit = $( "#postcodedigit" ),
            woonplaats = $( "#woonplaats" ),
            telefoon = $( "#telefoon" ),
            email = $( "#email" ),
            allFields = $( [] ).add( pasnummer ).add( voorletters ).add( achternaam ).add( geboortedatum ).add( adres ).add( postcode ).add( postcodedigit ).add( woonplaats ).add( telefoon ).add( email ),
            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: 600,
            width: 425,
            modal: true,
            buttons: {
                "Toevoegen": function() {
                    var bValid = true;
                    allFields.removeClass( "ui-state-error" );

                    bValid = bValid && checkLength( pasnummer, "pasnummer", 4, 5 );
                    bValid = bValid && checkLength( email, "email", 6, 80 );
                    bValid = bValid && checkLength( achternaam, "achternaam", 3, 16 );
                    bValid = bValid && checkRegexp( achternaam, /^[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( email, /^((([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+(\.([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+)*)|((\x22)((((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(([\x01-\x08\x0b\x0c\x0e-\x1f\x7f]|\x21|[\x23-\x5b]|[\x5d-\x7e]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(\\([\x01-\x09\x0b\x0c\x0d-\x7f]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))))*(((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(\x22)))@((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.?$/i, "eg. [email protected]" );
                    bValid = bValid && checkRegexp( password, /^([0-9a-zA-Z])+$/, "Password field only allow : a-z 0-9" );

                    if ( bValid ) {
                        $( "#users tbody" ).append( "<tr>" +
                            "<td>" + pasnummer.val() + "</td>" +
                            "<td>" + voorletters.val() + "</td>" +
                            "<td>" + achternaam.val() + "</td>" +
                            "<td>" + geboortedatum.val() + "</td>" +
                            "<td>" + adres.val() + "</td>" +
                            "<td>" + postcode.val() + postcodedigit.val() + "</td>" +
                            "<td>" + woonplaats.val() + "</td>" +
                            "<td>" + telefoon.val() + "</td>" +
                            "<td>" + email.val() + "</td>" +
                        "</tr>" );
                        $( this ).dialog( "close" );
                    }
                },
                Annuleren: function() {
                    $( this ).dialog( "close" );
                }
            },
            close: function() {
                allFields.val( "" ).removeClass( "ui-state-error" );
            }
        });

        $( "#create-user" )
            .button()
            .click(function() {
                $( "#dialog-form" ).dialog( "open" );
            });
    });
    </script>

<div class="demo">

<div id="dialog-form" title="Voeg een nieuwe kaarthouder toe">
    <p class="validateTips">Velden met een * zijn verplicht!</p>
    
    <fieldset>
        <label for="pasnummer">Pasnummer*</label>
        <input type="text" name="pasnummer" id="pasnummer" class="text ui-widget-content ui-corner-all" />
        <label for="voorletters">Voorletters</label>
        <input type="text" name="voorletters" id="voorletters" class="text ui-widget-content ui-corner-all" />
        <label for="achternaam">Achternaam*</label>
        <input type="text" name="achternaam" id="achternaam" class="text ui-widget-content ui-corner-all" />
        <label for="geboortedatum">Geboortedatum</label>
        <input type="text" name="geboortedatum" id="geboortedatum" class="text ui-widget-content ui-corner-all" />
        <label for="adres">Adres</label>
        <input type="text" name="adres" id="adres" class="text ui-widget-content ui-corner-all" />
        <label for="postcode">Postcode*</label>
        <input type="text" name="postcode" id="postcode" class="text ui-widget-content ui-corner-all" width="10" />
        <label for="postcodedigit">Postcode*</label>
        <input type="text" name="postcodedigit" id="postcodedigit" class="text ui-widget-content ui-corner-all" width="5" />
        <label for="woonplaats">Woonplaats*</label>
        <input type="text" name="woonplaats" id="woonplaats" class="text ui-widget-content ui-corner-all" />
        <label for="telefoon">Telefoon</label>
        <input type="text" name="telefoon" id="telefoon" class="text ui-widget-content ui-corner-all" />
        <label for="email">Email</label>
        <input type="text" name="email" id="email" value="" class="text ui-widget-content ui-corner-all" />
    </fieldset>
    </form>
    

</div>


<div id="users-contain" class="ui-widget">
    <h1>Bestaande kaarthouders:</h1>
    <table id="users" class="ui-widget ui-widget-content">
        <thead>
            <tr class="ui-widget-header ">
                <th>Delete</th>
                <th>Pasnummer</th>
                <th>Voorletters</th>
                <th>Achternaam</th>
                <th>Geboortedatum</th>
                <th>Adres</th>
                <th>Postcode</th>
                <th>Woonplaats</th>
                <th>Telefoon</th>
                <th>Email</th>
            </tr>
        </thead>
        <tbody>
        </tbody>

    </table>
</div>
<button id="create-user">Nieuwe kaarthouder</button>

</div><!-- End demo -->



<div class="demo-description">
</div><!-- End demo-description -->

</body>
</html>
Gewijzigd op 06/02/2012 00:25:24 door Donny Wie weet
 
PHP hulp

PHP hulp

25/11/2024 00:10:59
 
Kris Peeters

Kris Peeters

06/02/2012 11:09:22
Quote Anchor link
Je bent vergeten "password" te vervangen door "pasnummer". Dat is het voornaamste.

Ik heb de volgorde ook wat aangepast.
Javascript en css tussen <head></head>, niet tussen body


Zó doet het wat je wil bereiken, denk ik

Code (php)
PHP script in nieuw venster Selecteer het PHP script
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
165
166
167
168
169
170
171
172
173
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Naamloos document</title>
    <meta charset="utf-8">    
    <script src="js/jquery-1.7.1.min.js" type="text/javascript"></script>
    <script src="js/jquery-ui-1.8.17.custom.min.js" type="text/javascript"></script>
    <link type="text/css" href="css/custom-theme/jquery-ui-1.8.17.custom.css" rel="stylesheet" />
    <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() {
        // a workaround for a flaw in the demo system (http://dev.jqueryui.com/ticket/4375), ignore!
       $( "#dialog:ui-dialog" ).dialog( "destroy" );
     var pasnummer = $( "#pasnummer" ),
         voorletters = $( "#voorletters" ),
         achternaam = $( "#achternaam" ),
         geboortedatum = $( "#geboortedatum" ),
         adres = $( "#adres" ),
         postcode = $( "#postcode" ),
         postcodedigit = $( "#postcodedigit" ),
         woonplaats = $( "#woonplaats" ),
         telefoon = $( "#telefoon" ),
         email = $( "#email" ),
         allFields = $( [] ).add( pasnummer ).add( voorletters ).add( achternaam ).add( geboortedatum ).add( adres ).add( postcode ).add( postcodedigit ).add( woonplaats ).add( telefoon ).add( email ),
         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: 600,
        width: 425,
        modal: true,
        buttons: {
            "Toevoegen": function() {
                var bValid = true;
                allFields.removeClass( "ui-state-error" );

                bValid = bValid && checkLength( pasnummer, "pasnummer", 4, 5 );
                bValid = bValid && checkLength( email, "email", 6, 80 );
                bValid = bValid && checkLength( achternaam, "achternaam", 3, 16 );
                bValid = bValid && checkRegexp( achternaam, /^[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( email, /^((([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+(\.([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+)*)|((\x22)((((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(([\x01-\x08\x0b\x0c\x0e-\x1f\x7f]|\x21|[\x23-\x5b]|[\x5d-\x7e]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(\\([\x01-\x09\x0b\x0c\x0d-\x7f]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))))*(((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(\x22)))@((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.?$/i, "eg. [email protected]" );
                bValid = bValid && checkRegexp( pasnummer, /^([0-9a-zA-Z])+$/, "pasnummer field only allow : a-z 0-9" );

                if ( bValid ) {
                    $( "#users tbody" ).append( "<tr>" +
                        "<td></td>" +
                        "<td>" + pasnummer.val() + "</td>" +
                        "<td>" + voorletters.val() + "</td>" +
                        "<td>" + achternaam.val() + "</td>" +
                        "<td>" + geboortedatum.val() + "</td>" +
                        "<td>" + adres.val() + "</td>" +
                        "<td>" + postcode.val() + postcodedigit.val() + "</td>" +
                        "<td>" + woonplaats.val() + "</td>" +
                        "<td>" + telefoon.val() + "</td>" +
                        "<td>" + email.val() + "</td>" +
                    "</tr>" );
                    $( this ).dialog( "close" );
                }
            },
            Annuleren: function() {
                $( this ).dialog( "close" );
            }
        },
        close: function() {
            allFields.val( "" ).removeClass( "ui-state-error" );
        }
    });
      $("#create-user")
        .button()
        .click(function() {
            $( "#dialog-form" ).dialog( "open" );
        });
      });
    </script>
  </head>
  <body>
    <div class="demo">
    <div id="dialog-form" title="Voeg een nieuwe kaarthouder toe">
      <p class="validateTips">Velden met een * zijn verplicht!</p>    
      <fieldset>
          <label for="pasnummer">Pasnummer*</label>
          <input type="text" name="pasnummer" id="pasnummer" class="text ui-widget-content ui-corner-all" />
          <label for="voorletters">Voorletters</label>
          <input type="text" name="voorletters" id="voorletters" class="text ui-widget-content ui-corner-all" />
          <label for="achternaam">Achternaam*</label>
          <input type="text" name="achternaam" id="achternaam" class="text ui-widget-content ui-corner-all" />
          <label for="geboortedatum">Geboortedatum</label>
          <input type="text" name="geboortedatum" id="geboortedatum" class="text ui-widget-content ui-corner-all" />
          <label for="adres">Adres</label>
          <input type="text" name="adres" id="adres" class="text ui-widget-content ui-corner-all" />
          <label for="postcode">Postcode*</label>
          <input type="text" name="postcode" id="postcode" class="text ui-widget-content ui-corner-all" width="10" />
          <label for="postcodedigit">Postcode*</label>
          <input type="text" name="postcodedigit" id="postcodedigit" class="text ui-widget-content ui-corner-all" width="5" />
          <label for="woonplaats">Woonplaats*</label>
          <input type="text" name="woonplaats" id="woonplaats" class="text ui-widget-content ui-corner-all" />
          <label for="telefoon">Telefoon</label>
          <input type="text" name="telefoon" id="telefoon" class="text ui-widget-content ui-corner-all" />
          <label for="email">Email</label>
          <input type="text" name="email" id="email" value="" class="text ui-widget-content ui-corner-all" />
      </fieldset>
        </form>
    </div>
    <div id="users-contain" class="ui-widget">
        <h1>Bestaande kaarthouders:</h1>
        <table id="users" class="ui-widget ui-widget-content">
            <thead>
                <tr class="ui-widget-header ">
                    <th>Delete</th>
                    <th>Pasnummer</th>
                    <th>Voorletters</th>
                    <th>Achternaam</th>
                    <th>Geboortedatum</th>
                    <th>Adres</th>
                    <th>Postcode</th>
                    <th>Woonplaats</th>
                    <th>Telefoon</th>
                    <th>Email</th>
                </tr>
            </thead>
            <tbody>
            </tbody>

        </table>
    </div>
    <button id="create-user">Nieuwe kaarthouder</button>
    </div><!-- End demo -->
    <div class="demo-description">
    </div><!-- End demo-description -->
  </body>
</html>
 
Donny Wie weet

Donny Wie weet

06/02/2012 11:19:15
Quote Anchor link
Inderdaad werkt het nu wel ja:) Alleen, hoe kan ik de nieuwe gegevens toe voegen op mijn bestaande database? Dit is iets wat ik van te voren ben vergeten uit te dokteren:P
 
Kris Peeters

Kris Peeters

06/02/2012 12:18:33
Quote Anchor link
Okay, dit kan je doen:

registreer.php : hier steek je de data in de database. Ik veronderstel dat je hiermee zelf weg kan.
Voorlopig zet ik hier gewoon een print_r. Die wordt dan teruggestuurd naar javascript en wordt in een alert gestoken.
Je moet dan maar zien dat je daar iets nuttiger mee doet.

registreer.php :
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
<?php
  // je hebt hier de post variabelen, ik veronderstel dat je hier zelf mee weg kan.
  print_r($_POST);
?>


index.php (of waar het bij jou ook mag staan)
Code (php)
PHP script in nieuw venster Selecteer het PHP script
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
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Naamloos document</title>
    <meta charset="utf-8">    
    <script src="js/jquery-1.7.1.min.js" type="text/javascript"></script>
    <script src="js/jquery-ui-1.8.17.custom.min.js" type="text/javascript"></script>
    <link type="text/css" href="css/custom-theme/jquery-ui-1.8.17.custom.css" rel="stylesheet" />
    <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() {
        // a workaround for a flaw in the demo system (http://dev.jqueryui.com/ticket/4375), ignore!
       $( "#dialog:ui-dialog" ).dialog( "destroy" );
     var pasnummer = $( "#pasnummer" ),
         voorletters = $( "#voorletters" ),
         achternaam = $( "#achternaam" ),
         geboortedatum = $( "#geboortedatum" ),
         adres = $( "#adres" ),
         postcode = $( "#postcode" ),
         postcodedigit = $( "#postcodedigit" ),
         woonplaats = $( "#woonplaats" ),
         telefoon = $( "#telefoon" ),
         email = $( "#email" ),
         allFields = $( [] ).add( pasnummer ).add( voorletters ).add( achternaam ).add( geboortedatum ).add( adres ).add( postcode ).add( postcodedigit ).add( woonplaats ).add( telefoon ).add( email ),
         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: 600,
        width: 425,
        modal: true,
        buttons: {
            "Toevoegen": function() {
                var bValid = true;
                allFields.removeClass( "ui-state-error" );

                bValid = bValid && checkLength( pasnummer, "pasnummer", 4, 5 );
                bValid = bValid && checkLength( email, "email", 6, 80 );
                bValid = bValid && checkLength( achternaam, "achternaam", 3, 16 );
                bValid = bValid && checkRegexp( achternaam, /^[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( email, /^((([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+(\.([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+)*)|((\x22)((((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(([\x01-\x08\x0b\x0c\x0e-\x1f\x7f]|\x21|[\x23-\x5b]|[\x5d-\x7e]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(\\([\x01-\x09\x0b\x0c\x0d-\x7f]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))))*(((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(\x22)))@((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.?$/i, "eg. [email protected]" );
                bValid = bValid && checkRegexp( pasnummer, /^([0-9a-zA-Z])+$/, "pasnummer field only allow : a-z 0-9" );

                if ( bValid ) {
                    $( "#users tbody" ).append( "<tr>" +
                        "<td></td>" +
                        "<td>" + pasnummer.val() + "</td>" +
                        "<td>" + voorletters.val() + "</td>" +
                        "<td>" + achternaam.val() + "</td>" +
                        "<td>" + geboortedatum.val() + "</td>" +
                        "<td>" + adres.val() + "</td>" +
                        "<td>" + postcode.val() + postcodedigit.val() + "</td>" +
                        "<td>" + woonplaats.val() + "</td>" +
                        "<td>" + telefoon.val() + "</td>" +
                        "<td>" + email.val() + "</td>" +
                    "</tr>" );
                    var data =
                      'pasnummer='        + escape(pasnummer.val()) +
                      '&voorletters='     + escape(voorletters.val()) +
                      '&achternaam='      + escape(achternaam.val()) +
                      '&geboortedatum='   + escape(geboortedatum.val()) +
                      '&adres='           + escape(adres.val()) +
                      '&postcode='        + escape(postcode.val()) +
                      '&postcodedigit='   + escape(postcodedigit.val()) +
                      '&woonplaats='      + escape(woonplaats.val()) +
                      '&telefoon='        + escape(telefoon.val()) +
                      '&email='           + escape(email.val()) ;
                    // zelf aanpassen !!
                    $.ajax({
                      type: 'POST',
                      url: 'registreer.php',
                      data: data,
                      success: function(data) {
                        // je kan hier best iets nuttiger doen dan een alert
                        // maar in testfase kan je op registreer.php een bericht sturen,
                        // die je hier te zien krijgt, in de variabele data
                        // eventuele error_reporting krijg je hier ook te zien.
                        alert(data);
                      }
                    });
                  $( this ).dialog( "close" );
                }
            },
            Annuleren: function() {
                $( this ).dialog( "close" );
            }
        },
        close: function() {
            allFields.val( "" ).removeClass( "ui-state-error" );
        }
    });
      $("#create-user")
        .button()
        .click(function() {
            $( "#dialog-form" ).dialog( "open" );
        });
      });
    </script>
  </head>
  <body>
    <div class="demo">
    <div id="dialog-form" title="Voeg een nieuwe kaarthouder toe">
      <p class="validateTips">Velden met een * zijn verplicht!</p>    
      <form id="registreerform">
      <fieldset>
          <label for="pasnummer">Pasnummer*</label>
          <input type="text" name="pasnummer" id="pasnummer" class="text ui-widget-content ui-corner-all" />
          <label for="voorletters">Voorletters</label>
          <input type="text" name="voorletters" id="voorletters" class="text ui-widget-content ui-corner-all" />
          <label for="achternaam">Achternaam*</label>
          <input type="text" name="achternaam" id="achternaam" class="text ui-widget-content ui-corner-all" />
          <label for="geboortedatum">Geboortedatum</label>
          <input type="text" name="geboortedatum" id="geboortedatum" class="text ui-widget-content ui-corner-all" />
          <label for="adres">Adres</label>
          <input type="text" name="adres" id="adres" class="text ui-widget-content ui-corner-all" />
          <label for="postcode">Postcode*</label>
          <input type="text" name="postcode" id="postcode" class="text ui-widget-content ui-corner-all" width="10" />
          <label for="postcodedigit">Postcode*</label>
          <input type="text" name="postcodedigit" id="postcodedigit" class="text ui-widget-content ui-corner-all" width="5" />
          <label for="woonplaats">Woonplaats*</label>
          <input type="text" name="woonplaats" id="woonplaats" class="text ui-widget-content ui-corner-all" />
          <label for="telefoon">Telefoon</label>
          <input type="text" name="telefoon" id="telefoon" class="text ui-widget-content ui-corner-all" />
          <label for="email">Email</label>
          <input type="text" name="email" id="email" value="" class="text ui-widget-content ui-corner-all" />
      </fieldset>
      </form>
    </div>
    <div id="users-contain" class="ui-widget">
        <h1>Bestaande kaarthouders:</h1>
        <table id="users" class="ui-widget ui-widget-content">
            <thead>
                <tr class="ui-widget-header ">
                    <th>Delete</th>
                    <th>Pasnummer</th>
                    <th>Voorletters</th>
                    <th>Achternaam</th>
                    <th>Geboortedatum</th>
                    <th>Adres</th>
                    <th>Postcode</th>
                    <th>Woonplaats</th>
                    <th>Telefoon</th>
                    <th>Email</th>
                </tr>
            </thead>
            <tbody>
            </tbody>

        </table>
    </div>
    <button id="create-user">Nieuwe kaarthouder</button>
    </div><!-- End demo -->
    <div class="demo-description">
    </div><!-- End demo-description -->
  </body>
</html>


Let op lijnen 110 -> 120. Daar kan je zelf nog aanpassingen doen.
Gewijzigd op 06/02/2012 12:27:25 door Kris Peeters
 
Fabian Pas

Fabian Pas

06/02/2012 14:01:36
Quote Anchor link
Het is ook mogelijk om de gehele form te serializen, mee te sturen in de AJAX call en vervolgens te checken in je PHP file. En dan natuurlijk JSON gebruiken! Dan kun je al die regex's met JS vergeten en gewoon doen in PHP. Het is maar waar je voorkeur ligt.
 



Overzicht Reageren

 
 

Om de gebruiksvriendelijkheid van onze website en diensten te optimaliseren maken wij gebruik van cookies. Deze cookies gebruiken wij voor functionaliteiten, analytische gegevens en marketing doeleinden. U vindt meer informatie in onze privacy statement.