在按钮上显示div上显示div

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而不是true。 它将停止页面刷新，并且不会隐藏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 Parameter一起使用，或者需要使用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 ，则表示表单上存在错误，因此应禁用表单提交。 如果没有，那么就没有错误，并且表单提交可以照常进行。