Show div on button click javascript

Question

I have a div which is invisible by default. I want, when button click it shows up.
I have tried, but the problem is it shows for just seconds and then again hide.

Here is my code:

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 is 'g' and on submit button function validate() is called which validates the form and also show the div.

Answer 1

Just return false instead of true. It will stop page refresh and the div won't be hidden. Also, if you need the page refresh, just pass a GET parameter with the url and when the page is loaded, check the get parameter and if its set, make the div visible by default.

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

This way, the div will be shown only if the validation has failed. If you want to submit the form as well as keep the div visible, you need to use the approach with get Parameter, or you need to use ajax.

Answer 2

I'm taking a guess here and assuming that the form is submitting and hence you see the div being visible for a fraction of a second. You should use this code instead:

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;

}

What we are doing here is creating a flag to check its value at the end. If it's true , it means there are errors on form and hence form submit should be disabled. If not, then there are no errors and form submit can proceed as usual.