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

Question

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

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

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

1. 当用户点击“发送”时，检查 bootstrapvalidator 结果。

2. 如果成功，从PHP脚本获取结果(成功或失败)

3. 如果 bootstrapvalidator 和 PHP 脚本都正常，则显示“成功”消息。如果不是，则显示“警报”消息。

谢谢你的帮助

$(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');
  } 
  ...