Question

我正在为我正在处理的投资组合开发联系表单，当我点击提交按钮发送邮件时，而不是在表单下方显示引导程序警报消息，页面重定向到PHP文件。

我在提交有效详细信息后会从表单收到收件箱中的电子邮件，但即使我使用了ajax，我仍然会被重定向。

http://nickcookweb.co.uk/#contact处的示例。

编辑：preventDefault（）;似乎根本没有工作。

HTML：

<form id="contactForm" name="contactForm" action="contact.php" method="POST">

    <input type="text" name="name" id="name" placeholder="Full Name (Required)" required/>

    <input type="email" name="email" id="email" placeholder="Email (Required)" required/>

    <input type="tel" name="tel" id="tel" placeholder="Contact Number"/>

    <textarea type="text" name="message" id="message" placeholder="Message (Required)" required></textarea>

    <button type="submit" id="sendButton" class="button">Send<span class="fa fa-paper-plane" aria-hidden="true" style="margin-left:6px; top:2px"></span></button>

</form>

<div id="contactSuccess" class="alert alert-success">
    <span>
        <p>Message sent successfully.</p>
    </span>
</div>

<div id="contactError" class="alert alert-danger">
    <span>
        <p>There was an error sending your message. Please try again.</p>
    </span>
</div>

PHP：

<?php

$to = "contact@nickcookweb.co.uk"; 

$from = $_REQUEST['email']; 

$name = $_REQUEST['name']; 

$message = $_REQUEST['message']; 

$headers = "From: $from"; 

$subject = "New Message via Portfolio"; 

$fields = array(); 

$fields{"name"} = "name"; 

$fields{"email"} = "email"; 

$fields{"tel"} = "tel"; 

$fields{"message"} = "message";

$body = "Details:"; 

foreach($fields as $a => $b) {   

    $body .= sprintf("%20s: %s\n",$b,$_REQUEST[$a]); 

}

$send = mail($to, $subject, $body, $headers);

?>

JS：

$(function() {
$('#contactForm').validate({
    rules: {
        name: {
            required: true,
            minlength: 2
        },
        email: {
            required: true,
            email: true
        },
        tel: {
            required: true
        },
        message: {
            required: true,
            minlength: 10
        }
    },
    messages: {
        name: {
            required: "Please provide your name",
            minlength: "Your name must be at least 2 characters long"
        },
        email: {
            required: "Please provide your email address"
        },
        message: {
            required: "Please enter a message",
            minlength: "Your message must be at least 10 character long"
        },
    },
    submitHandler: function(form) {
        $(form).ajaxSubmit({
            type:"POST",
            data: $(form).serialize(),
            url:"contact.php",
            success: function() {
                $('#contactForm :input').attr('disabled', 'disabled');
                $('#contactForm').fadeTo( "slow", 0.15, function() {
                    $(this).find(':input').attr('disabled', 'disabled');
                    $(this).find('label').css('cursor','default');
                    $('#contactSuccess').fadeIn();
                });
            },
            error: function() {
                $('#contactForm').fadeTo( "slow", 0.15, function() {
                    $('#contactError').fadeIn();
                });
            }
        });
    }
});
});

Answer 1

$('#yourButton').on('click', function{ 
  event.preventDefault();
  //do your ajax and on success show msg
})

Answer 2

我在本地测试了这个（没有实际的contact.php），但它在本地工作。

$('#form').validate({
  submitHandler: function(form) {
    $.ajax({
      url: form.action,
      type: form.method,
      data: $(form).serialize(),
      success: function(response) {
        console.log(response);
      }
    });
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.15.1/jquery.validate.min.js"></script>
<form action="contact.php" method="post" id="form">
  <label for="name">Name:</label>
  <input name="name" type="text" required="" />
  <input type="submit" />
</form>

Answer 3

使用带type="button"的按钮或添加对'preventDefault（）'的调用，以避免提交表单。

Answer 4

只需将此属性添加到您的表单即可防止默认操作。

<form id="contactForm" name="contactForm" action="contact.php" method="POST" onsubmit="return false">

PHP / Ajax联系表单重定向到PHP文件

4 个答案: