Colorbox iframe联系表单无需重新加载[关闭]

Question

I'm using my contact form via colorbox iframe, everything is showing fine, but I want this to work inside colorbox iframe without page refreshing. I know I need AJAX, but can you give me AJAX code to get this work? Sending my mail without refresh.

<?php
if ($_POST["email"]<>'') {
    $person = '[e-mail]';
    $subject = "=?UTF-8?B?".base64_encode("Message from ".$_POST["name"]."")."?=";
    $header = "Content-Type: text/html; charset=utf-8";
    $content .= "<h1>Mailer info</h1>";
    $content .= "<b>Name:</b> ".$_POST["name"]."<br />";
    $content .= "<b>E-mail:</b> ".$_POST["email"]."<br />";
    $content .= "<b>Phone:</b> ".$_POST["phone"]."<br /><br />";
    $content .= "<h1>Message</h1>";
    $content .= "<b>".nl2br($_POST["message"])."</b>";
    mail($person, $subject, $content, $header) or die ("Failed.");
}
?>
<div id="formWrapper">
    <div id="logo"></div>
    <div class="message">
        <p>Your message has been sent successfully. You can close this window.</p>
    </div>
    <form action="" method="post" enctype="multipart/form-data" name="form" id="form">
        <ul>
            <li>
                <label>Name</label>
                <input type="text" name="name" pattern="[a-z\A-Z\ \ą\ć\ę\ł\ń\ó\ś\ż\ź\-\+]{1,50}" required />
            </li>
            <li>
                <label>E-mail</label>
                <input type="email" name="email" required />
            </li>
            <li>
                <label>Phone</label>
                <input type="phone" name="phone" pattern="[0-9\-\+]{1,15}" />
            </li>
            <li>
                <label class="message">Message</label>
                <textarea name="message" required ></textarea>
            </li>
            <li>
                <button class="submit" type="submit">Send</button>
            </li>
        </ul>
    </form>
</div>

Answer 1

If you're using jQuery (which you should be if you're using Colorbox,) the following code should work:

$('#form').on('submit', function( event ) {
    event.preventDefault();
    var params = $(this).serialize();
    $.post(document.URL, params, function () {
        $('.message').show();
    });
});