Boostrap表单验证成功消息未到

Question

我正在使用引导程序表单验证，问题是表单提交后没有成功消息。我有一个PHP邮件功能脚本提交我在新页面中得到php消息echo'谢谢'，即使我写了{ {1}}，我在本地WAMP服务器上工作。我的问题是如何在同一页面的HTML成功MSG div中获取成功MSG。谁能指出我正确的方向？

return false

$(document).ready(function() {
  $('#contact_form').bootstrapValidator({
      // To use feedback icons, ensure that you use Bootstrap v3.1.0 or later
      feedbackIcons: {
        valid: 'glyphicon glyphicon-ok',
        invalid: 'glyphicon glyphicon-remove',
        validating: 'glyphicon glyphicon-refresh'
      },
      fields: {
        first_name: {
          validators: {
            stringLength: {
              min: 2,
            },
            notEmpty: {
              message: 'Please supply your first name'
            }
          }
        },
        last_name: {
          validators: {
            stringLength: {
              min: 2,
            },
            notEmpty: {
              message: 'Please supply your last name'
            }
          }
        },
        email: {
          validators: {
            notEmpty: {
              message: 'Please supply your email address'
            },
            emailAddress: {
              message: 'Please supply a valid email address'
            }
          }
        },
        phone: {
          validators: {
            notEmpty: {
              message: 'Please supply your phone number'
            },
            phone: {
              country: 'US',
              message: 'Please supply a vaild phone number with area code'
            }
          }
        },
        address: {
          validators: {
            stringLength: {
              min: 8,
            },
            notEmpty: {
              message: 'Please supply your street address'
            }
          }
        },
        city: {
          validators: {
            stringLength: {
              min: 4,
            },
            notEmpty: {
              message: 'Please supply your city'
            }
          }
        },
        state: {
          validators: {
            notEmpty: {
              message: 'Please select your state'
            }
          }
        },
        zip: {
          validators: {
            notEmpty: {
              message: 'Please supply your zip code'
            },
            zipCode: {
              country: 'US',
              message: 'Please supply a vaild zip code'
            }
          }
        },
        comment: {
          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'
            }
          }
        }
      }
    })
    .on('success.form.bv', function(e) {
      $('#success_message').slideDown({
        opacity: "show"
      }, "slow") // Do something ...
      $('#contact_form').data('bootstrapValidator').resetForm();

      // Prevent form submission
      e.preventDefault();

      // Get the form instance
      var $form = $(e.target);

      // Get the BootstrapValidator instance
      var bv = $form.data('bootstrapValidator');

      // Use Ajax to submit form data
      $.post($form.attr('action'), $form.serialize(), function(result) {
        console.log(result);
      }, 'json');
    });
});

.form-control {
  padding: 0;
}

#success_message {
  display: none;
}

.has-error .help-block {
  color: red;
}

Answer 1

您可能必须使用header("Location: contact_form.php");重定向回contact_form。
即；

if( mail( $mail_to, $subject, $msg, $headers )) {
        header("Location: contact_form.php?send=success");
} else {
        die("Error!");
}

请注意查询字符串参数send=success

现在，在您的contact_form.php中，在<form class="well form-horizontal" action=" " method="post" id="contact_form">之前添加以下条件。

    <?php
    $send_status = $_GET['send'];
    if(isset($send_status)){
    ?>
       <style>
          #success_message {
            display: block;
          }
      </style>
    <?
    }
    ?>

尝试一下，让我们知道。