preventDefault() 不停止常规表单提交答案

【问题标题】：preventDefault() not stopping regular form submitpreventDefault() 不停止常规表单提交
【发布时间】：2014-09-22 06:40:46
【问题描述】：

我正在尝试编写一个发送电子邮件的 AJAX 联系表单。我正在关注找到here 的教程。

我无法阻止我的浏览器导航到表单的 action 属性上指示的 url。

这是我的 javascript 代码：

$(function(){
    var form = $('#ajaxMail');
    var formSuccess = $('#successMail');
    var formError = $('#errorMail');

    $(form).submit(function(event){
        event.preventDefault();

        var formData = $(form).serialize();

        $.ajax({
            type: 'POST',
            url: $(form).attr('action'),
            data: formData
        })
        .done(function(response){
            $(successMail).removeClass('standbyMessage');
            $(successMail).addClass('completedMessage');

            $('#name').val('');
            $('#email').val('');
            $('#message').val('');
        )}
        .fail(function(response){
            $(errorMail).removeClass('standbyMessage');
            $(errorMail).addClass('completedMessage');
        )};
    }
});

HTML 代码

<form name="ajaxMail" id="ajaxMail" action="mailer.php" method="POST">
  <input type="text" id="name" name="name" placeholder="<?php echo $plName; ?>" required>
  <input type="text" id="email" name="email" placeholder="<?php echo $plEmail; ?>" required>
  <textarea id="message" name="message" cols="63" rows="8" placeholder="<?php echo $plMessage; ?>" required></textarea>
  <input type="submit" id="submitMail" value="<?php echo $plSend; ?>">
</form>
<div id="successMail" class="alert alert-success standbyMessage" role="alert"><strong>Correo electronico</strong> enviado correctamente.</div>
<div id="errorMail" class="alert alert-danger standbyMessage" role="alert"><strong>Correo electronico</strong> no pudo enviarse, intente de nuevo mas tarde</div>

【问题讨论】：

您也可以发布您的 HTML。您是否检查过控制台是否有任何错误？此外，form 将是一个 jQuery 对象，因此您不需要再次包装它 - 例如。您可以只使用form.serialize() 而不是$(form).serialize()，尽管这不会导致此问题。
删除event.preventDefault();后试试
您可以尝试将您的event 参数重命名为e，即function(e) 和e.preventDefault()？我肯定是错的，但是使用完整的关键字作为参数名称让我感到不安。
啊，你有语法错误。到处都是不匹配的大括号和括号。开始使用浏览器的开发者控制台。
@FerSalas：done 和 fail 模块的右括号有语法错误，如建议的那样。

标签： javascript jquery ajax forms

【解决方案1】：

添加return false;

$(form).submit(function(event){
    event.preventDefault();

    var formData = $(form).serialize();

    $.ajax({
        type: 'POST',
        url: $(form).attr('action'),
        data: formData
    })
    .done(function(response){
        $(successMail).removeClass('standbyMessage');
        $(successMail).addClass('completedMessage');

        $('#name').val('');
        $('#email').val('');
        $('#message').val('');
    )}
    .fail(function(response){
        $(errorMail).removeClass('standbyMessage');
        $(errorMail).addClass('completedMessage');
    )};

    return false;
}

【讨论】：

如果preventDefault() 不起作用，那么return false 也不起作用。此外，此答案与 OP 的代码具有相同的语法错误

【解决方案2】：

提交、完成和关闭检查之间的右括号有误

更正的脚本：

$(document).ready(function(){
    var submitform = $('#ajaxMail');
    var formSuccess = $('#successMail');
    var formError = $('#errorMail');

    $(submitform).on('submit',function(event){
        event.preventDefault();

        var formData = $(submitform).serialize();
        $.ajax({
            type: 'POST',
            url: $(submitform).attr('action'),
            data: formData
        })
        .done(function(response){
            $(successMail).removeClass('standbyMessage');
            $(successMail).addClass('completedMessage');

            $('#name').val('');
            $('#email').val('');
            $('#message').val('');
        })
        .fail(function(response){
            $(errorMail).removeClass('standbyMessage');
            $(errorMail).addClass('completedMessage');
        });
    });
});

【讨论】：

你的 "jquery-1.11.1.min.js" 和 "js/bootstrap.min.js" 没有正确包含，src 属性有多次见第 1 行。 13,14
就是这样，sublime text 自动添加了 src="text/javascript"。非常感谢，现在可以使用了！

【解决方案3】：

您需要使用 jQuery 绑定到“提交”事件并阻止默认操作。如果您的表单和昵称输入除了名称之外还使用id，效率会更高：

试试这个

<script type="text/javascript">
    jQuery(function($){
      $("form[name=input]").submit(function(e){
        e.preventDefault(); // Keep the form from submitting
        var form = $(this);

        // Use the POST method to post to the same url as
        // the real form, passing in newNickname as the only 
        // data content
        $.post( form.attr('action'), { newNickname: form.find(':text').val() }, function(data){
          alert(data); // Alert the return from the server
        }, "text" );
      });
    });
</script>

【讨论】：

他们同时使用 ID 和名称