javascript – 使用.hide()jquery后,Div重新出现

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了javascript – 使用.hide()jquery后,Div重新出现，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含2281字，纯文字阅读大概需要4分钟。

内容图文

我检查了所有类似的问题并尝试了不同的解决方案,但根本没有运气.

我有一个非常简单的div来获取名字和姓氏.我想要做的是,如果输入框不为空,则发布到另一页(使用jquery),删除或隐藏div1并显示div2以提出问题(div 2被隐藏).

出于某种原因,当我点击提交按钮时,名称和姓氏将发布到另一页并存储在数据库中,但在警报之后,div1重新出现并且div 2消失.请问有人帮我一把吗？

非常感谢你！

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>

HTML：

    <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>

解决方法:

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

<button onclick="saveDetailsToDB(); return false;">Send</button>

或者更好的是,从HTML中删除过时的onclick属性并使用JavaScript附加事件：

<button class="btn-save">Send</button>

$(function() {
    $('.btn-save').click(function(e) {
        e.preventDefault();

        var name = $('#name').val();
        var surname = $('#surname').val();

        if (name === "" && surname === "") {
            alert("Please, enter your details!");
            $("#UQ").hide();
        }
        else if(name !== "" && surname === "") {
            alert("Please, enter your Surname");
            $("#UQ").hide();
        }
        else if(name === "" && surname !== "") {
            alert("Please, enter your Name");
            $("#UQ").hide();
        }
        else {
            $.post("saveDetails.php", { 
                name: name,
                surname: surname 
            });
            $("#detailsDiv").hide();
            $("#UQ").show();
            alert('You have been successfully registered!');
        }   
    });
});

内容总结

以上是互联网集市为您收集整理的javascript – 使用.hide()jquery后,Div重新出现全部内容，希望文章能够帮你解决javascript – 使用.hide()jquery后,Div重新出现所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端