Question

我想在点击发送按钮时创建联系我们网页而不刷新页面。我的代码如下，但有一些问题：

1-提交表单后刷新页面。

2-联系表单输入的值在提交表单后显示在URL中。 check this image

3-确认信息显示0.25秒然后消失或不显示。

4-使用Firefox浏览器时，我的电子邮件地址未收到电子邮件请帮我解决这些问题。

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"] .">\r\n";
                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

摆脱HTML中的内联onclick()事件，让JavaScript处理点击：

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

preventDefault()阻止点击事件正常运作，因此您的表单数据无需重新加载页面即可提交。

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

1 个答案: