Formulier submit met Jquery
Ik ben op het moment bezig om een formulier te verzenden met JQuery/Ajax, om zo de pagina niet te hoeven herladen..
Het punt is nu alleen: de pagina herlaad wel, en er wordt niets verzonden..
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
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
$(function() {
$('.error').hide();
$("#ideebus-submitbutton").click(function() {
// validate and process form here
$('.error').hide();
var name = $("input#ideebus-inputName").val();
if (name == "") {
$("div#ideebus-inputName-group").addClass('has-error');
$("input#ideebus-inputName").focus();
return false;
}
var email = $("input#ideebus-inputEmail").val();
if (email == "") {
$("div#ideebus-inputEmail-group").addClass('has-error');
$("input#ideebus-inputEmail").focus();
return false;
}
var niveau = $("input#ideebus-selectNiveau").val();
if (niveau == "") {
$("div#ideebus-selectNiveau-group").addClass('has-error');
$("input#ideebus-selectNiveau").focus();
return false;
}
var year = $("input#ideebus-selectyear").val();
if (year == "") {
$("div#ideebus-selectyear-group").addClass('has-error');
$("input#ideebus-selectyear").focus();
return false;
}
var idee = $("textarea#ideebus-klacht").val();
if (email == "") {
$("div#ideebus-inputIdee-group").addClass('has-error');
$("textarea#ideebus-klacht").focus();
return false;
}
var dataString = 'ideebus-naam='+ naam + '&ideebus-email=' + email + '&ideebus-niveau=' + niveau + '&ideebus-leerjaar=' + year + '&ideebus-idee=' + idee;
//alert (dataString);return false;
$.ajax({
type: "POST",
url: "/core/assets/php/formprocess.php",
data: dataString,
success: function() {
$('#ideeform').fadeOut();
$('#ideeform').fadeIn(1500, function() {
$('#message').html('<p class="lead"><strong>Yess, je idee is verzonden!</strong><br>Top dat je je idee of suggestie hebt doorgegeven aan ons, waarschijnlijk hoor je binnenkort meer van ons!</p>');
}); // end fade
}
}); // end ajax
return false;
});
});
$('.error').hide();
$("#ideebus-submitbutton").click(function() {
// validate and process form here
$('.error').hide();
var name = $("input#ideebus-inputName").val();
if (name == "") {
$("div#ideebus-inputName-group").addClass('has-error');
$("input#ideebus-inputName").focus();
return false;
}
var email = $("input#ideebus-inputEmail").val();
if (email == "") {
$("div#ideebus-inputEmail-group").addClass('has-error');
$("input#ideebus-inputEmail").focus();
return false;
}
var niveau = $("input#ideebus-selectNiveau").val();
if (niveau == "") {
$("div#ideebus-selectNiveau-group").addClass('has-error');
$("input#ideebus-selectNiveau").focus();
return false;
}
var year = $("input#ideebus-selectyear").val();
if (year == "") {
$("div#ideebus-selectyear-group").addClass('has-error');
$("input#ideebus-selectyear").focus();
return false;
}
var idee = $("textarea#ideebus-klacht").val();
if (email == "") {
$("div#ideebus-inputIdee-group").addClass('has-error');
$("textarea#ideebus-klacht").focus();
return false;
}
var dataString = 'ideebus-naam='+ naam + '&ideebus-email=' + email + '&ideebus-niveau=' + niveau + '&ideebus-leerjaar=' + year + '&ideebus-idee=' + idee;
//alert (dataString);return false;
$.ajax({
type: "POST",
url: "/core/assets/php/formprocess.php",
data: dataString,
success: function() {
$('#ideeform').fadeOut();
$('#ideeform').fadeIn(1500, function() {
$('#message').html('<p class="lead"><strong>Yess, je idee is verzonden!</strong><br>Top dat je je idee of suggestie hebt doorgegeven aan ons, waarschijnlijk hoor je binnenkort meer van ons!</p>');
}); // end fade
}
}); // end ajax
return false;
});
});
HTML
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
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
<div class="panel-body">
<div id="ideeform">
<form class="form-horizontal">
<input type="hidden" name="form_name" value="ideebus">
<fieldset>
<div class="form-group" id="ideebus-inputName-group">
<label for="ideebus-inputName" class="col-lg-2 control-label">Naam</label>
<div class="col-lg-10">
<input type="text" class="form-control" id="ideebus-inputName" placeholder="Pietje Jansen" name="ideebus-naam">
</div>
</div>
<div class="form-group" id="ideebus-inputEmail-group">
<label for="ideebus-inputEmail" class="col-lg-2 control-label">Email</label>
<div class="col-lg-10">
<input type="email" class="form-control" id="ideebus-inputEmail" placeholder="[email protected]" name="ideebus-email">
</div>
</div>
<div class="form-group" id="ideebus-selectNiveau-group">
<label for="ideebus-selectNiveau" class="col-lg-2 control-label">Niveau</label>
<div class="col-lg-10">
<select class="form-control" id="ideebus-selectNiveau" onchange="yearSelect('ideebus')" name="ideebus-niveau">
<option disabled="" selected="">Kies je niveau...</option>
<option value="vmbo-bb">VMBO-BB</option>
<option value="vmbo-kb">VMBO-KB</option>
<option value="vmbo-t">VMBO-T / MAVO</option>
<option value="havo">HAVO</option>
<option value="vwo">VWO / Atheneum</option>
</select>
</div>
</div>
<div class="form-group" id="ideebus-selectYear-group" style="display: none;">
<label for="ideebus-selectYear" class="col-lg-2 control-label">Leerjaar</label>
<div class="col-lg-10">
<select class="form-control" id="ideebus-selectYear" name="ideebus-leerjaar">
<option disabled="" selected="">Kies je leerjaar...</option>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
</select>
</div>
</div>
<div class="form-group" id="ideebus-inputIdee-group">
<label for="ideebus-klacht" class="col-lg-2 control-label">Idee</label>
<div class="col-lg-10">
<textarea class="form-control" rows="3" id="ideebus-klacht" name="ideebus-idee"></textarea>
<span class="help-block">Het mag natuurlijk ook een suggestie of een tip zijn.</span>
</div>
</div>
<div class="form-group">
<div class="col-lg-10 col-lg-offset-2">
<input type="submit" class="btn btn-primary" id="ideebus-submitbutton" value="Verstuur mijn idee!">
</div>
</div>
</fieldset>
</form>
</div>
<div id="ideeform">
<form class="form-horizontal">
<input type="hidden" name="form_name" value="ideebus">
<fieldset>
<div class="form-group" id="ideebus-inputName-group">
<label for="ideebus-inputName" class="col-lg-2 control-label">Naam</label>
<div class="col-lg-10">
<input type="text" class="form-control" id="ideebus-inputName" placeholder="Pietje Jansen" name="ideebus-naam">
</div>
</div>
<div class="form-group" id="ideebus-inputEmail-group">
<label for="ideebus-inputEmail" class="col-lg-2 control-label">Email</label>
<div class="col-lg-10">
<input type="email" class="form-control" id="ideebus-inputEmail" placeholder="[email protected]" name="ideebus-email">
</div>
</div>
<div class="form-group" id="ideebus-selectNiveau-group">
<label for="ideebus-selectNiveau" class="col-lg-2 control-label">Niveau</label>
<div class="col-lg-10">
<select class="form-control" id="ideebus-selectNiveau" onchange="yearSelect('ideebus')" name="ideebus-niveau">
<option disabled="" selected="">Kies je niveau...</option>
<option value="vmbo-bb">VMBO-BB</option>
<option value="vmbo-kb">VMBO-KB</option>
<option value="vmbo-t">VMBO-T / MAVO</option>
<option value="havo">HAVO</option>
<option value="vwo">VWO / Atheneum</option>
</select>
</div>
</div>
<div class="form-group" id="ideebus-selectYear-group" style="display: none;">
<label for="ideebus-selectYear" class="col-lg-2 control-label">Leerjaar</label>
<div class="col-lg-10">
<select class="form-control" id="ideebus-selectYear" name="ideebus-leerjaar">
<option disabled="" selected="">Kies je leerjaar...</option>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
</select>
</div>
</div>
<div class="form-group" id="ideebus-inputIdee-group">
<label for="ideebus-klacht" class="col-lg-2 control-label">Idee</label>
<div class="col-lg-10">
<textarea class="form-control" rows="3" id="ideebus-klacht" name="ideebus-idee"></textarea>
<span class="help-block">Het mag natuurlijk ook een suggestie of een tip zijn.</span>
</div>
</div>
<div class="form-group">
<div class="col-lg-10 col-lg-offset-2">
<input type="submit" class="btn btn-primary" id="ideebus-submitbutton" value="Verstuur mijn idee!">
</div>
</div>
</fieldset>
</form>
</div>
Iemand die meer verstand heeft van dit (kan niet heel moeilijk zijn ;) en mij wat advies kan geven?
onsubmit="return false;"
Dus dat komt er dan zo uit te zien :
<form class="form-horizontal" onsubmit="return false;">
Dat zou het verversen moeten voorkomen. Dan kun je beginnen met je ajax call debuggen
Jacco Engel op 10/06/2015 11:25:02:
probeer dit eens aan je form toe te voegen :
onsubmit="return false;"
Dus dat komt er dan zo uit te zien :
<form class="form-horizontal" onsubmit="return false;">
Dat zou het verversen moeten voorkomen. Dan kun je beginnen met je ajax call debuggen
onsubmit="return false;"
Dus dat komt er dan zo uit te zien :
<form class="form-horizontal" onsubmit="return false;">
Dat zou het verversen moeten voorkomen. Dan kun je beginnen met je ajax call debuggen
Dit is inderdaad een oplossing maar niet de beste oplossing. Beter gebruik je een prevent default om alles netjes bij elkaar te houden.
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
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
$(function() {
$('.error').hide();
$("#ideebus-submitbutton").click(function(e) {
// validate and process form here
e.preventDefault();
$('.error').hide();
var name = $("input#ideebus-inputName").val();
if (name == "") {
$("div#ideebus-inputName-group").addClass('has-error');
$("input#ideebus-inputName").focus();
return false;
}
var email = $("input#ideebus-inputEmail").val();
if (email == "") {
$("div#ideebus-inputEmail-group").addClass('has-error');
$("input#ideebus-inputEmail").focus();
return false;
}
var niveau = $("input#ideebus-selectNiveau").val();
if (niveau == "") {
$("div#ideebus-selectNiveau-group").addClass('has-error');
$("input#ideebus-selectNiveau").focus();
return false;
}
var year = $("input#ideebus-selectyear").val();
if (year == "") {
$("div#ideebus-selectyear-group").addClass('has-error');
$("input#ideebus-selectyear").focus();
return false;
}
var idee = $("textarea#ideebus-klacht").val();
if (email == "") {
$("div#ideebus-inputIdee-group").addClass('has-error');
$("textarea#ideebus-klacht").focus();
return false;
}
var dataString = 'ideebus-naam='+ naam + '&ideebus-email=' + email + '&ideebus-niveau=' + niveau + '&ideebus-leerjaar=' + year + '&ideebus-idee=' + idee;
//alert (dataString);return false;
$.ajax({
type: "POST",
url: "/core/assets/php/formprocess.php",
data: dataString,
success: function() {
$('#ideeform').fadeOut();
$('#ideeform').fadeIn(1500, function() {
$('#message').html('<p class="lead"><strong>Yess, je idee is verzonden!</strong><br>Top dat je je idee of suggestie hebt doorgegeven aan ons, waarschijnlijk hoor je binnenkort meer van ons!</p>');
}); // end fade
}
}); // end ajax
return false;
});
});
$('.error').hide();
$("#ideebus-submitbutton").click(function(e) {
// validate and process form here
e.preventDefault();
$('.error').hide();
var name = $("input#ideebus-inputName").val();
if (name == "") {
$("div#ideebus-inputName-group").addClass('has-error');
$("input#ideebus-inputName").focus();
return false;
}
var email = $("input#ideebus-inputEmail").val();
if (email == "") {
$("div#ideebus-inputEmail-group").addClass('has-error');
$("input#ideebus-inputEmail").focus();
return false;
}
var niveau = $("input#ideebus-selectNiveau").val();
if (niveau == "") {
$("div#ideebus-selectNiveau-group").addClass('has-error');
$("input#ideebus-selectNiveau").focus();
return false;
}
var year = $("input#ideebus-selectyear").val();
if (year == "") {
$("div#ideebus-selectyear-group").addClass('has-error');
$("input#ideebus-selectyear").focus();
return false;
}
var idee = $("textarea#ideebus-klacht").val();
if (email == "") {
$("div#ideebus-inputIdee-group").addClass('has-error');
$("textarea#ideebus-klacht").focus();
return false;
}
var dataString = 'ideebus-naam='+ naam + '&ideebus-email=' + email + '&ideebus-niveau=' + niveau + '&ideebus-leerjaar=' + year + '&ideebus-idee=' + idee;
//alert (dataString);return false;
$.ajax({
type: "POST",
url: "/core/assets/php/formprocess.php",
data: dataString,
success: function() {
$('#ideeform').fadeOut();
$('#ideeform').fadeIn(1500, function() {
$('#message').html('<p class="lead"><strong>Yess, je idee is verzonden!</strong><br>Top dat je je idee of suggestie hebt doorgegeven aan ons, waarschijnlijk hoor je binnenkort meer van ons!</p>');
}); // end fade
}
}); // end ajax
return false;
});
});
zie regel 3 en 5. In de onclick voeg je e toe om het event te kunnen benaderen. Daarnaast prevent je het default gedrag met preventDefault();. Het default gedrag van de button is hier het submitten van het formulier. Dit gebeurt voordat je AJAX request wordt getriggerd dus heb je ook geen output.