Javascript 使用.hide（）jquery后，Div会重新出现

我检查了所有类似的问题，尝试了不同的解决方案，但一点运气都没有

我有一个非常简单的div来记录名字和姓氏。我想做的是，如果输入框不是空的，则发布到另一个页面（使用jquery），删除或隐藏div1，并显示div2以提问（div2是隐藏的）

出于某种原因，当我点击submit按钮时，姓名和姓氏被发布到另一个页面并存储在数据库中，但在发出警报后，div1再次出现，div2消失。谁能帮我一下吗

多谢各位

Jquery代码：

    <script>
        function saveDetailsToDB()
        {

            var name = document.getElementById('name').value;
            var surname = document.getElementById('surname').value;

            if (name === "" && surname === "") 
            {
                alert("Please, enter your details!");
                $("#UQ").css( "display", "none");   

            }

            else if(name !== "" && surname === "")
            {
                alert("Please, enter your Surname");
                $("#UQ").css( "display", "none");

            }

            else if(name === "" && surname !== "")
            {
                alert("Please, enter your Name");
                $("#UQ").css( "display", "none");
            }
            else
            {

                $.post("saveDetails.php",{ name: name,surname: surname });
                $("#detailsDiv").hide();
                $("#UQ").show();
                alert('You have been successfully registered!');

            }   
        }
    </script>

函数saveDetailsToDB（）
{
var name=document.getElementById（'name'）。值；
var姓氏=document.getElementById（'姓氏'）。值；
如果（姓名==“”&姓氏==“”）
{
警告（“请输入您的详细信息！”）；
$（“#UQ”）.css（“显示”、“无”）；
}
else if（姓名！==“”&姓氏===“”）
{
提醒（“请输入您的姓氏”）；
$（“#UQ”）.css（“显示”、“无”）；
}
else if（name==“”&姓氏！==“”）
{
提醒（“请输入您的姓名”）；
$（“#UQ”）.css（“显示”、“无”）；
}
其他的
{
$.post（“saveDetails.php”，{name:name，姓氏：姓氏}）；
$（“#detailsDiv”）.hide（）；
$（“#UQ”）.show（）；
警报（“您已成功注册！”）；
}   
}

HTML:

名称：




姓氏：




发送
请输入您的问题。





拯救

问题在于您没有阻止按钮单击的默认操作，因此页面会重新加载，使内容看起来像是重新出现的。试试这个：

发送

或者更好的是，从HTML中删除过时的

onclick

属性，并使用JavaScript附加事件：

发送

$（函数（）{
$（'.btn save'）。单击（函数（e）{
e、 预防默认值（）；
var name=$（'#name'）.val（）；
变量姓氏=$（'#姓氏'）.val（）；
如果（姓名==“”&姓氏==“”）{
警告（“请输入您的详细信息！”）；
$（“#UQ”）.hide（）；
}
else if（姓名！==“”&姓氏===“”）{
提醒（“请输入您的姓氏”）；
$（“#UQ”）.hide（）；
}
else if（name==“”&姓氏！==“”）{
提醒（“请输入您的姓名”）；
$（“#UQ”）.hide（）；
}
否则{
$.post（“saveDetails.php”，{
姓名:姓名,，
姓
});
$（“#detailsDiv”）.hide（）；
$（“#UQ”）.show（）；
警报（“您已成功注册！”）；
}   
});
});

太棒了！非常感谢Rory！没问题，很乐意帮忙。

    <div id = "detailsDiv">
        <form>
            <b><label>Name:</label></b><br> 
            <input type = "text" id = "name"><br><br>

            <b><label>Surname:</label></b><br>
            <input type = "text" id = "surname"><br><br>
            <button onclick="saveDetailsToDB();">Send</button>
        </form>

    </div>

    <div id = "UQ">
    <b><label>Please enter your question.</label></b><br><br>
    <form>
        <textarea id = "question" rows="4" cols="40"></textarea><br><br>
        <button onclick="saveQuestionToDB()">Save</button>
    </form>
</div>