Question

我正在使用javascript / ajax脚本来阻止表单提交并发出一些消息，例如“错误！”或“成功！”。该脚本不起作用。表单提交后，浏览器会将用户重定向到submit.php。

这是我的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

问题是，您将表单元素包装在另一个jquery对象中。试试这个：

$(function() {

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

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

Answer 2

return false;会做你想做的事，你可以像这样编码......

<form ... onsubmit='checkForm()'>

和js将是

    function checkForm()
    {
    //your checks
    ..
    if(error)
    {
    return false;
    }else
    {
    return true;
    }
}

如果您正在使用jquery，请确保返回false

Ajax阻止表单提交

2 个答案: