Question

我正在尝试使用Ajax发送表单。因此，感谢stackoverflow，我阻止表单正常使用event.preventDefault();发送，但这无济于事，因为我总是被重定向到我的sendMail.php文件。

这是我的代码：

$(document).on('submit', '.mailForm', function(e) {
{
    e.preventDefault();
    $.ajax({
        url: $(this).attr('action'),
        type: $(this).attr('method'),
        data: $(this).serialize(),
        success: function()
        {
            $("#sendBox").show('slow');
        }
    });
    return false;
});

编辑：这是我的表格：

<form role="form" class="mailForm" action="sendmail.php" method="post">
                <div class="form-group">
                    <div class="input-group">
                        <div class="input-group-addon"><i class="fa fa-user"></i></div>
                        <input class="form-control" type="text" id="fName" placeholder="<? LangText("Name", "Nom", "Name"); ?>" required="required">
                    </div>
                </div>
                <div class="form-group">
                    <div class="input-group">
                        <div class="input-group-addon"><i class="fa fa-envelope-o"></i></div>
                        <input class="form-control" type="email" id="fMail" placeholder="<? LangText("E-Mail Adresse", "Adresse électronique", "email adress"); ?>" required="required">
                    </div>
                </div>
                <div class="form-group">
                    <div class="input-group">
                        <div class="input-group-addon"><i class="fa fa-users"></i></div>
                        <input class="form-control" type="text" id="fCompany" placeholder="<? LangText("Firma", "Entreprise", "Company"); ?>" required="required">
                    </div>
                </div>
                <div class="form-group">
                    <div class="input-group">
                        <div class="input-group-addon"><i class="fa fa-file-text-o"></i></div>
                        <textarea class="form-control" rows="5" id="fText" required="required"></textarea>
                    </div>
                </div>
                <button type="submit" class="btn btn-default" id="submitMail"><? LangText("Absenden", "Envoyer", "Send"); ?></button>
            </form>

Answer 1

您需要在表单＆＃39;发送＆＃39;上绑定一个事件。按钮。

            $('.trigger_buttton').on('click', function(e) {
            {
                e.preventDefault();
                $.ajax({
                    url: $('.mailForm').attr('action'),
                    type: $('.mailForm').attr('method'),
                    data: $('.mailForm').serialize(),
                    success: function()
                    {
                        $("#sendBox").show('slow');
                    }
                });
            });

Answer 2

而不是：

$(document).on('submit', '.mailForm', function(e) {

尝试：

$(".mailForm").submit(function(){
    $.ajax({
        url: $(this).attr('action'),
        type: $(this).attr('method'),
        data: $(this).serialize(),
        success: function()
        {
            $("#sendBox").show('slow');
        }
    });
    return false;
});

Answer 3

请尝试使用.submit（）。

$(".mailForm").submit(function(e)
{

  $.ajax({
    url: $(this).attr('action'),
    type: $(this).attr('method'),
    data: $(this).serialize(),
    success: function()
    {
        $("#sendBox").show('slow');
    }
  });
 return false;
});

防止Ajax表单正常发送＆＃34;＃34;不会工作

3 个答案: