Question

我正在尝试将基于php / ajax的联系表单配置为网站，但是提交表单后，我无法添加“成功”消息。如果将“ action”参数保留在form标记内的php文件中，则可以正确接收电子邮件，但是该页面将重定向到空白的php页面。但是，如果我删除链接，则不会发送电子邮件。

在过去的几个小时中，我尝试了很多在网上找到的建议，但我无法使其正常运行。有任何猜测吗？

谢谢

HTML

    <form id="contact-form" method="POST" action="simple-email-form-v1/form-to-email.php">

        <div class="control-group">
            <label>Your Name</label>
            <input class="fullname" type="text" name="fullname" />
        </div>

        <div class="control-group">
            <label>Email</label>
            <input class="email" type="text" name="email" />
        </div>

        <div class="control-group">
            <label>Phone (optional)</label>
            <input class="phone" type="text" name="phone" />
        </div>

        <div class="control-group">
            <label>Message</label>
            <textarea class="message" name="message"></textarea>
        </div>

        <div id="errors"></div>

        <div class="control-group no-margin">
            <input type="submit" name="submit" value="Submit" id="submit" />
        </div>

    </form>
</div>

PHP

   <?php
/*
Configuration 
You are to edit these configuration values. Not all of them need to be edited.
However, the first few obviously need to be edited.
EMAIL_RECIPIENTS - your email address where you want to get the form submission.

*/

$email_recipients = "abcde@gmail.com";//<<=== enter your email address here
//$email_recipients =  "mymanager@gmail.com,his.manager@yahoo.com"; <<=== more than one recipients like this


$visitors_email_field = 'email';//The name of the field where your user enters their email address
                                        //This is handy when you want to reply to your users via email
                                        //The script will set the reply-to header of the email to this email
                                        //Leave blank if there is no email field in your form
$email_subject = "New Form submission";

$enable_auto_response = true;//Make this false if you donot want auto-response.

//Update the following auto-response to the user
$auto_response_subj = "Thanks for contacting us";
$auto_response ="
Hi

Thanks for contacting us. We will get back to you soon!

Regards
Your website
";

$referer = $_SERVER['HTTP_REFERER'];


/*
This is the PHP back-end script that processes the form submission.
It first validates the input and then emails the form submission.
The variable $_POST contains the form submission data.
*/
if(!isset($_POST['submit']))
{
    // note that our submit button's name is 'submit' 
    // We are checking whether submit button is pressed
    // This page should not be accessed directly. Need to submit the form.
    echo "error; you need to submit the form!".print_r($_POST,true);
    exit;
}

require_once "includes/formvalidator.php";
//Setup Validations
$validator = new FormValidator();
$validator->addValidation("fullname","req","Please fill in Name");
$validator->addValidation("email","req","Please fill in Email");
//Now, validate the form
if(false == $validator->ValidateForm())
{
    echo "<B>Validation Errors:</B>";

    $error_hash = $validator->GetErrors();
    foreach($error_hash as $inpname => $inp_err)
    {
        echo "<p>$inpname : $inp_err</p>\n";
    }
    exit;
}

$visitor_email='';
if(!empty($visitors_email_field))
{
    $visitor_email = $_POST[$visitors_email_field];
}

if(empty($email_from))
{
    $host = $_SERVER['SERVER_NAME'];
    $email_from ="forms@$host";
}

$fieldtable = '';
foreach ($_POST as $field => $value)
{
    if($field == 'submit')
    {
        continue;
    }
    if(is_array($value))
    {
        $value = implode(", ", $value);
    }
    $fieldtable .= "$field: $value\n";
}

$extra_info = "User's IP Address: ".$_SERVER['REMOTE_ADDR']."\n";

$email_body = "You have received a new form submission. Details below:\n$fieldtable\n $extra_info";

$headers = "From: $email_from \r\n";
$headers .= "Reply-To: $visitor_email \r\n";
//Send the email!
@mail(/*to*/$email_recipients, $email_subject, $email_body,$headers);

//Now send an auto-response to the user who submitted the form
if($enable_auto_response == true && !empty($visitor_email))
{
    $headers = `enter code here`"From: $email_from \r\n";
    @mail(/*to*/$visitor_email, $auto_response_subj, $auto_response,$headers);
}

//done. 

if(mail($email_recipients, $_POST["email"], $_POST["message"], $headers)) {
$message = "Success!";
} else {
$message = "Erro!";
}


?>

