Jquery post()从表单抛出php发送消息

时间:2013-02-01 17:55:47

标签: php jquery post

我正在使用jquery来验证表单,然后使用php发送包含所有表单内容的电子邮件。

HTML - contact.php

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="scripts/jquery-1.9.0.min.js" charset="utf-8"></script>
<script type="text/javascript" charset="utf-8" src="message_validator.js" charset="utf-8"></script>
</head>
<body>
<form id="form_contacto" charset="utf-8">
  <input type="text" id="name" class="textbox" name="name" maxlength="12" />
  <input type="text" id="last_name" class="textbox" name="last_name" maxlength="12" />
  <input type="text" id="email" class="textbox" name="email" maxlength="40" />
  <input type="text" id="title" class="textbox_2" name="title" maxlength="40" />
  <textarea id="message" name="message" ></textarea>
  <input type="text" id="about" class="textbox_3" name="about" maxlength="40" />
  <input type="text" id="validation" class="textbox_4" name="validation" maxlength="40" />
  <input type="submit"  class="submit" value="Send">
</form>
</body>
</html>

JQUERY - message_validator.js

// JavaScript Document
$(document).ready(function() {
    $('.submit').click(function(){
        if($('.error_display').css("height")!="0"){
            $('.error_display').empty();
        }
        var errorlist = [];
        errorlist.length = 0;
        var email_check = /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,6}$/i;
        var name = $('input#name').val();
        var email = $('input#email').val();
        var message = $('textarea#message').val();
        var validation = $('input#validation').val();

        if(name == '' && email == '' && message == ''){
            errorlist.push("- ERROR ALL");
        }else{
            if (name == '') {
                errorlist.push("-ERROR");
            }else if(name.length <= 2){
                errorlist.push("-ERROR");
            }
            if (email == ''){
                errorlist.push("-ERROR");
            }else if(!email_check.test(email)){
                errorlist.push("-ERROR");
            }
            if (message == '') {
                errorlist.push("-ERROR");
            }else if(message.length <= 5){
                errorlist.push("-ERROR");
            }
            if (validation == '') {
                errorlist.push("-ERROR");
            }else if(validation != 8){
                errorlist.push("-ERROR");
            }
        }

         if(errorlist.length >= 1){
            $('.error_display').animate({'height':errorlist.length*22}, {queue:false, duration:500});
            for(var i = 0; i < errorlist.length; i++) {
                $('.error_display').append(errorlist[i]+"<br/>");
                //errorlist[i].text.appendTo($('.error_display'));
                //$('.error_display').append(errorlist[i].val());
            } 
         }else{
            $("form#form_contacto").submit();
            $('.error_display').animate({'height':0}, {queue:false, duration:500});
            $('.success_display').animate({'height':75}, {queue:false, duration:500});
            $('#form_contacto').animate({'opacity':0.25}, {queue:false, duration:500});
            $('.submit').attr("disabled", true);
         }
    });
});

PHP - message_handler.php

<?php
  $name = $_POST['name'];
  $last_name = $_POST['last_name'];
  $visitor_email = $_POST['email'];
  $title = $_POST['title'];
  $message = $_POST['message'];
  $about = $_POST['about'];
  $validation = $_POST['validation'];


  $email_from = 'example@example.com';
      $email_subject = "New Message";
      $email_body = "Received a new message from $name $last_name"."Visitor email: $visitor_email\n\n\n"."Title: $title\n"."Message sent:\n $message\n\n";


      $to = "example@example.com";

      $headers = "From: $email_from \r\n";

      $headers .= "Reply-To: $visitor_email \r\n";

      mail($to,$email_subject,$email_body,$headers);
?>

如果我将按钮更改为提交并在表单标记中放置method =“post”action =“message_handler.php”,则会正常发送消息。但是,当我使用该方法时,它会转到页面message_handler.php并显示一个空白页面,我希望它只发送,如果验证从message_validator.js实现,那就是为什么我试图使用jquery来使用帖子()方法。

我已经在最后的其他方面尝试了以下内容:

else{
$("form#form_contacto").submit();

}

else{
$.post("message_handler.php", {name:name, email:email, last_name:last_name, title:title, message:message}

}

1 个答案:

答案 0 :(得分:2)

message_handler.php

警告:您应该保护此页面免受垃圾邮件的侵害。在目前的状态下,你非常脆弱

将您对邮件功能的调用更改为此

  if(mail($to,$email_subject,$email_body,$headers)) {
    echo "success";
  }
  else {
    echo "fail";
  }

<强> message_validator.js

将此添加到您的else块

$.post(
    "message_handler.php",
    {
        name:name,
        email:email,
        last_name:last_name,
        title:title,
        message:message
    },
    function(result){
        // log to console for debug 
        console.log(result);
        if(result == 'success') {
            // do something here
        }
        else {
            // do something on failure
        }

});

<强> contact.php

将提交的按钮类型更改为prevent form submission

<input type="button" class="submit" value="Send">