web-dev-qa-db-fra.com

Enregistrer automatiquement les champs de saisie dans la base de données pendant la pause de saisie?

J'ai un grand formulaire sur mon site Web que je veux pouvoir sauvegarder automatiquement dans une base de données au fur et à mesure que l'utilisateur le remplit. Presque identique au fonctionnement de Google Drive lors de la saisie d'un document.

J'essaie de ne pas avoir une fonction qui s'exécute toutes les X secondes, mais plutôt une fonction qui s'exécute lorsque l'utilisateur a interrompu la saisie. Ainsi, si l'utilisateur n'a pas saisi depuis 1 heure mais est toujours sur la page, il ne continue pas à pousser les demandes de sauvegarde.

C'est tout ce que j'ai jusqu'à présent, qui est un formulaire javascript de base.

$("#page1Form").submit(function(event){
  event.preventDefault();  
  $changesSaved.text("Saving...");
  var url = "/backend/forms/page1-POST.php";
        $.ajax({
         type: "POST",
         url: url,
         data: $("#page1Form").serialize(),
         success: function(data) { $changesSaved.text(data); }
        });
  return false;
  });
javascriptjqueryautosave
23
bryan

Réduisez le changement de zone de texte. 

Démo: jsFiddle

Mettez votre appel ajax dans la fonction saveToDB(). Ces noms d’événement ('input propertychange change') se déclencheront lors de tout changement d’élément de formulaire, tel que boutons radio, entrées, etc.

var timeoutId;
$('#the-textarea').on('input propertychange change', function() {
    console.log('Textarea Change');

    clearTimeout(timeoutId);
    timeoutId = setTimeout(function() {
        // Runs 1 second (1000 ms) after the last change    
        saveToDB();
    }, 1000);
});

function saveToDB()
{
    console.log('Saving to the db');    
}

Voici une démo complète vous expliquant comment supprimer un formulaire complet et utiliser ajax pour envoyer les données, puis renvoyer le statut (Enregistrement, Enregistré, etc.).

Démo pleine forme et ajax: jsFiddle

46
MLM

Je sais que cette question est ancienne, mais je voudrais inclure un code que j'aime le plus. Je l'ai trouvé ici: http://codetunnel.io/how-to-implement-autosave-in-votre-web-app/

Voici le code:

var $status = $('#status'),
    $commentBox = $('#commentBox'),
    timeoutId;

$commentBox.keypress(function () {
    $status.attr('class', 'pending').text('changes pending');

    // If a timer was already started, clear it.
    if (timeoutId) clearTimeout(timeoutId);

    // Set timer that will save comment when it fires.
    timeoutId = setTimeout(function () {
        // Make ajax call to save data.
        $status.attr('class', 'saved').text('changes saved');
    }, 750);
});

Il enregistre lorsque l'utilisateur arrête d'écrire pendant plus de 750 millisecondes.

Il a également un statut indiquant à l'utilisateur que les modifications ont été enregistrées ou non.

6
Claudio Shigueo Watanabe

Essayez Sisyphus.js https://github.com/simsalabim/sisyphus . Il conserve les données de formulaire dans la mémoire locale du navigateur et est robuste contre la fermeture des onglets, les pannes du navigateur, etc. 

0
spitz