我想在数据成功发布到数据库时隐藏myForm div,并且单击提交按钮时div部分将显示其组件,现在它的工作仅隐藏div并显示另一个div,但是问题是数据没有发布到数据库,我该如何解决此问题以将数据保存到数据库并显示hide div,请注意:我不想重新加载我的页面。
HTML代码
<div id="section" style="display: none;">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestiae cupiditate culpa reprehenderit animi,
numquam distinctio repellendus debitis fugit unde consequatur eum magni illo minima amet quidem omnis veniam
commodi voluptatum!
</p>
</div>
<div id="myForm">
<form id="testForm" method="post" action="#">
<input id="form_name" type="text" name="name" class="form-control">
<input type="submit" name="submit" class="btn btn-send" value="submit">
</form>
</div>
JavaScript代码
const sectionDiv = document.getElementById('section');
const form = document.getElementById('myForm');
form.addEventListener('submit', function (e) {
e.preventDefault();
form.style.display = 'none';
sectionDiv.style.display = 'block';
});
PHP代码
include("db.php");
if (isset($_POST['submit']))
{
$form_name= $_POST['name'];
$query = "INSERT INTO `test` (`xxname`) VALUES ('$form_name')";
if(mysqli_query($conn, $query))
{
echo "asdfghjkl";
}
else
{
echo "ERROR: Could not able to execute $query. " . mysqli_error($conn);
}
}
如果要向databse插入数据并且没有重新加载页面,请隐藏div,则必须使用Ajax。