javascript - Sending contact form data using AjaxjQueryPHP - Stack Overflow

I had a functioning contact form, but decided to try learn a little Ajax to improve usability and error

I had a functioning contact form, but decided to try learn a little Ajax to improve usability and error checking. I'm using code from this example which I've adapted slightly to acmodate the new .ajaxComplete() guidelines.

I've zero idea why this isn't working, but I'll provide both my form, ajax request and working example in the hope someone can help:

My website

JS

$(document).ready(function() {

    $("#get-contact-form").submit(function() {

    var str = $(this).serialize();

        $.ajax({
            type: "POST",
            url: "contact-process.php",
            data: str,
            success: function(msg) {

                $(document).ajaxComplete(function(event, request, settings) {

                if (msg == 'OK') {

                    result = '<div class="notification_ok">Your message has been sent Succesfully. Thank you!!!</div>';
                    $("#fields").hide();

                }
                else
                {

                    result = msg;

                }

                $("#note").hide();
                $("#note").html(result).slideDown("slow");
                $("#note").html(result);

                });

            }

        });

    return false;

    });

});

PHP (Please note I've removed all validation here to make it easier to follow)

$title     = $_POST["Form"]["title"];
$forename  = trim($_POST["Form"]["forename"]);
$surname   = trim($_POST["Form"]["surname"]);
$telephone = trim($_POST["Form"]["telephone"]);
$email     = trim($_POST["Form"]["email"]);
$message   = trim($_POST["Form"]["message"]);

$name = $title . " " . $forename . " " . $surname;

require_once("inc/PHPMailer/class.phpmailer.php");

$mail = new PHPMailer();

$email_body = "";
$email_body = $email_body . "<h1 class='heading'><strong>Name:</strong></h1><br />" . $name . "<br />";
$email_body = $email_body . "<h1 class='heading'><strong>Telephone Number:</strong></h1><br />" . $telephone . "<br />";
$email_body = $email_body . "<h1 class='heading'><strong>Email:</strong></h1><br />" . $email . "<br />";
$email_body = $email_body . "<h1 class='heading'><strong>Message:</strong></h1><br />" . $message;

$mail->IsSMTP();
$mail->SMTPAuth = true;
$mail->SMTPSecure = "ssl";
$mail->Host = "smtp.gmail";
$mail->Port = 465;
$mail->Username = "****";
$mail->Password = "****";

$mail->SetFrom($email, $name);
$address = "*******";
$mail->AddAddress($address, "*****");
$mail->Subject = "Email Subject | " . $name;
$mail->MsgHTML($email_body);

HTML

<form class="cf form-contact" id="get-contact-form" action="javascript:alert('success!');" >
    <div id="note"></div>
    <div id="fields">
        <div class="row grid-full">
            <label for="title">Title</label>
            <select name="Form[title]" id="title">
                <option value="Mr">Mr</option>
                <option value="Mrs">Mrs</option>
                <option value="Ms">Ms</option>
                <option value="Miss">Miss</option>
                <option value="Dr">Dr</option>
            </select>
        </div>
        <div class="grid-2">
            <label for="forname">First Name</label>
            <input type="text" name="Form[forename]" id="forename" />
            <label for="surname">Last Name</label>
            <input type="text" name="Form[surname]" id="surname" />
        </div>
        <div class="grid-2">
            <label for="telephone">Telephone</label>
            <input type="text" name="Form[telephone]" id="telephone" />
            <label for="email">Email Address</label>
            <input type="text" name="Form[email]" id="email" />
        </div>
        <div class="row grid-4" style="display: none;">
            <label for="address">Address</label>
            <input type="text" name="Form[address]" id="address" />
            <p>Please leave this field blank.</p>
        </div>
        <div class="row grid-4">
            <label for="message">Comments</label>
            <textarea rows="12" name="Form[message]" id="message"></textarea>
            <button type="submit" class="btn">Submit</button>
        </div>
    </div>
</form>

I had a functioning contact form, but decided to try learn a little Ajax to improve usability and error checking. I'm using code from this example which I've adapted slightly to acmodate the new .ajaxComplete() guidelines.

I've zero idea why this isn't working, but I'll provide both my form, ajax request and working example in the hope someone can help:

My website

JS

$(document).ready(function() {

    $("#get-contact-form").submit(function() {

    var str = $(this).serialize();

        $.ajax({
            type: "POST",
            url: "contact-process.php",
            data: str,
            success: function(msg) {

                $(document).ajaxComplete(function(event, request, settings) {

                if (msg == 'OK') {

                    result = '<div class="notification_ok">Your message has been sent Succesfully. Thank you!!!</div>';
                    $("#fields").hide();

                }
                else
                {

                    result = msg;

                }

                $("#note").hide();
                $("#note").html(result).slideDown("slow");
                $("#note").html(result);

                });

            }

        });

    return false;

    });

});

PHP (Please note I've removed all validation here to make it easier to follow)

$title     = $_POST["Form"]["title"];
$forename  = trim($_POST["Form"]["forename"]);
$surname   = trim($_POST["Form"]["surname"]);
$telephone = trim($_POST["Form"]["telephone"]);
$email     = trim($_POST["Form"]["email"]);
$message   = trim($_POST["Form"]["message"]);

$name = $title . " " . $forename . " " . $surname;

require_once("inc/PHPMailer/class.phpmailer.php");

$mail = new PHPMailer();

$email_body = "";
$email_body = $email_body . "<h1 class='heading'><strong>Name:</strong></h1><br />" . $name . "<br />";
$email_body = $email_body . "<h1 class='heading'><strong>Telephone Number:</strong></h1><br />" . $telephone . "<br />";
$email_body = $email_body . "<h1 class='heading'><strong>Email:</strong></h1><br />" . $email . "<br />";
$email_body = $email_body . "<h1 class='heading'><strong>Message:</strong></h1><br />" . $message;

$mail->IsSMTP();
$mail->SMTPAuth = true;
$mail->SMTPSecure = "ssl";
$mail->Host = "smtp.gmail.";
$mail->Port = 465;
$mail->Username = "****";
$mail->Password = "****";

$mail->SetFrom($email, $name);
$address = "*******";
$mail->AddAddress($address, "*****");
$mail->Subject = "Email Subject | " . $name;
$mail->MsgHTML($email_body);

HTML

<form class="cf form-contact" id="get-contact-form" action="javascript:alert('success!');" >
    <div id="note"></div>
    <div id="fields">
        <div class="row grid-full">
            <label for="title">Title</label>
            <select name="Form[title]" id="title">
                <option value="Mr">Mr</option>
                <option value="Mrs">Mrs</option>
                <option value="Ms">Ms</option>
                <option value="Miss">Miss</option>
                <option value="Dr">Dr</option>
            </select>
        </div>
        <div class="grid-2">
            <label for="forname">First Name</label>
            <input type="text" name="Form[forename]" id="forename" />
            <label for="surname">Last Name</label>
            <input type="text" name="Form[surname]" id="surname" />
        </div>
        <div class="grid-2">
            <label for="telephone">Telephone</label>
            <input type="text" name="Form[telephone]" id="telephone" />
            <label for="email">Email Address</label>
            <input type="text" name="Form[email]" id="email" />
        </div>
        <div class="row grid-4" style="display: none;">
            <label for="address">Address</label>
            <input type="text" name="Form[address]" id="address" />
            <p>Please leave this field blank.</p>
        </div>
        <div class="row grid-4">
            <label for="message">Comments</label>
            <textarea rows="12" name="Form[message]" id="message"></textarea>
            <button type="submit" class="btn">Submit</button>
        </div>
    </div>
</form>
Share Improve this question edited Mar 5, 2014 at 11:04 Sam Holguin asked Oct 2, 2013 at 22:58 Sam HolguinSam Holguin 5632 gold badges9 silver badges25 bronze badges 13
  • Where is your server side script???, I can see in the firebug that the ajax is working fine, your server side script is the problem – Emilio Gort Commented Oct 2, 2013 at 23:01
  • Please see edit....I've removed all validation to make it easier to follow – Sam Holguin Commented Oct 2, 2013 at 23:05
  • As far as I can see it's working just fine, but the server isn't returning any content, so logically you won't see anything appear in the message box. – Jon Koops Commented Oct 2, 2013 at 23:06
  • 1 ment the email part in your php and do a print_r($_POST) to see how are receiving the data – Emilio Gort Commented Oct 2, 2013 at 23:07
  • 1 Add this to the end of your php and remove the print_r, if(!$mail->send()) { echo 'Message could not be sent.'; echo 'Mailer Error: ' . $mail->ErrorInfo; exit; } , to see what is the error – Emilio Gort Commented Oct 2, 2013 at 23:13
 |  Show 8 more ments

1 Answer 1

Reset to default 1

According to the documentation you are missing this lines in your php

if(!$mail->send()) {
   echo 'Message could not be sent.';
   echo 'Mailer Error: ' . $mail->ErrorInfo;
   exit;
}else{
   echo 'ok';
}

发布者:admin,转转请注明出处:http://www.yc00.com/questions/1745076384a4609860.html

相关推荐

  • javascript - Sending contact form data using AjaxjQueryPHP - Stack Overflow

    I had a functioning contact form, but decided to try learn a little Ajax to improve usability and error

    16小时前
    40

发表回复

评论列表(0条)

  • 暂无评论

联系我们

400-800-8888

在线咨询: QQ交谈

邮件:admin@example.com

工作时间:周一至周五,9:30-18:30,节假日休息

关注微信