Question

我一直在寻求解决这个问题，但我找不到办法解决这个问题。我已经尝试过我在这里找到的其他方法，但是没有一个方法适合我。

我正在使用Bootstrap构建一个网站，并使用Bootstrap Validator制作联系表单。我可以使它工作完美并提交联系人，但“谢谢你的消息”被重定向到另一个页面。我希望在同一页面上加载“感谢信息”，并取代表单，因为它是一个滚动页面网站。

有人能帮帮我吗？这是我到目前为止的代码： 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="email@contato.com" />
                            </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 = 'myemail@hotmail.com'; //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.1\r\n";
$headers .= "Content-type: text/html; charset=utf-8\r\n";
$headers .= "From: $email\r\n"; // remetente
$headers .= "Return-Path: $emailtosend \r\n"; // 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页面中。该代码的整个项目可以在this link找到（以防您想要查看其他文件）。

    $(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;

  });

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

1 个答案: