php不向表中插入数据

Question

我有一个HTML表单

<div class="contact-form col-md-6 " >
                <form id="contact-form" method="post" action="" role="form">

                    <div class="form-group">
                      <input type="text" placeholder="Your Name" class="form-control" name="name" id="name" required>
                    </div>

                    <div class="form-group">
                        <input type="email" placeholder="Your Email" class="form-control" name="email" id="email" required>
                    </div>

                    <div class="form-group">
                        <input type="text" placeholder="Your Phone Number" class="form-control" name="phone" id="phone" required>
                    </div>                  
                    <div class="response_msg"></div>
                    <div id="mail-success" class="success">
                        Thank you. You are registerd. :)
                    </div>

                    <div id="mail-fail" class="error">
                        Sorry, don't know what happened. Try later :(
                    </div>

                    <div id="cf-submit">
        <input type="submit" id="contact-submit" class="btn btn-transparent" value="Register" name="submit">
                    </div>                                          
                </form>
            </div>

我需要在同一页上提交表单，并显示成功提交的消息。为此，我使用了JS

<script> 
$(document).ready(function(){
$("#contact-form").on("submit",function(e){
e.preventDefault();
if($("#contact-form [name='name']").val() === '')
{
$("#contact-form [name='name']").css("border","1px solid red");
}
else if ($("#contact-form [name='email']").val() === '')
{
$("#contact-form [name='email']").css("border","1px solid red");
}
else if ($("#contact-form [name='phone']").val() === '')
{
$("#contact-form [name='phone']").css("border","1px solid red");
}
else
{
$("#loading-img").css("display","block");
var sendData = $( this ).serialize();
$.ajax({
type: "POST",
url: "js/ajaxsubmit.php",
data: sendData,
success: function(data){
$("#loading-img").css("display","none");
$(".response_msg").text(data);
$(".response_msg").slideDown().fadeOut(3000);
$("#contact-form").find("input[type=text], input[type=email], textarea").val("");
}

});
}
});

$("#contact-form input").blur(function(){
var checkValue = $(this).val();
if(checkValue != '')
{
$(this).css("border","1px solid #eeeeee");
}
});
});
</script>  

只要我点击提交按钮页面刷新，但我看不到我的pho代码在数据库中插入数据。

<?php 
require_once("conn.php");
if((isset($_POST['name'])&& $_POST['name'] !='') && (isset($_POST['email'])&& $_POST['email'] !='') && (isset($_POST['phone'])&& $_POST['phone'] !=''))
{
// require_once("contact_mail.php");

    $yourName = $conn->real_escape_string($_POST['name']);
    $yourEmail = $conn->real_escape_string($_POST['email']);
    $yourPhone = $conn->real_escape_string($_POST['phone']);
    $sql="INSERT INTO Beta_Registration (name, email, phone) VALUES ('".$yourName."','".$yourEmail."', '".$yourPhone."')";
    if(!$result = $conn->query($sql)){
    die('There was an error running the query [' . $conn->error . ']');
    }
    else
    {
    echo "Thank you! We will contact you soon";
    }
    }
    else
    {
    echo "Please fill Name and Email";
    }
    ?>

我希望我的表单提交在同一页上，也停留在同一块，并显示在div中的形式，当数据输入成功或失败到数据库中的消息。

我所面临的问题是，每当我按下submit按钮时，页面就会刷新，表单数据不会被执行到数据库中。它可能是我正在使用的php或JS。在这方面请帮帮我。

Answer 1

1-您需要在on submit函数中添加"return false“，以防止浏览器提交表单

$(document).ready(function () {
    $("#contact-form").on("submit", function (e) {
        ...
        return false;
    });
    ...
});

2-您需要匹配您的数据库表名及其在MySQL查询中使用的列名。