Ajax阻止表单提交

Question

I am using a javascript/ajax script to prevent form submit and giving out some messages like "error!" or "success!". The script does not work. After the form submits the browser redirects the user to the submit.php.

This is my Ajax/Javascript:

$(function() {

    // Kontakt-Formular in das Script laden
    var form = $('#contact-form-edc');

    $(form).submit(function(e) {
        // Den Weiterleitung stoppen
        e.preventDefault();

        // Die Kontakt-Formular Daten in das Script laden
        var formData = $(form).serialize();

        // Das Kontakt-Formular absenden
        $.ajax({
            type: 'POST',
            url: $(form).attr('action'),
            data: formData
        })

        .done(function(response) {
            // Erfolgreiche Meldung
    document.getElementById('success').style.display = "";
          document.getElementById('error').style.display = "none";

            // Das Kontakt-Formular leeren
                     $('input').val('');
            $('textarea').val('');
            $('.button').val('Abschicken')
        })
        .fail(function(data) {
            // Fehler Meldung
      document.getElementById('error').style.display = "";
            document.getElementById('success').style.display ="none";
        });

    });

});

Answer 1

The problem is, you are wrapping your form element in another jquery object. Try this:

$(function() {

    // Kontakt-Formular in das Script laden
    var form = $('#contact-form-edc');

     form.submit(function(e) {   
         // ...