Ajax 和 PHP 表单提交


Ajax and PHP Form Submit

我正在使用malsup jquery表单插件通过PHP通过电子邮件发送表单,我的表单处于引导模式中。

一切似乎都很好,我收到成功消息,但电子邮件从未出现。它与我的 Ajax 有关,因为如果我不使用 AJAX,表单就可以工作,但是,它会将用户发送到 PHP url,这就是我决定使用该插件的原因。

我已经尝试了malsup的ajaxForm和ajaxSubmit函数,但没有成功,电子邮件从未出现过。

请注意,我正在使用另一种形式(不同的名称和 id)和另一个 AJAX 和 PHP 调用,但它们工作正常。它们是具有不同名称的完全独立的文件,等等...

插件http://jquery.malsup.com/form/#getting-started

实时网站(选择"与我联系"按钮)http://www.sitesbymiller.com

.HTML

 <form class="contactModalForm" id="contactModalForm" action="modalForm.php" method="post">
        <div class="form-group">
            <label for="contactName">Name*</label>
            <input type="text" class="form-control" name="modalName" id="contactName" placeholder="Enter Name" required>
        </div>
        <div class="form-group">
            <label for="contactEmail">Email*</label>
            <input type="email" class="form-control" name="modalEmail" id="contactEmail" placeholder="Enter Email" required>
        </div>
        <div class="form-group">
            <label for="contactPhone">Phone</label>
            <input type="phone" class="form-control" name="modalPhone" id="contactPhone" placeholder="Enter Phone">
        </div>
        <div class="form-group">
            <label for="contactMessage">Message*</label>            
            <textarea class="form-control" rows="5" name="modalMessage" placeholder="Enter detailed message" required></textarea>
        </div>
        <input type="submit" name="modalSubmit" class="btn btn-success" id="modalSubmit" value="Submit"/>
        <button type="button" class="btn btn-default modalClose" data- dismiss="modal">Close</button>
</form>

Jquery/AJAX/JS 文件

var optionsB = {
        url:'modalForm.php',
        type:'post',
        clearForm:'true',
        resetForm:'true',
        cache:'false',
        success:    function() { 
            alert('Thanks for your message! I will get back to you shortly.'); 
        } 
};
// bind to the form's submit event 
$('#contactModalForm').submit(function() { 
    $(this).ajaxSubmit(optionsB); 
    return false; 
}); 

PHP modalForm.php

<?php
if (isset($_POST['modalSubmit'])) {
if (!$_POST['modalName']) {
$error="<br />Please enter your name";
}
if (!$_POST['modalEmail']) {
$error.="<br />Please enter your email address";
}
if (!$_POST['modalMessage']) {
$error.="<br />Please enter a message";
}
if ($_POST['modalEmail']!="" AND !filter_var($_POST['modalEmail'], 
FILTER_VALIDATE_EMAIL)) {
$error.="<br />Please enter a valid email address";
}
if ($error) {
            $result='<div class="alert alert-danger"><strong>There were error(s) 
in your form:</strong>'.$error.'</div>';
} else {
            if (mail("sitesbymiller@gmail.com", "Message from website modal form!", "
                     Name: ".$_POST['modalName']."
                     Email: ".$_POST['modalEmail']."
                     Phone: ".$_POST['modalPhone']."
                     Message: ".$_POST['modalMessage']."
                     On/Off Switch: ".$_POST['onoffswitch']."
                     Current Website: ".$_POST['modalWebsite']."
                     Favorite Website: ".$_POST['modalFavorite']."
                     Website Features: ".$_POST['modalFeatures']."
                     Website Purpose: ".$_POST['modalPurpose'])) {   
                     $result='<div class="alert alert-success"><strong>Thank 
you!</strong> I''ll be in touch.</div>';
                     } else {
                     $result='<div class="alert alert-danger">Sorry, there was 
an error sending your message. Please try again later.</div>';
                     }
        }
}
?> 

HTML和PHP文件都很好。只需要对 JS/AJAX 进行调整。我使用了 ajaxForm 方法而不是 ajaxSubmit,并重命名了我的选项变量,并删除了 url 选项、类型选项和缓存选项,以及 perfecto!

为 http://jquery.malsup.com/form/#getting-started 创建如此出色的用户友好且易于使用的插件而大声疾呼!

JS/AJAX

var options = {
        clearForm:'true',
        resetForm:'true',
        success:    function() { 
            alert('Thanks for your message! I will get back to you shortly.'); 
        } 
};
// pass options to ajaxForm 
$('#contactModalForm').ajaxForm(options);