Colorbox iframe контактная форма без перезагрузки

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,) следующий код должен работать:

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