如何使用表格隐藏div并将数据发布到数据库并显示隐藏的div?

问题描述 投票:0回答:1

我想在数据成功发布到数据库时隐藏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);
    }
}
javascript php html hide
1个回答
0
投票

如果要向databse插入数据并且没有重新加载页面,请隐藏div,则必须使用Ajax。

© www.soinside.com 2019 - 2024. All rights reserved.