JavaScript AJAX: Form alle n Sekunden automatisch senden?

Pfandfinder

Lieutenant
Registriert
Nov. 2020
Beiträge
654
ich habe für eine interne Admin-Seite derzeit eine html-Form und nutze AJAX und formulare in die Datenbank zu speichern, das ist so aufgebaut:
Javascript:
$(function(){
    var form = $("#meineform");
    var formMessages = $("#result");
    $(form).submit(function(e){
    $("#submit").attr('disabled', true);
      e.preventDefault();
      $.ajax({
        type: 'POST',
        url: 'save.php',
        data: new FormData(document.forms['meineform']),
        contentType: false,
        processData: false,
      })
        .done(function(response){
            $(formMessages).html(response);
        })
        .fail(function(data){
            $(formMessages).html(data.responseText);
        });
    });
});

Jetzt möchte ich aber dass die Eingaben automatisch alle n Sekunden gespeichert werden, also dass man nicht mehr auf den Button drücken muss um das Form zu senden. wie kann ich das mit dem Script umsetzen ? die done und fail Function fällt ja dann auch weg.
 
du könntest deine Funktion, bzw. das $.ajax(...) mit setInterval in einem interval von x Millisekunden ausführen lassen.
 
Ich würde eher auf ein setTimeout gehen und jedesmal prüfen ob die letzte anfrage schon beantwortet wurde. Ob du noch einmal initial vor einer Usereingabe die Form abschicken willst bleibt dir überlassen, zb in dem du form_submit_resolved auf true setzt.

Generell ist es nicht nötig, wenn du schon die variable "form" als jquery objekt selektiert hast, diese nochmal in den jQuery function wrapper zu stecken. Ich habe mir dazu angewöhnt jQuery DOM Objekte mit $ vorne dran zu markieren, dann verwechselt sich das nicht so leicht.

Javascript:
$(function(){
  var $form = $('#meineform'),
      $formMessages = $("#result"),
      timeout,
      form_submit_resolved = false,
      wait = function(){
        timeout = clearTimeout(timeout);
        if ( form_submit_resolved === false ) {
          timeout = setTimeout(wait, 15);
        } else {
          $form.trigger('submit');
        }
      };

  $form.submit(function(e){
    form_submit_resolved = false;
    $("#submit").attr('disabled', true);
    e.preventDefault();

    $.ajax({
      type: 'POST',
      url: 'save.php',
      data: new FormData(document.forms['meineform']),
      contentType: false,
      processData: false,
    })
    .done(function(response){
      $formMessages.html(response);
    })
    .fail(function(data){
      $formMessages.html(data.responseText);
    })
    .always(function(){
      form_submit_resolved = true;
    });
  });

  wait();
});
 
Zuletzt bearbeitet:
  • Gefällt mir
Reaktionen: sandreas und kim88
danke aber das klappt irgendwie nicht, es sendet nie etwas zur save.php bzw. kommt kein Inhalt in der div "result".
 
das hat jetzt nichts mit deiner ursprünglichen frage zu tun sondern mit deinem $.ajax aufruf.
sieh in der browser konsole nach dem log von dem request, da steht die antwort oder der fehler drin und im request die mitgeschickten daten.
 
Zurück
Oben