JS

    $(document).ready(function () {

    $("#contact-form").validate({
        rules: {
            fullname: {
                required: true
            },
            email: {
                required: true,
                email: true
            },
            message: {
                required: true,
                maxlength: 8000
            }
        },

        messages: { // custom messages
            fullname: {
                required: "Por favor, insira seu nome"
            },
            email: {
                required: "Por favor, insira seu email"
            },
            message: {
                required: "Por favor, insira sua mensagem",
                maxlength: jQuery.format("The maxlength for message is {0} !")
            },
        },

        submitHandler: function(form) {
            $form = $(form);
            $container = $form.parent();
            w = $form.outerWidth();
            h = $form.outerHeight();
            $form.hide();

            $('#msg_submitting', $container).width(w).height(h).fadeIn(1000);            
            $.ajax({
                type: "POST",
                url: $form.attr('action'),
                data: $form.serialize(),
                success: function (data) {
                       $("#mail-status").html(data);
        },
        error:function (){}
        });

            return false;

        }

    });

});

Answer 1

HTML中的“邮件状态” ID在哪里？您可以将“邮件状态”替换为“错误”。

问题是页面中没有“ mail-status” ID，因此该div上没有显示响应。

在html上定义“ mail-status”，或仅将“ mail-status”替换为“ errors”，因为您的html包含。

Answer 2

将<div id="errors"></div>放在form元素之外。隐藏表单时，<div id="errors"></div>也被隐藏，因此看不到任何内容。

<form id="contact-form" method="POST" action="header.php">

      <div class="control-group">
          <label>Your Name</label>
          <input class="fullname" type="text" name="fullname" />
      </div>

      <div class="control-group">
          <label>Email</label>
          <input class="email" type="text" name="email" />
      </div>

      <div class="control-group">
          <label>Phone (optional)</label>
          <input class="phone" type="text" name="phone" />
      </div>

      <div class="control-group">
          <label>Message</label>
          <textarea class="message" name="message"></textarea>
      </div>


      <div class="control-group no-margin">
          <input type="submit" name="submit" value="Submit" id="submit" />
      </div>

  </form>
  <div id="errors"></div>

还需要在php文件中echo $message;，以便它应该在ajax数据参数中可用。

if(mail($email_recipients, $_POST["email"], $_POST["message"], $headers)) {
    $message = "Success!";
} else {
    $message = "Erro!";
}
echo $message;

Answer 3

首先，将此元素添加到html中：

<div id="mail-status"></div>

然后将preventDefault()添加到js中以防止表单提交：

<script>

$(document).ready(function () {

    $("#contact-form").submit(function(e) {
        e.preventDefault(); // added preventDefault()
    }).validate({
        rules: {
            fullname: {
                required: true
            },
            email: {
                required: true,
                email: true
            },
            message: {
                required: true,
                maxlength: 8000
            }
        },

        messages: { // custom messages
            fullname: {
                required: "Por favor, insira seu nome"
            },
            email: {
                required: "Por favor, insira seu email"
            },
            message: {
                required: "Por favor, insira sua mensagem",
                maxlength: jQuery.format("The maxlength for message is {0} !")
            },
        },

        submitHandler: function (form) {
            $form = $(form);
            $container = $form.parent();
            w = $form.outerWidth();
            h = $form.outerHeight();

            $('#msg_submitting', $container).width(w).height(h).fadeIn(1000);
            $.ajax({
                type: "POST",
                url: $form.attr('action'),
                data: $form.serialize(),
                success: function (data) {
                    $("#mail-status").html(data);
                },
                error: function () {}
            });
            $form.hide(); // moved below ajax call

            return false;

        }

    });

});

</script>

然后不要忘记向php添加echo语句：

if(mail($email_recipients, $_POST["email"], $_POST["message"], $headers)) {
    $message = "Success!";
} else {
    $message = "Erro!";
}

echo $message;

Answer 4

也许这可能对您有帮助：

<div id="mail-status"></div>
<form id="contact-form" method="POST" action="simple-email-form-v1/form-to-email.php">

Answer 5

也许您处理提交的方式导致页面重定向？

将按钮类型submit更改为button。见下文

<input type="button" name="submit" value="Submit" id="submit" />

然后，将点击按钮的目标定位为表单提交，

$(document).ready(function () {
     $('#submit').click(function(){
         //do you logic here
     });
});

将按钮类型更改为button时，您不必担心要提交preventDefault()，因为提交仅通过Ajax / JS进行。

希望这会有所帮助。

欢呼

表单提交/ PHP AJAX后，在同一页面上获得成功消息

5 个答案: