Bootstrap Validator Form message to load on the same page

Question

I've been looking to solve this, but i can't find a way to do it. I already tried other methods i found in here, but none of them were working for me.

I'm building a website with Bootstrap and also using Bootstrap Validator to make a Contact Form. I can make it work perfect and also submit the contact, but the "thank you message" is redirected to another page. I want the "Thank you message" to load on the same page, and take the place of the form, since its a one scrolling page website.

Can anyone help me please? This is the code i have so far: Ps.: All my CSS file are the original from bootstrap, nothing has been changed.

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 Contact

<?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

?>

If there is anyone here able to help me with it, that would be great!

You do need AJAX because your PHP code is in a separate page and you want to display the _thank you message_ on the same page. I recommend you start reading on AJAX and read more posts and tutorials like [this](http://stackoverflow.com/questions/16323360/submitting-html-form-using-jquery-ajax) and [this.](http://hayageek.com/jquery-ajax-form-submit/) — AyB, Jun 10 '14 at 04:49

score 0 · Answer 1 · answered Jun 10 '14 at 01:59

Have a look at the code below. You need AJAX. Place this in your html page. The whole project of that code can be found at this link (just in case you want to see other files too).

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

  });

I tried to use this, but the only thing i'm getting is to clean the form after i click on the submit button and the page goes back to the top. But i have no message and no e-mail receiving in my account. I double checked it looking at the scripts you gave in the link. Any idea? — celsomtrindade, Jun 10 '14 at 02:45
Did you edit the code I suggested? You have to add your fields so that it passes all the values to the php file. — manosim, Jun 10 '14 at 13:58
Yes, i made those changes. This is the pastbin of my HTML, just the part you said to put: http://pastebin.com/n2iMBNa5 - I also made a little change on the form top remove the action (there is an example in the pastbin file as well). The contact-2.php i didn't changed. — celsomtrindade, Jun 10 '14 at 14:04

Bootstrap Validator Form message to load on the same page

1 Answers1