Ajax和PHP表单提交

Question

I am using the malsup jquery form plugin to email a form via PHP, my form is in a bootstrap modal.

Everything seems to work fine, I receive success message however the email never shows up. It has something to do with my Ajax because the form works if I dont use AJAX, however, it then sends the user to the PHP url which is why i decided to use the plugin.

I have tried the ajaxForm and ajaxSubmit functions from malsup but with no success, the email just never shows up.

As a note, I am using another form (different name and id) and another AJAX and PHP call, but they work fine. They are completely separate files with different names, etc...

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

Live website (select Contact Me button) 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 file

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("[e-mail]", "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>';
                     }
        }
}
?> 

Answer 1

HTML and PHP files were good. Just had to make an adjustment to the JS/AJAX. I used the ajaxForm method instead of the ajaxSubmit and renamed my options variable as well as removed the url option, type option and cache option, and perfecto!

Big shoutout to http://jquery.malsup.com/form/#getting-started for creating such a great plugin that is user friendly and easy to use!

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);