Question

我有一个默认不可见的div。我想，当按钮点击它出现。
我试过了，但问题是它只显示了几秒钟然后再次隐藏。

这是我的代码：

function validate() {
    var ta = document.getElementById("t").value;
    var oa = document.getElementById("oa").value;
    var ob = document.getElementById("ob").value;
    var oc = document.getElementById("oc").value;
    var od = document.getElementById("od").value;


    if (ta == "") {
        alert("Title can't be null");
        document.getElementById("t").style.borderColor = "#E34234";
        return false;
    }

    if (oa == ""  &&  ob == "") {
        alert("Atleast two options are compulsory");
        document.getElementById("oa").style.borderColor = "#E34234";
        document.getElementById("ob").style.borderColor = "#E34234";
        return false;
    }

    document.getElementById("g").style.visibility="visible";
    return true;

}

Div ID为'g'，并在调用提交按钮function validate()时验证表单并显示div。

Answer 1

只是return false而不是真。它将停止页面刷新并且div不会被隐藏。此外，如果您需要页面刷新，只需使用url传递GET参数，并在加载页面时检查get参数，如果其设置，则默认情况下使div可见。

function validate() {
    var ta = document.getElementById("t").value;
    var oa = document.getElementById("oa").value;
    var ob = document.getElementById("ob").value;
    var oc = document.getElementById("oc").value;
    var od = document.getElementById("od").value;


if (ta == "") {
    alert("Title can't be null");
    document.getElementById("t").style.borderColor = "#E34234";
    document.getElementById("g").style.visibility="visible";

    return false;
}

if (oa == ""  &&  ob == "") {
    alert("Atleast two options are compulsory");
    document.getElementById("oa").style.borderColor = "#E34234";
    document.getElementById("ob").style.borderColor = "#E34234";
    document.getElementById("g").style.visibility="visible";
    return false;
}

return true;
}

这样，只有在验证失败时才会显示div。如果要提交表单以及保持div可见，则需要使用get参数方法，或者需要使用ajax。

Answer 2

我在这里猜测并假设表单正在提交，因此您会看到div在几分之一秒内可见。您应该使用此代码：

function validate() {
    var ta = document.getElementById("t").value;
    var oa = document.getElementById("oa").value;
    var ob = document.getElementById("ob").value;
    var oc = document.getElementById("oc").value;
    var od = document.getElementById("od").value;

    var flag = false; // initially assume that all is well


    if (ta == "") {
        alert("Title can't be null");
        document.getElementById("t").style.borderColor = "#E34234";
        flag = true; // something wrong, flag it
    }

    if (oa == ""  &&  ob == "") {
        alert("Atleast two options are compulsory");
        document.getElementById("oa").style.borderColor = "#E34234";
        document.getElementById("ob").style.borderColor = "#E34234";
        flag = true; // something wrong, flag it
    }

    if(flag) // if something wrong, show div and disable form submit
    {
       document.getElementById("g").style.visibility="visible";
       return false;
    }

    return true;

}

我们在这里做的是创建一个标志来检查其最后的值。如果是true，则表示表单上存在错误，因此应禁用表单提交。如果没有，那么没有错误，表单提交可以照常进行。

在按钮上显示div单击javascript

2 个答案: