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.

If this validate() function is run, it should show you the div with id g. There is no code written in here which will hide it. Or is there a page refresh happening? — asprin
– asprin, Commented May 26, 2014 at 12:19
There is nothing in your code that would hide an HTML element. Can you provide a jfiddle that reproduces your problem fur further debugging? I guess that there is some important part missing in your question. — feeela
– feeela, Commented May 26, 2014 at 12:20
Clicking "on submit button" submits a form, and the page will be refreshed. — Teemu
– Teemu, Commented May 26, 2014 at 12:20
Without looking at how your HTML is structured and how you are calling validate, all attempts to answer would be at best guesswork. — Abhitalks
– Abhitalks, Commented May 26, 2014 at 12:26

asprin · Accepted Answer · 2014-05-26 12:22:39Z

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.

Sourabh · Accepted Answer · 2014-05-26 12:32:49Z

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.

edited May 26, 2014 at 12:32

answered May 26, 2014 at 12:21

Sourabh

1,7756 gold badges21 silver badges43 bronze badges

5 Comments

Onimusha Over a year ago

returning false will render the form useless. The return false should be conditional

Roshaan Nayyar Over a year ago

i did, but it blocks the form to submit.

Sourabh Over a year ago

Yes it is supposed to do that. If u want the form to be submitted, you need to wrap it in a condition. Editing my answer, 1 min.

asprin Over a year ago

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

Sourabh Over a year ago

That's because every condition that fails validation, it needs to be there. Or you can just put that at the start of the function, or u ca use a flag as suggested in another answer here. Flag is a good choice, but code repeatition and overhead of a variable are cons. Putting it on the start isn't a good practice. It needs to be conditional, it should be there that way.

Collectives™ on Stack Overflow

Show div on button click javascript

2 Answers 2

Comments

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related