表单验证输出无效

Question

I have a form and the form is working: I receive all the details on my e-mail. But when I click submit, it redirects to a blank page with the text: "Request submitted successfully. We will contact with you very soon.".

What I would like to do is to show a green box saying that the form was submitted successfully, on the same page like most websites do, and not a redirect...

I am using Bootstrap :)

Mailer.php code:

 <?php
    $tipoIn = $_POST['tipoIn'];
    $Tipologia_input = $_POST['Tipologia_input'];
    $sender_name = $_POST['Nome'];
    $sender_email = $_POST['email'];
    $phone = $_POST['Telefone'];
    $slider_value = $_POST['slider_value'];
    $mail_body = $_POST['message'];

    $body = $sender_name." sent a new message for you<br><br> Name: ".$sender_name."<br>Email: ".$sender_email."<br>Phone: ".$phone."<br>Tipo: ".$tipoIn."<br>Tipologia: ".$Tipologia_input."<br>Slider Value: ".$slider_value."<br>Message: ".$mail_body;

    sendMail($sender_name , $sender_email, $body);

    function sendMail($sender, $sender_mail, $body) {
        $to = '[e-mail]'; // Set Receiver Email Here
        $myemail = '[e-mail]'; // Set Sender Email Here
        $subject = "New EasyLoan Client"; // Set Subject Here
        $headers = "MIME-Version: 1.0
";
        $headers .= "Content-type: text/html; charset=iso-8859-1
";            
        $headers .= "From: Lead <[e-mail]>
"; // Set Header Here

        $message = $body;

        $sentmail = mail($to,$subject,$message,$headers);
        if($sentmail) { echo "Request submitted successfully. We will contact with you very soon."; }
        else { echo "Mail not sent"; }
    }

    ?>

Form code:

  <div class="form-container">
                <div class="form-mockup">
                    <h2>Que imóvel procura ?</h2>
                     <!-- <h4>Easy to apply for a loan with us,Once you have complete this form. </h4>-->
                    <form action="mailer.php" method="post">

                       <div class="form-group">
                           <select class="form-control" id="tipo" name="tipoIn">
                            <option value="Tipo" disabled selected>Tipo de imóvel</option>
                            <option value="Moradia">Moradia</option>
                            <option value="Apartamento">Apartamento</option>
                            </select>
                        </div>

                        <div class="form-group">
                           <select class="form-control" id="tipologia" name="Tipologia_input">
                                <option value="Tipologia" disabled selected>Tipologia</option>
                                <option value="T1">T1</option>
                                <option value="T2">T2</option>
                                <option value="T3">T3</option>
                                <option value="T4">T4</option>
                                <option value="T5">T5</option>
                            </select>
                        </div>


                      <div class="form-group">
                        <input type="text" class="form-control" placeholder="Nome Completo" name="Nome">
                      </div>
                      <div class="form-group">
                        <input type="email" class="form-control" placeholder="E-mail" name="email">
                      </div>
                      <div class="form-group">
                        <input type="text" class="form-control" placeholder="Telefone" name="Telefone">
                      </div>
                         <div class="form-group">
                          <textarea class="form-control" rows="3" id="comentario" placeholder="Diga-nos como imagina a sua casa..." name="message"></textarea>
                      </div>
                      <div class="form-group">
                        <div class="button-slider">
                          <div class="btn-group btn_group">
                            <div class="btn btn-default btn_amount">Valor </div>
                            <div class="btn btn-default btn_slider">
                              <input id="bootstrap-slider" type="text" data-slider-min="1" data-slider-max="50000" data-slider-step="1" data-slider-value="25000" name="slider_value" />
                              <div class="valueLabel"><span class="text_span">Valor &nbsp; &nbsp;</span>&nbsp;&nbsp;&nbsp;<span id="sliderValue">25000</span>€</div>
                            </div>
                          </div>
                        </div>
                      </div>
                      <button type="submit" class="btn btn-default quote_btn">Enviar</button>
                    </form>
                </div>
            </div>

Answer 1

You can do various things, it depends on the framework or cms or the logic of your code. there are many ways to accomplish this task (showing on (same/existing) page and not redirecting to (blank/defaced)) but its still depends.

2 main ways i currently can imagine are:

1. Using Ajax and json for messaging between Server and client and prevent reloading
2. Using session-keys to show up messages on any page user loads afterwards.