提交联系表而不刷新（Zurb Foundation、PHP、AJAX、jQuery 和 JS）

Question

我的联系表似乎不起作用。我不知道出了什么问题。我尝试了各种解决方案，但没有任何效果。我的页面仍然刷新。也许任何人都可以发现我做的错误或者提供替代代码？非常感谢您的帮助！

return：错误；不起作用。 e.prevenDefault(); 也没有。不要问为什么。

HTML

<form action="" method="post" id="contact-form">
    <div class="row">
        <div class="medium-3 columns">
            <label>
                <input type="text" id="name" placeholder="Your name*" name="name" required/>
            </label>
        </div>
        <div class="medium-3 columns">
            <label>
                <input type="email" id="email" name="email" placeholder="Your e-mail*" required/>
            </label>
        </div>
        <div class="medium-3 columns">
            <label>
                <input type="text" id="compname" name="compname" placeholder="Company name*" required/>
            </label>
        </div>
        <div class="medium-3 columns">
            <label>
                <input type="text" id="website" name="website" placeholder="Website*" required/>
            </label>
        </div>

    </div>
    <div class="row">
        <div class="medium-12 columns">
            <label>
                <textarea type="text" row="10" name="message" id="message" placeholder="Message*" required></textarea>
            </label>
        </div>
    </div>
    <div class="row">
        <button type="submit" class="button large" id="sendmessage-btn"> Send Message 
        </button>
    </div>

    <div data-alert class="alert-box success radius">Your message has been sent.<a href="#" class="close">&times;</a>

PHP

<?php


$to = 'email@email.com';
$subject = 'Message from the contact form';
$name = trim($_POST['name']);
$email = trim($_POST['email']);
$compname = trim($_POST['compname']);
$website = trim($_POST['website']);
$message = trim($_POST['message']);


$message = <<<EMAIL

Name: $name
Contact e-mail: $email
Company: $compname
Company website: $website
Message: $message

    EMAIL;

if ($_POST) {
mail ($to, $subject, $message, $header); 
} ?>

和JS

$(document).foundation();
var form = $('#contact-form');
var submitButton = $('#sendmessage-btn');       // Variable to cache button element
var alertBox = $('.alert-box');                 // Variable to cache meter element
var closeButton = $('.close');                  // Variable to cache close button element
$(form).submit(function () {

          $.ajax({
            type: 'get',
            url: 'function.php',
            data: $(form).serialize(),
            success: function sendContactForm(){
                    $(submitButton).fadeOut(500); // Fades out submit button when it's clicked
                    setTimeout(function() { // Delays the next effect
                    $(alertBox).fadeIn(500); // Fades in success alert
                }, 500);
            };
          });
});

$(closeButton).click(function() { // Initiates the reset function
$(alertBox).fadeOut(500); // Fades out success message
setTimeout(function() { // Delays the next effect
    $('input, textarea').not('input[type=submit]').val(''); // Resets the input fields
    $(submitButton).fadeIn(500); // Fades back in the submit button
}, 500);

    return false; // This stops the success alert from being removed as we just want to hide it
});

Answer 1

// Your form is already a jquery object, don't wrap it again?
form.submit(function () {

      $.ajax({
           ....
      });

      // Prevent default submit behavior of form.
      return false;
});

提交联系表而不刷新（Zurb Foundation、PHP、AJAX、jQuery 和 JS）

Submit contact form without refresh (Zurb Foundation, PHP, AJAX, jQuery and JS)

php

ajax

jquery

form-submit