AJAX / PHP表单在本地服务器而不是实时服务器上发送

时间:2015-09-24 07:54:42

标签: javascript php jquery ajax forms

所以我有一个奇怪的问题,我创建的联系表单在我的localhost上工作,但不能正常工作。我正在使用AJAX和PHP作为表单。当我发送实时和本地时,我的代码中没有错误。在实时服务器上,表单允许我提交并给出成功消息,但消息永远不会被发送。不太确定为什么它在本地工作但在实时服务器上失败。

以下是表单的代码:

<form class="column small-12 medium-6 large-6 contact-form" id="formContact" action="contact-form-post2.php" method="post">

<div class="row">

    <div class="column large-12">

        <div class="contactResponse"></div>

    </div>
</div>

<div class="row">

    <div class="column large-12">

        <input type="text" name="firstLastName"  id="cname" placeholder="First & Last Name" value required>
    </div>

</div>
<!--/.row -->

<div class="row">

    <div class="column large-12">

        <input type="email" name="email" id="cemail"  placeholder="Email" value required>
    </div>

</div>
<!--/.row -->

<div class="row">

    <div class="column large-12">

        <textarea name="message" rows="10" id="ccomment" value required></textarea>
    </div>

</div>
<!-- /.row -->

<div class="row">

    <div class="column large-12">
        <button type="submit" id="submit" name="submit" class="button submit">Submit</button>

    </div>
</div>

以下是表单验证和提交的代码

<?php

if ($_SERVER["REQUEST_METHOD"] == "POST") {
    $name    = $_POST['firstLastName'];
    $email   = $_POST['email'];
    $message = $_POST['message'];

    $to      = "shekinahc.smith@gmail.com";
    $subject = "Website Contact Form Message";
    $headers = "From: $email";

    mail($to,$subject,$message,$headers);
}
 ?>


 $("#formContact").validate({

    // converting error message to placeholder to style with red background
    errorPlacement: function (error, element) {
        element.attr("placeholder", error[0].outerText);
    },

    submitHandler: function(form) {
        $.ajax({
            url: 'contact-form-post2.php',
            type: 'POST',
            data: $(form).serialize(),
            success: function(response) {

                var submit = $(form).find( 'button[type="submit"]' );

                $( ".contactResponse" ).html('Your message has been sent. We will contact you soon.');

                submit.text('Sent, Thank you');

                submit.attr("disabled", true); 
            }            
        });
    }
});

2 个答案:

答案 0 :(得分:1)

您的代码中存在一些问题,请尝试以下方法:

<?php
if ($_SERVER["REQUEST_METHOD"] == "POST") {
    $name = $_POST['firstLastName'];
    $email = $_POST['email'];
    $message = $_POST['message'];
    $to = "shekinahc.smith@gmail.com";
    $subject = "Website Contact Form Message";
    $headers = "From: test@{$_SERVER['SERVER_NAME']}\r\n";
    mail($to, $subject, $message, $headers);
}
?>

<script type="text/javascript">
    $("#formContact").validate({
        // converting error message to placeholder to style with red background
        errorPlacement: function (error, element) {
            element.attr("placeholder", error[0].outerText);
        },
        submitHandler: function (form) {
            $.ajax({
                url: 'contact-form-post2.php',
                type: 'POST',
                data: $(form).serialize(),
                success: function (response) {
                    var submit = $(form).find('button[type="submit"]');
                    $(".contactResponse").html('Your message has been sent. We will contact you soon.');
                    submit.text('Sent, Thank you');
                    submit.attr("disabled", true);
                }
            });
        }
    });
</script>

<form class="column small-12 medium-6 large-6 contact-form" id="formContact" action="contact-form-post2.php" method="post">
    <div class="row">
        <div class="column large-12">
            <div class="contactResponse"></div>
        </div>
    </div>
    <div class="row">
        <div class="column large-12">
            <input type="text" name="firstLastName" id="firstLastName" placeholder="First & Last Name" value required>
        </div>
    </div>
    <div class="row">
        <div class="column large-12">
            <input type="email" name="email" id="email" placeholder="Email" value required>
        </div>
    </div>
    <div class="row">
        <div class="column large-12">
            <textarea name="message" rows="10" id="ccomment" required></textarea>
        </div>
    </div>
    <div class="row">
        <div class="column large-12">
            <button type="submit" id="submit" name="submit" class="button submit">Submit</button>
        </div>
    </div>
</form>

关键更改是邮件标头中的From地址使用了用户POST'ed电子邮件,该电子邮件将与测试/实时服务器具有不同的域。这通常会阻止邮件到达目的地,但必须允许从您的实时服务器进行。

另一件事注意到:2个表单字段声明了2个不同的id,使得html无效,这在某些情况下会导致js错误 - 每个html元素只能有1个id属性。

答案 1 :(得分:1)

所以我开始浏览我的托管服务器,并在我的测试子域中留下了之前项目中的htaccess文件。一旦我删除它,一切都开始工作。