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中的消息。

每当我按下提交按钮时，我面临的问题刷新了页面并且表单数据没有执行到数据库中。 它可能是我正在使用的 php 或 JS。 请帮助我。

Answer 1

1-您需要在提交 function 中添加“return false”以防止浏览器提交表单

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

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