使用Ajax和php联系我们的网页

Question

I would like to create contact us web page without refreshing the page when click send button. My code bellow, but there are some problems:

1- The page is refreshed after submitting the form.

2- The value of the Contact form inputs appear in the URL after submitting the form. check this image

3- The confirmation message appears for 0.25 seconds then disappear or does not appear.

4- The email is not received to my email address when I use Firefox browser.
Please help me to solve those problems.

HTML

<div class="col-sm-8 col-sm-offset-2" id="mail-status">


                </div>
                <div class="container-fluid">
                    <div class="row"> 
                        <div class="col-sm-8 col-xs-12 col-sm-offset-2">
                            <div class="well">
                                <form class="form-horizontal">
                                    <fieldset>
                                      <legend class="legend-title">I'd <span class="heart"><i class="fa fa-heart"></i></span> to contact you!</legend>
                                        <div class="form-group">
                                          <label for="inputName" class="col-sm-2 control-label">Name</label>
                                          <div class="col-sm-9">
                                                <input type="text" class="form-control" id="inputName" name="name" placeholder="Name" required="required">
                                          </div>
                                        </div>
                                        <div class="form-group">
                                          <label for="inputEmail" class="col-sm-2 control-label">Email</label>
                                          <div class="col-sm-9">
                                                <input type="email" class="form-control" id="inputEmail" name="email" placeholder="Email" required="required">
                                          </div>
                                        </div>
                                        <div class="form-group">
                                          <label for="inputSubject" class="col-sm-2 control-label">Subject</label>
                                          <div class="col-sm-9">
                                                <input type="text" class="form-control" id="inputSubject" name="subject" placeholder="Subject" required="required">
                                          </div>
                                        </div>
                                        <div class="form-group">
                                          <label for="textAreaMessage" class="col-sm-2 control-label">Message</label>
                                          <div class="col-sm-9">
                                                <textarea class="form-control" rows="5" id="textAreaMessage" name="message" placeholder="Message" required="required" minlength=5 ></textarea>
                                          </div>
                                        </div>
                                        <div class="form-group">
                                          <div class="col-sm-3 col-sm-offset-8">
                                                <button type="submit" class="btn btn-primary right-button" id="send" onClick="sendContact()">Send</button>
                                          </div>
                                        </div>
                                    </fieldset>
                                </form>

Javascript

function sendContact() {
            jQuery.ajax({
            url: "send_email.php",
            data:'inputName='+$("#inputName").val()+'&inputEmail='+$("#inputEmail").val()+'&inputSubject='+$("#inputSubject").val()+'&textAreaMessage='+$(textAreaMessage).val(),
            type: "POST",
            success:function(data){
            $("#mail-status").html(data);
            },
            error:function (){}
            });
        }   

php

                <?php
                $toEmail = "*****@***.com";
                $mailHeaders = "From: " . $_POST["inputName"] . "<". $_POST["inputEmail"] .">
";
                if(mail($toEmail, $_POST["inputSubject"], $_POST["textAreaMessage"], $mailHeaders)) {
                print "<div class='alert alert-success'> <button type='button' class='close' data-dismiss='alert'>&times;</button> Thank you for your email!  I will be in touch.</div>";
                } else {
                print "<div class='alert alert-danger'> <button type='button' class='close' data-dismiss='alert'>&times;</button> We are sorry, but there is a problem.  Please Make sure all fields are filled!</div>";
                }
                ?>`

Answer 1

Get rid of the inline onclick() event in your HTML, and let your JavaScript handle the click:

$('#send').click(function(e){
    e.preventDefault();
    sendContact();
});

preventDefault() stops the click event from acting normally, so your form data is submitted without reloading the page.