Question

我正在尝试编写一封发送电子邮件的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 CODE

<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>

Answer 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;
}

Answer 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');
        });
    });
});

Answer 3

您需要使用jQuery绑定到“submit”事件并阻止默认操作。如果您的表单和昵称输入除了名称之外还使用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>

preventDefault（）不会停止常规表单提交

3 个答案: