要在同一页面上加载的Bootstrap Validator Form消息

Question

我一直在寻找解决这个问题，但我找不到一种方法。我已经尝试了我在这里找到的其他方法，但它们都不适合我。

我正在建立一个网站与Bootstrap，也使用Bootstrap验证器，使联系形式。我可以使它工作完美，也提交的联系，但"谢谢你的消息"被重定向到另一个页面。我想"谢谢你的消息"加载在同一页面上，并采取的形式的地方，因为它的一个滚动页网站。

有谁能帮帮我吗?这是我到目前为止的代码:Ps:我所有的CSS文件都是bootstrap的原始文件，没有任何改变。 HTML

<div class="container">
        <div class="row">
            <!-- form: -->
            <section>
                <div class="col-lg-8 col-lg-offset-2">
                    <div class="page-header">
                        <h2>Formulário de contato.</h2>
                    </div>
                    <form id="defaultForm" method="post" class="form-horizontal" action="contact-2.php">
                        <div class="form-group">
                            <label class="col-lg-3 control-label">Nome completo</label>
                            <div class="col-lg-4">
                                <input type="text" class="form-control" name="firstName" placeholder="Nome" />
                            </div>
                            <div class="col-lg-4">
                                <input type="text" class="form-control" name="lastName" placeholder="Sobrenome" />
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-lg-3 control-label">Assunto</label>
                            <div class="col-lg-5">
                                <input type="text" class="form-control" name="subject" placeholder="WebSite" />
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-lg-3 control-label">E-mail</label>
                            <div class="col-lg-5">
                                <input type="text" class="form-control" name="email" placeholder="[e-mail]" />
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-lg-3 control-label">Telefone</label>
                            <div class="col-lg-5">
                                <input type="tel" class="form-control" name="tel" placeholder="48 0000 0000" />
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-lg-3 control-label">Mensagem</label>
                            <div class="col-lg-5">
                                <textarea class="form-control" name="message" rows="10" placeholder="Escreva aqui sua mensagem."></textarea>
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="col-lg-3 control-label" id="captchaOperation"></label>
                            <div class="col-lg-2">
                                <input type="text" class="form-control" name="captcha" />
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="col-lg-9 col-lg-offset-3">
                                <button type="submit" class="btn btn-primary" name="signup" value="Sign up">Enviar</button>
                                <button type="button" class="btn btn-info" id="resetBtn">Limpar</button>
                            </div>
                        </div>
                    </form>
                </div>
            </section>
            <!-- :form -->
        </div>
    </div>

PHP接触

<?php
// getting 
$firstname     = $_POST['firstname'];
$lastname     = $_POST['lastname'];
$email    = trim($_POST['email']);
$emailtosend = '[e-mail]'; //E-mail to receive message
$tel           = $_POST['tel'];
$subject          = $_POST['subject'];
$message          = $_POST['message'];

/* Message to show on email. */
$mensagemHTML = '<P>Contact form sent by the website.</P>
<p><b>First Name:</b> '.$firstname.'
<p><b>Last Name:</b> '.$lastname.'
<p><b>E-Mail:</b> '.$email.'
<p><b>Telephone:</b> '.$tel.'
<p><b>Subject:</b> '.$subject.'
<p><b>Message:</b> '.$message.'</p>
<hr>';

// 
// 
$headers = "MIME-Version: 1.1rn";
$headers .= "Content-type: text/html; charset=utf-8rn";
$headers .= "From: $emailrn"; // remetente
$headers .= "Return-Path: $emailtosend rn"; // return-path
$envio = mail($email, $subject, $mensagemHTML, $headers); 
 if($envio)
//echo "<script>location.href='sucesso.html'</script>"; // Página que será redirecionada
?>

如果这里有人能帮我，那就太好了!

Answer 1

看一下下面的代码。您需要AJAX。将其放在html页面中。该代码的整个项目可以在这个链接中找到(以防您也想看到其他文件)。

    $(function() {
      $("#myform button").click(function() {
        // Get form values
        var name = $("input#name").val();
        var email = $("input#email").val();
        var comments = $("textarea#comments").val();
        // Validate and prepare values for php
        var dataString = 'name='+ name + '&email=' + email + '&comments=' + comments;
        // Post data to the php file
        $.ajax({
          type: "POST", 
          url: "bin/process-form.php",
          async:false, // Wait for the result
          data: dataString,
          success: function(data) {
              if (data=="Email Sent Successfully!"){
                $('#myform').html("<div id='message'></div>");
                $('#message').html("<h2>Enquiry Form Submitted!</h2>")
                    .append("<p>We will be in touch soon.</p>")
                    .hide()
                    .fadeIn(1500, function() {
                      $('#message').append("<span class='glyphicon glyphicon-ok'></span>");
                    });
            } else {
                    $("#myform-errors").show();
                    $('#myform-errors').html(data);
                }
          }
        });
        return false;
  });