Question

我正在通过colorbox iframe使用我的联系表单，一切都很好，但我希望这可以在colorbox iframe内部工作而不需要刷新页面。我知道我需要AJAX，但是你可以给我AJAX代码来完成这项工作吗？发送我的邮件而不刷新。

<?php
if ($_POST["email"]<>'') {
    $person = 'example@mail.com';
    $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

如果您正在使用jQuery（如果您使用Colorbox，则应该使用jQuery），以下代码应该可以使用：

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

Colorbox iframe联系表单，无需重新加载

1 个答案: