Bevestiging pagina formulier
ik heb een PHP formulier, echter voor de finishing touch wil ik dat zodra de gebruiker op "verzenden" klikt dat er een bevestiging pagina verschijnt met het bericht "bedankt voor uw aanmelding etc etc".
De gebruiker krijgt nu het bericht onder het formulier te zien zodra hij op verzenden klikt, dit moet echter een nieuwe pagina worden. Iemand tips, opties hoe dat aan te passen hieronder?
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
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
ContactFormSubmit : function() {
$.ajax({
type : 'POST',
url : 'php/contact.php?ts='+new Date().getTime(),
dataType : 'json',
data : $('#ContactForm').serialize(),
success : function(data,textStatus){
//hide the ajax loader
$('#loader').hide();
if(data.result == '1'){
//show success message
$('#success_message').empty().html('Bedankt voor uw aanmelding.');
//reset all form fields
$('#ContactForm')[0].reset();
//envelope animation
$('#envelope').stop().show().animate({'marginTop':'-175px','marginLeft':'-246px','width':'492px','height':'350px','opacity':'0'},function(){
$(this).css({'width':'246px','height':'175px','margin-left':'-123px','margin-top':'-88px','opacity':'1','display':'none'});
});
}
else if(data.result == '-1'){
for(var i=0; i < data.errors.length; ++i ){
if(data.errors[i].value!='')
$("#"+data.errors[i].name).next().html('<span>'+data.errors[i].value+'</span>').fadeIn();
}
}
},
error : function(data,textStatus){}
});
}
};
$.ajax({
type : 'POST',
url : 'php/contact.php?ts='+new Date().getTime(),
dataType : 'json',
data : $('#ContactForm').serialize(),
success : function(data,textStatus){
//hide the ajax loader
$('#loader').hide();
if(data.result == '1'){
//show success message
$('#success_message').empty().html('Bedankt voor uw aanmelding.');
//reset all form fields
$('#ContactForm')[0].reset();
//envelope animation
$('#envelope').stop().show().animate({'marginTop':'-175px','marginLeft':'-246px','width':'492px','height':'350px','opacity':'0'},function(){
$(this).css({'width':'246px','height':'175px','margin-left':'-123px','margin-top':'-88px','opacity':'1','display':'none'});
});
}
else if(data.result == '-1'){
for(var i=0; i < data.errors.length; ++i ){
if(data.errors[i].value!='')
$("#"+data.errors[i].name).next().html('<span>'+data.errors[i].value+'</span>').fadeIn();
}
}
},
error : function(data,textStatus){}
});
}
};
Code (php)
1
window.location = "http://www.blabla.nl/een_pagina.html";
hoe kan ik dat succesvol binnen deze quote invoeren? Ik neem dat het daarin moet gebeuren?
Code (php)
1
$('#success_message').empty().html('Bedankt voor uw aanmelding.');
Gewijzigd op 07/02/2012 10:49:07 door Ger van Steenderen
Dus:
Code (php)
1
2
3
2
3
if(data.result == '1'){
window.location = "http://www.blabla.nl/een_pagina.html";
}
window.location = "http://www.blabla.nl/een_pagina.html";
}
Bedenk wel dat de user dus helemaal weg gaat uit de pagina waar hij nu is en alle verdere acties op die pagina zijn dus nutteloos.
Toevoeging op 07/02/2012 10:54:12:
Nog iets trouwens. Ik zie dat je dit als check hebt als je de data terugkrijgt van de server:
Code (php)
1
2
3
4
5
2
3
4
5
if(data.result == '1'){
} else if(data.result == '-1'){
}
} else if(data.result == '-1'){
}
Maar wat nu als je 0 terug krijgt, of 2? Waarschijnlijk zijn dat geen waardes die jouw php pagina terug zal geven, maar je kan er nooit 100% zeker van zijn dat de data die je terugkrijgt helemaal 100% goed is. Ofwel omdat je code tzt wel eens kan veranderen, ofwel omdat je code gehackt is en je de data misschien helemaal niet van je eigen server terugkrijgt. Zorg dus altijd dat andere waardes ook afgevangen worden. Geef een melding of doe er eventueel niets mee, maar zorg in elk geval voor een veilige afhandeling.
ja AJAX wordt gebruikt, dit is de volledige javascript:
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
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
$(document).ready(function() {
contact.initEventHandlers();
});
var contact = {
initEventHandlers : function() {
/* clicking the submit form */
$('#send').bind('click',function(event){
$('#loader').show();
setTimeout('contact.ContactFormSubmit()',500);
});
/* remove messages when user wants to correct (focus on the input) */
$('.inplaceError',$('#ContactForm')).bind('focus',function(){
var $this = $(this);
var $error_elem = $this.next();
if($error_elem.length)
$error_elem.fadeOut(function(){$(this).empty()});
$('#success_message').empty();
});
/* user presses enter - submits form */
$('#ContactForm input,#ContactForm textarea').keypress(function (e) {
if ((e.which && e.which == 13) || (e.keyCode && e.keyCode == 13)) {
$("#send").click();
return false;
}
else
return true;
});
},
ContactFormSubmit : function() {
$.ajax({
type : 'POST',
url : 'php/contact.php?ts='+new Date().getTime(),
dataType : 'json',
data : $('#ContactForm').serialize(),
success : function(data,textStatus){
//hide the ajax loader
$('#loader').hide();
if(data.result == '1'){
//show success message
$('#success_message').empty().html('onclick="window.location = 'bevestiging.php';"');
//reset all form fields
$('#ContactForm')[0].reset();
//envelope animation
$('#envelope').stop().show().animate({'marginTop':'-175px','marginLeft':'-246px','width':'492px','height':'350px','opacity':'0'},function(){
$(this).css({'width':'246px','height':'175px','margin-left':'-123px','margin-top':'-88px','opacity':'1','display':'none'});
});
}
else if(data.result == '-1'){
for(var i=0; i < data.errors.length; ++i ){
if(data.errors[i].value!='')
$("#"+data.errors[i].name).next().html('<span>'+data.errors[i].value+'</span>').fadeIn();
}
}
},
error : function(data,textStatus){}
});
}
};
contact.initEventHandlers();
});
var contact = {
initEventHandlers : function() {
/* clicking the submit form */
$('#send').bind('click',function(event){
$('#loader').show();
setTimeout('contact.ContactFormSubmit()',500);
});
/* remove messages when user wants to correct (focus on the input) */
$('.inplaceError',$('#ContactForm')).bind('focus',function(){
var $this = $(this);
var $error_elem = $this.next();
if($error_elem.length)
$error_elem.fadeOut(function(){$(this).empty()});
$('#success_message').empty();
});
/* user presses enter - submits form */
$('#ContactForm input,#ContactForm textarea').keypress(function (e) {
if ((e.which && e.which == 13) || (e.keyCode && e.keyCode == 13)) {
$("#send").click();
return false;
}
else
return true;
});
},
ContactFormSubmit : function() {
$.ajax({
type : 'POST',
url : 'php/contact.php?ts='+new Date().getTime(),
dataType : 'json',
data : $('#ContactForm').serialize(),
success : function(data,textStatus){
//hide the ajax loader
$('#loader').hide();
if(data.result == '1'){
//show success message
$('#success_message').empty().html('onclick="window.location = 'bevestiging.php';"');
//reset all form fields
$('#ContactForm')[0].reset();
//envelope animation
$('#envelope').stop().show().animate({'marginTop':'-175px','marginLeft':'-246px','width':'492px','height':'350px','opacity':'0'},function(){
$(this).css({'width':'246px','height':'175px','margin-left':'-123px','margin-top':'-88px','opacity':'1','display':'none'});
});
}
else if(data.result == '-1'){
for(var i=0; i < data.errors.length; ++i ){
if(data.errors[i].value!='')
$("#"+data.errors[i].name).next().html('<span>'+data.errors[i].value+'</span>').fadeIn();
}
}
},
error : function(data,textStatus){}
});
}
};
Dit is het formulier nu:
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
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
<form id="ContactForm" action="">
<p>
<label>Naam</label>
<input id="name" name="name" class="inplaceError" maxlength="120" type="text" class="error" autocomplete="off"/>
<span class="error" style="display:none; margin-left:5px;"></span>
</p>
<p>
<label>Bedrijfsnaam</label>
<input id="bedrijfsnaam" name="bedrijfsnaam" class="inplaceError" maxlength="120" type="text" autocomplete="off"/>
<span class="error" style="display:none; margin-left:5px;"></span>
</p>
<p>
<label>E-mail</label>
<input id="email" name="email" class="inplaceError" maxlength="120" type="text" autocomplete="off"/>
<span class="error" style="display:none; margin-left:5px;"></span>
</p>
<p>
<label>Telefoon</label>
<input id="telefoon" name="telefoon" class="inplaceError" maxlength="120" type="text" autocomplete="off"/>
<span class="error" style="display:none; margin-left:5px;"></span>
</p>
<p>
<label>Datum</label>
<select name="datum" id="datum" class="inplaceError">
<option value="">Selecteer uw voorkeursdatum..</option>
<?php
// Maak een array waar alle datums die WEL mogen in komen te staan :)
$aDatums = array();
// Haal alle datums uit de DATUMS tabel
$qQuery = 'SELECT DATE_FORMAT(dDatum, "%d-%m-%Y") as dDatum FROM datums ORDER BY datums.dDatum ASC';
$mQuery = mysql_query($qQuery);
// Haal alle data er 1 voor 1 uit
while($fQuery = mysql_fetch_array($mQuery)){
array_push($aDatums, $fQuery['dDatum']);
// Doe nu een query naar het bepaalde item, als deze dus minder dan 20x voorkomt dan mag hij nog worden weergegeven anders niet
$qCheckRecords = 'SELECT * FROM contact WHERE datum = "'.$fQuery['dDatum'].'"';
$mCheckRecords = mysql_query($qCheckRecords);
$fCheckRecords = mysql_fetch_array($mCheckRecords);
$cCheckRecords = mysql_num_rows($mCheckRecords);
// Check of er minder dan * aantal in de DB staan
if($cCheckRecords < 20){
// Ik doe hier niets :[
} else {
$aDatums = array_diff($aDatums, array($fQuery['dDatum']));
}
}
// Parse alle data uit de array in de dropdown
foreach($aDatums as $sData) {
echo '<option value="'.$sData.'">'.$sData.'</option>';
}
?>
</select>
<span class="error" style="display:none;"></span>
<input id="send" type="button" value="Verstuur"/>
<span id="loader" class="loader" style="display:none;"></span>
</p>
<p>
<span id="success_message" class="success"></span>
</p>
<input id="newcontact" name="newcontact" type="hidden" value="1"></input>
</form>
<p>
<label>Naam</label>
<input id="name" name="name" class="inplaceError" maxlength="120" type="text" class="error" autocomplete="off"/>
<span class="error" style="display:none; margin-left:5px;"></span>
</p>
<p>
<label>Bedrijfsnaam</label>
<input id="bedrijfsnaam" name="bedrijfsnaam" class="inplaceError" maxlength="120" type="text" autocomplete="off"/>
<span class="error" style="display:none; margin-left:5px;"></span>
</p>
<p>
<label>E-mail</label>
<input id="email" name="email" class="inplaceError" maxlength="120" type="text" autocomplete="off"/>
<span class="error" style="display:none; margin-left:5px;"></span>
</p>
<p>
<label>Telefoon</label>
<input id="telefoon" name="telefoon" class="inplaceError" maxlength="120" type="text" autocomplete="off"/>
<span class="error" style="display:none; margin-left:5px;"></span>
</p>
<p>
<label>Datum</label>
<select name="datum" id="datum" class="inplaceError">
<option value="">Selecteer uw voorkeursdatum..</option>
<?php
// Maak een array waar alle datums die WEL mogen in komen te staan :)
$aDatums = array();
// Haal alle datums uit de DATUMS tabel
$qQuery = 'SELECT DATE_FORMAT(dDatum, "%d-%m-%Y") as dDatum FROM datums ORDER BY datums.dDatum ASC';
$mQuery = mysql_query($qQuery);
// Haal alle data er 1 voor 1 uit
while($fQuery = mysql_fetch_array($mQuery)){
array_push($aDatums, $fQuery['dDatum']);
// Doe nu een query naar het bepaalde item, als deze dus minder dan 20x voorkomt dan mag hij nog worden weergegeven anders niet
$qCheckRecords = 'SELECT * FROM contact WHERE datum = "'.$fQuery['dDatum'].'"';
$mCheckRecords = mysql_query($qCheckRecords);
$fCheckRecords = mysql_fetch_array($mCheckRecords);
$cCheckRecords = mysql_num_rows($mCheckRecords);
// Check of er minder dan * aantal in de DB staan
if($cCheckRecords < 20){
// Ik doe hier niets :[
} else {
$aDatums = array_diff($aDatums, array($fQuery['dDatum']));
}
}
// Parse alle data uit de array in de dropdown
foreach($aDatums as $sData) {
echo '<option value="'.$sData.'">'.$sData.'</option>';
}
?>
</select>
<span class="error" style="display:none;"></span>
<input id="send" type="button" value="Verstuur"/>
<span id="loader" class="loader" style="display:none;"></span>
</p>
<p>
<span id="success_message" class="success"></span>
</p>
<input id="newcontact" name="newcontact" type="hidden" value="1"></input>
</form>
Erwin H op 07/02/2012 10:49:49:
Niet in, maar in plaats van dat stuk code.
Dus:
Bedenk wel dat de user dus helemaal weg gaat uit de pagina waar hij nu is en alle verdere acties op die pagina zijn dus nutteloos.
Toevoeging op 07/02/2012 10:54:12:
Nog iets trouwens. Ik zie dat je dit als check hebt als je de data terugkrijgt van de server:
Maar wat nu als je 0 terug krijgt, of 2? Waarschijnlijk zijn dat geen waardes die jouw php pagina terug zal geven, maar je kan er nooit 100% zeker van zijn dat de data die je terugkrijgt helemaal 100% goed is. Ofwel omdat je code tzt wel eens kan veranderen, ofwel omdat je code gehackt is en je de data misschien helemaal niet van je eigen server terugkrijgt. Zorg dus altijd dat andere waardes ook afgevangen worden. Geef een melding of doe er eventueel niets mee, maar zorg in elk geval voor een veilige afhandeling.
Dus:
Code (php)
1
2
3
2
3
if(data.result == '1'){
window.location = "http://www.blabla.nl/een_pagina.html";
}
window.location = "http://www.blabla.nl/een_pagina.html";
}
Bedenk wel dat de user dus helemaal weg gaat uit de pagina waar hij nu is en alle verdere acties op die pagina zijn dus nutteloos.
Toevoeging op 07/02/2012 10:54:12:
Nog iets trouwens. Ik zie dat je dit als check hebt als je de data terugkrijgt van de server:
Code (php)
1
2
3
4
5
2
3
4
5
if(data.result == '1'){
} else if(data.result == '-1'){
}
} else if(data.result == '-1'){
}
Maar wat nu als je 0 terug krijgt, of 2? Waarschijnlijk zijn dat geen waardes die jouw php pagina terug zal geven, maar je kan er nooit 100% zeker van zijn dat de data die je terugkrijgt helemaal 100% goed is. Ofwel omdat je code tzt wel eens kan veranderen, ofwel omdat je code gehackt is en je de data misschien helemaal niet van je eigen server terugkrijgt. Zorg dus altijd dat andere waardes ook afgevangen worden. Geef een melding of doe er eventueel niets mee, maar zorg in elk geval voor een veilige afhandeling.
Hee Erwin,
hoe kan ik jou code implementeren zodat het formulier nog wel blijft functioneren en valideren hierin?
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
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
$(document).ready(function() {
contact.initEventHandlers();
});
var contact = {
initEventHandlers : function() {
/* clicking the submit form */
$('#send').bind('click',function(event){
$('#loader').show();
setTimeout('contact.ContactFormSubmit()',500);
});
/* remove messages when user wants to correct (focus on the input) */
$('.inplaceError',$('#ContactForm')).bind('focus',function(){
var $this = $(this);
var $error_elem = $this.next();
if($error_elem.length)
$error_elem.fadeOut(function(){$(this).empty()});
$('#success_message').empty();
});
/* user presses enter - submits form */
$('#ContactForm input,#ContactForm textarea').keypress(function (e) {
if ((e.which && e.which == 13) || (e.keyCode && e.keyCode == 13)) {
$("#send").click();
return false;
}
else
return true;
});
},
ContactFormSubmit : function() {
$.ajax({
type : 'POST',
url : 'php/contact.php?ts='+new Date().getTime(),
dataType : 'json',
data : $('#ContactForm').serialize(),
success : function(data,textStatus){
//hide the ajax loader
$('#loader').hide();
if(data.result == '1'){
//show success message
$('#success_message').empty().html('Bedankt voor uw aanmelding. Er wordt ter bevestiging een e-mailbericht gestuurd aan het door u opgegeven e-mailadres.');
//reset all form fields
$('#ContactForm')[0].reset();
//envelope animation
$('#envelope').stop().show().animate({'marginTop':'-175px','marginLeft':'-246px','width':'492px','height':'350px','opacity':'0'},function(){
$(this).css({'width':'246px','height':'175px','margin-left':'-123px','margin-top':'-88px','opacity':'1','display':'none'});
});
}
else if(data.result == '-1'){
for(var i=0; i < data.errors.length; ++i ){
if(data.errors[i].value!='')
$("#"+data.errors[i].name).next().html('<span>'+data.errors[i].value+'</span>').fadeIn();
}
}
},
error : function(data,textStatus){}
});
}
};
contact.initEventHandlers();
});
var contact = {
initEventHandlers : function() {
/* clicking the submit form */
$('#send').bind('click',function(event){
$('#loader').show();
setTimeout('contact.ContactFormSubmit()',500);
});
/* remove messages when user wants to correct (focus on the input) */
$('.inplaceError',$('#ContactForm')).bind('focus',function(){
var $this = $(this);
var $error_elem = $this.next();
if($error_elem.length)
$error_elem.fadeOut(function(){$(this).empty()});
$('#success_message').empty();
});
/* user presses enter - submits form */
$('#ContactForm input,#ContactForm textarea').keypress(function (e) {
if ((e.which && e.which == 13) || (e.keyCode && e.keyCode == 13)) {
$("#send").click();
return false;
}
else
return true;
});
},
ContactFormSubmit : function() {
$.ajax({
type : 'POST',
url : 'php/contact.php?ts='+new Date().getTime(),
dataType : 'json',
data : $('#ContactForm').serialize(),
success : function(data,textStatus){
//hide the ajax loader
$('#loader').hide();
if(data.result == '1'){
//show success message
$('#success_message').empty().html('Bedankt voor uw aanmelding. Er wordt ter bevestiging een e-mailbericht gestuurd aan het door u opgegeven e-mailadres.');
//reset all form fields
$('#ContactForm')[0].reset();
//envelope animation
$('#envelope').stop().show().animate({'marginTop':'-175px','marginLeft':'-246px','width':'492px','height':'350px','opacity':'0'},function(){
$(this).css({'width':'246px','height':'175px','margin-left':'-123px','margin-top':'-88px','opacity':'1','display':'none'});
});
}
else if(data.result == '-1'){
for(var i=0; i < data.errors.length; ++i ){
if(data.errors[i].value!='')
$("#"+data.errors[i].name).next().html('<span>'+data.errors[i].value+'</span>').fadeIn();
}
}
},
error : function(data,textStatus){}
});
}
};
Sebastian Veldman op 07/02/2012 11:52:21:
Hee Erwin,
hoe kan ik jou code implementeren zodat het formulier nog wel blijft functioneren en valideren hierin?
hoe kan ik jou code implementeren zodat het formulier nog wel blijft functioneren en valideren hierin?
Niet.