Löschen eines Formulars und Schließen der Div nach erfolgreicher Post

Question

Ich habe ein Skript, das mein Formular über php-ajax sendet. Es gibt Erfolg zurück, aber was ich tun muss, wenn es erfolgreich war, ist alle Formulardaten zu löschen und das div zu schließen und ein anderes zu laden. Ich habe viele verschiedene Wege ausprobiert, um die Form zu klären und div zu schließen, aber sie scheinen es einfach zu stoppen. Die ID des div zu schließen ist ‚5box‘ Die Arbeits-Skript, das ich brauche, diese hinzuzufügen ist:

$(document).ready(function() { 
    $('#btn-finish').on('click', function() { 

     // Add text 'loading...' right after clicking on the submit button. 
     $('.output_message').text('Processing...'); 

     var form = $(this); 
     $.ajax({ 
      url: form.attr('action'), 
      method: form.attr('method'), 
      data: form.serialize(), 
      success: function(result){ 
       if (result == 'success'){ 
        $('.output_message').text('Message Sent!'); 

       } else { 
        $('.output_message').text('Error Sending email!'); 
       } 
      } 
     }); 

     // Prevent default submission of the form after clicking on the submit button. 
     return false; 

    }); 
}); 

Irgendwelche Ideen

Answer 1

geschätzt würde das Formular löschen können Sie die reset() Methode aufrufen, von das zugrunde liegende Element. Ich bin mir nicht sicher, was Sie mit 'close the div' meinen, aber Sie können hide() aufrufen, damit es verschwindet. Versuchen Sie folgendes:

success: function(result) { 
    if (result == 'success') { 
    $('.output_message').text('Message Sent!'); 
    form[0].reset(); 
    $('#5box').hide(); 
    } else { 
    $('.output_message').text('Error Sending email!'); 
    } 
} 

Beachten Sie auch, dass es viel besser Praxis wäre JSON aus der AJAX-Aufruf zurückzukehren. Sie können dann ein boolesches Flag verwenden, um den Status der Anfrage anzuzeigen.

aktualisieren

<button name ='send' value="Send" type='submit' class='btn btn-primary'>Finish</button>

Da ist der Code Ihrer Schaltfläche gibt es ein anderes Thema ist - Sie verhindert nicht das Formular zu sein einreichen, daher der AJAX-Request abgebrochen . Um dies zu tun, haken Sie das Ereignis submit des Formulars statt den Klick auf die Schaltfläche. Von dort aus können Sie e.preventDefault() anrufen, um die Einreichung zu stoppen. Versuchen Sie folgendes:

<script> 
    $(function() { 
    $('form').on('submit', function(e) { 
     e.preventDefault(); 
     $('.output_message').text('Processing...'); 

     var form = $(this); 
     $.ajax({ 
     url: form.attr('action'), 
     method: form.attr('method'), 
     data: form.serialize(), 
     success: function(result) { 
      if (result == 'success') { 
      $('.output_message').text('Message Sent!'); 
      form[0].reset(); 
      $('#5box').hide(); 
      } else { 
      $('.output_message').text('Error Sending email!'); 
      } 
     } 
     }); 
    }); 
    }); 
</script> 

Hinweis habe ich eine generische 'form' oben Selektor. Sie können dies bei Bedarf zu einem Klassen- oder ID-Selektor im Formular ändern.

Answer 2

für das Clearing von Formularfeldern

$("input[type=text], textarea").val(""); 

prost

Answer 3

Sie auch Trigger als auch

$ ('# form_id') können Auslöser ("Reset").