Hier findet ihr ein Tutorial, welches alle x Sekunden die ins Formular eingegeben Daten per AJAX an ein PHP Script übermittelt und speichert.
ajax-autosave.html
// Die Inaktivitätszeit, nach der automatisch gespeichert wird
var inactivity = 4;
var timer = 0;
function Zeitaufschub()
{
timer = inactivity;
}
function Countdown() {
timer--;
if(timer == 0) {
//Die Zeit ist um, bitte speichern
autoSave();
Zeitaufschub();
}
//Die Funktion ruft sich 1x in der Sekunde alleine auf
setTimeout("Countdown()", 1000);
}
function autoSave()
{
if(window.XMLHttpRequest) {
req = new XMLHttpRequest();
}
else if(window.ActiveXObject) {
req = new ActiveXObject("Microsoft.XMLHTTP");
}
try
{
inhalt = document.getElementById('inhalt').value;
id = document.getElementById('id').value;
req.open("GET", "save.php?id="+id+"&value="+inhalt, true);
req.onreadystatechange = triggered;
req.send(null);
} catch(e) {
//nothing;
}
}
function triggered() {
if ((req.readyState == 4) && (req.status == 200)) {
document.getElementById("output").innerHTML = req.responseText;
}
}
//Rufe die Funktion auf
Zeitaufschub();
Countdown();
</script>
</head>
<div id="output"> </div>
<form method="post" action="ajax-autosave.php"> <input type="hidden" id="id" value="5" /> <textarea id="inhalt" onkeyup="Zeitaufschub()"></textarea> <br /><input type="submit" name="abschicken" /> </form>
</body>
</html>
save.php
<?php
include 'connect.php';
//Hier ihr individuelles MySQL Query
echo date('H:i:s').
': '.
$_GET['value'].
' wurde in die DB mit der ID '.
$_GET['id'].
' eingetragen';
?>
