Ajax 阻止表单提交答案

【问题标题】：Ajax prevent form submitAjax 阻止表单提交
【发布时间】：2016-02-20 04:55:16
【问题描述】：

我正在使用 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";
        });

    });

});

【问题讨论】：

将$(form).submit更改为form.submit
可能有js错误。检查您的控制台。也代替 $(form) 尝试 form.serialize()

标签： javascript php jquery ajax forms

【解决方案1】：

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

$(function() {

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

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

【讨论】：

【解决方案2】：

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

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

js 会是

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

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

【讨论】：