始终显示联系表单中的成功消息问题

Question

我正在使用下面的代码作为我的联系表。问题在于，只要用户填写联系表中的所有字段并通过 bootstrap 验证程序检查，当他们单击 "send" 时，就会显示 "success" 消息。这意味着即使 PHP 文件完全清空或不包含正确的 smtp 参数（因此肯定不会发送消息），仍然会显示成功消息。

如何调整 JS 代码，使其也考虑到 PHP 脚本的结果？

我不熟悉 PHP 和 JS，但我想它应该是这样的：

当用户单击 "send" 时，检查 bootstrap 验证器结果。
如果正常，从PHP脚本获取结果（成功或失败）
如果bootstrap验证器和PHP脚本都正常，显示"success"消息。如果不是，则显示 "alert" 消息。

感谢您的帮助

$(document).ready(function() {
    $('#contact_form').bootstrapValidator({
        feedbackIcons: {
            valid: 'glyphicon glyphicon-ok',
            invalid: 'glyphicon glyphicon-remove',
            validating: 'glyphicon glyphicon-refresh'
        },
      submitHandler: function(validator, form, submitButton) {
        $('#success_message').slideDown({ opacity: "show" }, "slow") // Do something ...
                $('#contact_form').data('bootstrapValidator').resetForm();
                $('button[name="submit"]').hide();

            var bv = form.data('bootstrapValidator');
            // Use Ajax to submit form data
            $.post(form.attr('action'), form.serialize(), function(result) {
                console.log(result);
            }, 'json');
      },
        fields: {
            first_name: {
                validators: {
                        stringLength: {
                        min: 2,
                    },
                        notEmpty: {
                        message: 'Please supply your first name'
                    }
                }
            },
            message: {
                validators: {
                      stringLength: {
                        min: 10,
                        max: 200,
                        message:'Please enter at least 10 characters and no more than 200'
                    },
                    notEmpty: {
                        message: 'Please supply a description of your project'
                    }
                    }
                }
            }
        })

});

PHP:

$mail->Subject = "New message from " . $_POST['first_name'] . $_POST['last_name'];
$mail->Body =  $_POST['message']."<br><br>From page: ". str_replace("http://", "", $_SERVER['HTTP_REFERER']) . "<br>" . $_SERVER ['HTTP_USER_AGENT'] ;

$response = array();
if(!$mail->send()) {
  $response = array('message'=>"Mailer Error: " . $mail->ErrorInfo, 'status'=> 0);
} else {
  $response = array('message'=>"Message has been sent successfully", 'status'=> 1);
}

/* send content type header */
header('Content-Type: application/json');

/* send response as json */
echo json_encode($response);

?>

Answer 1

将成功消息的显示从提交处理程序移动到 $.post 的回调中。

...
submitHandler: function(validator, form, submitButton)  {
    $('#contact_form').data('bootstrapValidator').resetForm();
    $('button[name="submit"]').hide();
    var bv = form.data('bootstrapValidator'); 

    // Use Ajax to submit form data
    $.post(form.attr('action'), form.serialize(), function(result 
    { 
        // Check for valid response from your phone script 
        $('#success_message').slideDown({ opacity: "show" }, "slow");
        console.log(result);
        }, 'json');
  } 
  ...

Answer 2

  submitHandler: function (validator, form, submitButton) {
          $('button[name="submit"]').hide();

          var bv = form.data('bootstrapValidator');
          // Use Ajax to submit form data
          $.post(form.attr('action'), form.serialize(), function (result) {
              if (result.status == 1) {
                  $('#success_message').slideDown({
                      opacity: "show"
                  }, "slow")
                  $('#contact_form').data('bootstrapValidator').resetForm();
              } else {
                  //show the error message 
              }
          }, 'json');

试试这个

Answer 3

您将希望通过适当的回调捕捉各种可能的响应。例如，如果 request/mailing 失败，则应接收 fail 回调。如果邮件发送成功，可以触发success回调，as documented here.

在您的代码中，替换：

$.post(form.attr('action'), form.serialize(), function(result) {
    console.log(result);
}, 'json');

像这样：

$.post(form.attr('action'), form.serialize(), function(result) {
    console.log(result);
}, 'json').done(function() {
    alert( "success" );
}).fail(function() {
    alert( "error" );
});

以便真正触发错误回调。确保您的 PHP 脚本没有 return 200 OK 状态，而是类似 400 Bad Request 的响应。

if(!$mail->send()) {
  $response = array('message'=>"Mailer Error: " . $mail->ErrorInfo, 'status'=> 0);
  header("HTTP/1.0 400 Bad Request");
} else {
  $response = array('message'=>"Message has been sent successfully", 'status'=> 1);
}

始终显示联系表单中的成功消息问题

Issue with success message in a contact form always displayed

javascript

php

twitter-bootstrap