javascript - Ajax阻止表单提交

javascript - Ajax阻止表单提交,第1张

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

    });

});

最佳答案:

2 个答案:

答案 0 :(得分:0)

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

$(function() {

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

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

答案 1 :(得分:0)

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

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

和js将是

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

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

本文经用户投稿或网站收集转载,如有侵权请联系本站。

发表评论

0条回复