Door
Daan Vee
op 01-07-2016 14:12
gewijzigd op 01-07-2016 14:18
3.981 views
Ik POST op de volgende manier informatie door naar SaveItem.php:
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
//<![CDATA[
// als je document klaar is met laden...
$().ready(function() {
// als het formulier #theForm wordt gesubmit...
$('form#theForm').submit(function(e) {
// vang het submit event af, jQuery/AJAX handelt dit immers af
e.preventDefault(); // het default gedrag is dat het formulier gePOST wordt, en dat willen we niet
$('#postResult').hide();
$.post(
'shared/saveItem.php?itemID=<?php echo $itemID; ?>', // het script waar je naartoe POST
$('#theForm').serialize(), // verzamel alle form data in 1x (naam, content)
.done(function( data ) {
$('#postResult').html('Gelukt!');
}
.fail(function() {
$('#postResult').html('Er is een fout opgetreden!');
}
.always(function( data ) {
$('#postResult').show();
setTimeout(function(){ $('#postResult').hide(); }, 3000);
}
'json' // geef een "hint" over het type van de terug te ontvangen data
);
});
});
//]]>
</script>
Ik merk dat informatie via SaveItem.php in de database terecht komt.
Maar SaveItem.php controleert ook of alle velden zijn ingevuld.
Indien dat niet het geval is volgt een melding.
Hoe kan ik in #postResult weergeven of er een veld niet is ingevuld, en het script op SaveItem.php niet helemaal is uitgevoerd daardoor?
Hoe pas ik nu onderstaande code aan, zodat er een melding zichtbaar wordt?
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
//<![CDATA[
// als je document klaar is met laden...
$().ready(function() {
// als het formulier #theForm wordt gesubmit...
$('form#theForm').submit(function(e) {
// vang het submit event af, jQuery/AJAX handelt dit immers af
e.preventDefault(); // het default gedrag is dat het formulier gePOST wordt, en dat willen we niet
$('#postResult').hide();
$.post(
'shared/saveItem.php?itemID=<?php echo $itemID; ?>', // het script waar je naartoe POST
$('#theForm').serialize(), // verzamel alle form data in 1x (naam, content)
.done(function( data ) {
$('#postResult').html('Gelukt!');
}
.fail(function() {
$('#postResult').html('Er is een fout opgetreden!');
}
.always(function( data ) {
$('#postResult').show();
setTimeout(function(){ $('#postResult').hide(); }, 3000);
}
'json' // geef een "hint" over het type van de terug te ontvangen data
);
});
});
//]]>
</script>
Of een array met:
success: true of false
message: die iets over de status zegt
(optioneel) errors: array met veldnamen/boodschappen wat er aan scheelt
De index "success" omvat dan de status als "goed" of "fout" als een boolse waarde zonder een custom code waar je expliciet op moet controleren om af te leiden of het "goed" of "fout" is gegaan. Wat mij nogal omslachtig lijkt