Wanneer en hoe wordt SubmitForm() aangeroepen? Als je een formulier submit? Dit default gedrag moet je dan afvangen indien je via AJAX deze data wil POSTen, anders wordt je formulier gewoon gesubmit en dat resulteert in het (her)laden van een (mogelijk andere) pagina.
Je kunt beter een onsubmit listener aan een formulier hangen...
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>show dialog after post</title>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<form id="theForm">
<p><label for="naam">naam</label><input type="text" name="naam" id="naam"></p>
<p><label for="content">content</label><textarea name="content" id="content"></textarea></p>
<div>
<button type="submit">verzenden</button>
</div>
</form>
<div id="postResult" style="display: none;"></div>
<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(
'post.php', // het script waar je naartoe POST
$('#theForm').serialize(), // verzamel alle form data in 1x (naam, content)
function(ok) { // callback functie die wordt uitgevoerd na terugontvangen (JSON) resultaat
if (ok) {
$('#postResult').css('background-color', '#ccffcc').text('Success! :)');
} else {
// doe ook iets voor als het misgaat...
$('#postResult').css('background-color', '#ffcccc').text('Fail! :(');
}
$('#postResult').show();
}, // einde callback functie
'json' // geef een "hint" over het type van de terug te ontvangen data
);
});
});
//]]>
</script>
</body>
</html>
post.php (het script dat de AJAX POST verwerkt):
<?php
// Declareer Content-Type en character encoding van het resultaat.
header('Content-Type: application/json; charset=UTF-8');
$success = false;
if ($_SERVER['REQUEST_METHOD'] == 'POST') {
// voer controles uit, verwerk formulier, wat mogelijk resulteert in
// ...
$success = true;
}
// Of wat voor informatie je allemaal terug wilt sturen, voor nu enkel een boolean (true of false)
echo json_encode($success);
?>
Hoi Thomas, super bedankt! Maar m'n formulier saved al wel... De melding krijg ik alleen niet te zien op deze manier:
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
function SubmitForm() {
var content = $("#content").val();
var naam = $("#naam").val();
$.post("shared/saveItem.php", { content: content, naam: naam },
function(data) {
$( "#opslaan" ).show();
});
}
</script>
Moet ik het dan toch helemaal ombouwen? Want in de <div id="opslaan"> staat alleen maar de melding: de gegevens zijn opgeslagen.
Dus ik hoef niks terug te roepen van een andere save-pagina.
Of begrijp ik je uitleg verkeerd?
Het punt is dus alleen dat de melding niet zichtbaar wordt. Het formulier saved wel keurig....
