Formular regelmäßig automatisch speichern

Lesezeit: 3 Minuten

Formular regelmasig automatisch speichern
Krunal Schah

Wie kann ein regelmäßiges Speichern eines Formulars im Hintergrund implementiert werden? Dasselbe wie Google Mail.

  • @flOOr Ja, regelmäßige Ajax-Anfragen.

    – Krunal Schah

    27. April 11 um 13:12 Uhr

  • @flOOr Können Sie ein Beispiel geben?

    – Krunal Schah

    27. April 11 um 13:15 Uhr

  • Bei SO mögen die Leute es, wenn man einen Code schreibt, der nicht funktioniert, und dann fangen alle an, ihn zu reparieren 🙂 Außerdem geht es nicht um Ruby oder Ruby on Rails

    – fl00r

    27. April 11 um 13:41 Uhr

  • @krunal – Ich habe meine Antwort mit einem Beispiel aktualisiert. Hat das bei dir funktioniert?

    – McStretch

    2. Mai 11 um 20:17 Uhr

1642535347 851 Formular regelmasig automatisch speichern
Phrogz

setInterval(function(){
  var form = $('#my-form-id');
  var method = form.attr('method').toLowerCase();      // "get" or "post"
  var action = form.attr('action');                    // url to submit to
  $[method](action, form.serialize(), function(data){
    // Do something with the server response data      
    // Or at least let the user know it saved
  });
},10000);                                              // do it every 10 seconds

Wenn Sie nicht die Methode des Formulars verwenden möchten, sondern immer ‘post’ verwenden möchten, verwenden Sie:

$.post(action, form.serialize(), ... );

Und wenn Sie Ihre eigene Aktion für das automatische Speichern bereitstellen möchten, die sich von der Aktion für das eigentliche Speichern unterscheidet:

$.post("/autosave/comments", form.serialize(), ... );

  • -@Phrogz, können Sie in Ihrem ersten Codeblock erklären, wohin die Formularvalidierung gehen würde?

    – Tim Petersen

    1. Dez. 12 um 12:50

  • @timpeterson 3,5 Jahre zu spät eine Antwort, aber: Ich nehme an, Sie sprechen von clientseitiger Validierung und möchten das Formular nicht einreichen, wenn es ungültig ist? Wenn ja, dann ist es nur Code, oder? if (formIsValid(form)) $[method](...);

    – Phrogz

    27. Juli 16 um 16:52 Uhr

1642535347 226 Formular regelmasig automatisch speichern
McStretch

Sie bräuchten eine zeitgesteuerte Schleife auf der Clientseite, die das Formular alle x Sekunden/Minuten speichert. Ein grober Weg, dies zu tun, wäre, a zu haben setTimeout Javascript-Funktion, die die Feldwerte des Formulars sammelt und das Modell über eine Update-AJAX-Anforderung (PUT im Fall von Rails) aktualisiert.

Beispiel

Hier ist ein grober Weg, es zu tun (dh es könnte einen besseren Weg geben):

// repeat every 10 seconds
var repeatTime = 10 * 1000; 

function updateModel(){
    // get field values (using jQuery, etc.)
    // make ajax request using these field values 
    //(make sure put parameters match model attribute names)
    console.log('updated');
    setTimeout(updateModel, repeatTime); // start call over again
}

setTimeout(updateModel, repeatTime);

Ich habe die eingeschlossen console.log damit Sie dies jetzt in Firebug testen und sehen können, dass die updateModel wird alle 10 Sekunden ausgeführt. Ich würde empfehlen, jQuery zu verwenden, um die zu generieren PUT AJAX-Anfragen.

  • Können Sie ein Beispiel nennen?

    – Krunal Schah

    27. April 11 um 13:15 Uhr

  • Warum nicht setInterval() anstelle von setTimeout() verwenden?

    – Sam Dutton

    6. März 12 um 13:04 Uhr

Warum tun Sie dies nicht rein auf dem Client, indem Sie eine lokale Datenbank (oder was auch immer) verwenden? Das sollte Komplexität, Serverlast und Bandbreitennutzung reduzieren.

Dauerhafte oder sitzungsbezogene Speicherung – was auch immer angemessen ist – und Sie können nach jedem Tastendruck speichern: keine Notwendigkeit für setTimeout().

Sisyphos.js: Gmail-ähnliche clientseitige Entwürfe und noch mehr. Plugin entwickelt, um HTML-Formulardaten in LocalStorage zu speichern, um sie nach Browserabstürzen, Schließen von Tabs und anderen Katastrophen wiederherzustellen.
http://sisyphus-js.herokuapp.com

Smashing-Magazin-Artikel: http://coding.smashingmagazine.com/2011/12/05/sisyphus-js-client-side-drafts-and-more/

Version, die ohne jquery funktioniert:

function urlencodeFormData(fd) {
    var s="";
    function encode(s) { return encodeURIComponent(s).replace(/%20/g,'+'); }
    for (var pair of fd.entries()) {
        if(typeof pair[1]=='string') {
            s += (s?'&':'') + encode(pair[0])+'='+encode(pair[1]);
        }
    }
    return s;
}

setInterval(function() {
    var form = document.getElementById('my-form-id');
    var request = new XMLHttpRequest();
    request.open(form.method, form.action);
    request.setRequestHeader('Content-Type','application/x-www-form-urlencoded')
    request.send(urlencodeFormData(new FormData(form)));
}, 10000);

Wenn Sie etwas mit der Serverantwort tun müssen, lesen Sie diesen Beitrag: https://blog.garstasio.com/you-dont-need-jquery/ajax/#posting

.

537880cookie-checkFormular regelmäßig automatisch speichern

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy