Ingevoerde gegevens opslaan als Cookie
Onderin heb je een checkbox staan waarmee je ingevoerde gegevens kan opslaan. Zo iets wil ik voor de klanten gegevens gebruiken, dus voor de volgende keer hoeven de klanten minder in te voeren en bij het wegvinken zal alle gegevens verdwijnen.
Klantengegevens:
-Voornaam
-Achtenaam
-Woonplaats
-Postcode
-Telefoonnummer
Ik heb dit gevonden (http://www.tutorialspoint.com/javascript/javascript_cookies.htm) maar dit werkt niet met checkbox, de klanten moeten met checkbox toestemming er voor geven.
Alvast bedankt.
http://www.w3schools.com/html/html5_webstorage.asp
Als je de klantgegevens in een JSON stopt dan kun je alle gegevens in één keer opslaan.
De volgende keer lees je ze uit en stopt ze terug in het formulier. Enkel javascript.
Ik heb wel een javascript de waarde van input opgeslagen wordt, maar hiervoor wil ik met checkbox mee werken dus aanvinken is opslaan en wegvinken is wissen en vervolgens druk op button om form te verwerken.
Eerste keer even formulier invullen, vinkje aanzetten en versturen.
Dan vernieuwen (F5) en de gegevens worden automatisch ingevuld.
Code (php)
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
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
<html>
<head>
<meta charset="UTF-8">
<title>Title of the document</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<form id='login' action='submit.php' method='post' accept-charset='UTF-8'>
<input type='hidden' name='submitted' id='submitted' value='1'/>
<label for='username' >Name:</label>
<input type='text' name='username' id='username' maxlength="50" required /><br>
<label for='email' >Email:</label>
<input type='email' name='email' id='email' maxlength="100" required /><br>
<label for='saveform' >Bewaar mijn gegevens</label>
<input type='checkbox' name='saveform' id='saveform' /><br>
<input type='submit' value='Verzenden' />
</form>
<script>
// welke velden wil je bewaren, noteer het id
var formFields = ['username','email'];
// bewaar de opgegeven velden in de localstorage
function localStorageSave() {
var values = [];
if (typeof(Storage) != "undefined") { // check browser support
for(var i = 0 ; i < formFields.length ; i++) // zet formfield values in een array
values.push($('#'+formFields[i]).val());
var json = JSON.stringify(values); // maak een json string
localStorage.setItem("formDetails", json); // sla de json string op
}
}
// haal de opgegeven velden op van de localstorage
function localStorageLoad() {
if (typeof(Storage) != "undefined") { // check browser support
var json = localStorage.getItem("formDetails"); // haal de json string op
var values = JSON.parse(json); // zet de JSON terug in een array
if(values) { // als de array geldig is
$('#saveform').prop('checked', true); // zet direct de checkbox weer aan
for(var i = 0 ; i < formFields.length ; i++) // voor elk formfield
$('#'+formFields[i]).val(values[i]); // set de formfield value
}
}
}
$( document ).ready(function() {
localStorageLoad(); // probeer formfields te laden
$( "#login" ).submit(function( event ) { // catch form on submit
if($('#saveform').prop('checked')) { // indien de checkbox aangevinkt is
localStorageSave(); // bewaar form fields
} else {
localStorage.removeItem("formDetails"); // anders opgeslagen gegevens wissen
}
return true; // submit form
});
});
</script>
</body>
</html>
<head>
<meta charset="UTF-8">
<title>Title of the document</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<form id='login' action='submit.php' method='post' accept-charset='UTF-8'>
<input type='hidden' name='submitted' id='submitted' value='1'/>
<label for='username' >Name:</label>
<input type='text' name='username' id='username' maxlength="50" required /><br>
<label for='email' >Email:</label>
<input type='email' name='email' id='email' maxlength="100" required /><br>
<label for='saveform' >Bewaar mijn gegevens</label>
<input type='checkbox' name='saveform' id='saveform' /><br>
<input type='submit' value='Verzenden' />
</form>
<script>
// welke velden wil je bewaren, noteer het id
var formFields = ['username','email'];
// bewaar de opgegeven velden in de localstorage
function localStorageSave() {
var values = [];
if (typeof(Storage) != "undefined") { // check browser support
for(var i = 0 ; i < formFields.length ; i++) // zet formfield values in een array
values.push($('#'+formFields[i]).val());
var json = JSON.stringify(values); // maak een json string
localStorage.setItem("formDetails", json); // sla de json string op
}
}
// haal de opgegeven velden op van de localstorage
function localStorageLoad() {
if (typeof(Storage) != "undefined") { // check browser support
var json = localStorage.getItem("formDetails"); // haal de json string op
var values = JSON.parse(json); // zet de JSON terug in een array
if(values) { // als de array geldig is
$('#saveform').prop('checked', true); // zet direct de checkbox weer aan
for(var i = 0 ; i < formFields.length ; i++) // voor elk formfield
$('#'+formFields[i]).val(values[i]); // set de formfield value
}
}
}
$( document ).ready(function() {
localStorageLoad(); // probeer formfields te laden
$( "#login" ).submit(function( event ) { // catch form on submit
if($('#saveform').prop('checked')) { // indien de checkbox aangevinkt is
localStorageSave(); // bewaar form fields
} else {
localStorage.removeItem("formDetails"); // anders opgeslagen gegevens wissen
}
return true; // submit form
});
});
</script>
</body>
</html>
Gewijzigd op 22/11/2014 02:44:21 door Frank Nietbelangrijk
Codepen.io kende ik ook al niet het werkt heel erg stabiel en met mobiel kan je ook bezoeken.
2 dingen heb ik van je geleerd, ik ben je heel erg dankbaar.
Gewijzigd op 22/11/2014 17:33:03 door johan de wit