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
$(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;
});
});
HTML
<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>
Iemand die meer verstand heeft van dit (kan niet heel moeilijk zijn ;) en mij wat advies kan geven?