how to hide a tag and show it with javascript

Question

i have this sample html coding

<form id = "myform" onsubmit = "return checkcheckboxes()">
task 1</task><input type = "checkbox" name = "chk1"></br>
task 2<input type = "checkbox" name = "chk2"></br>
task 3<input type = "checkbox" name = "chk3"></br></br>
<input type = "submit" value = "Go to the next task"></br>
<span id = "message" >congratulations! you have completed all the task completely</span>
</form>

and this is the JS

function checkcheckboxes() {
document.getElementById("message").innerHTML = "";
var valid = true;
var f = document.getElementById("myform");
if (f.chk1.checked == false) {valid = false}
if (f.chk2.checked == false) {valid = false}
if (f.chk3.checked == false) {valid = false}
if (!valid) {document.getElementById("message").innerHTML = "You must check all three boxes to proceed"};
return valid;
}

If you open the code in the browser with JS, it will show you three checkboxes with a submit button and there is a span text under submit button saying

congratulations! you have completed all the tasks completely

If you check >2 boxes and click submit, the text under the submit button will say

You must check all three boxes to proceed

and if you check all 3 boxes the message will change again back to:

congratulations! you have completed all the tasks completely

what i want to do is remove the saying:

congratulations! you have completed all the tasks completely

and only show it when all the boxes are checked and submit button is click, since is showing even though boxes are not checked.

you can check [here](http://stackoverflow.com/questions/9887360/check-if-checkbox-is-checked-javascript) on how to achieve this. Also a couple of tips provided I am not a front end expert but remove the spaces in your HTML `onsubmit="checkcheckboxes()"` also name your functions like `checkCheckBoxes()` — Wahtever, Jun 02 '13 at 21:44
Sorry, I can't help with this; I'm not really a javascript expert. However, if I may, I'd suggest that you might get more and/or better responses if you could format your code better - indents make it easier to read, and if you can use shorter lines so that people can read the code without needing to scroll that makes it easier too. Good luck with your problem. — nurdglaw, Jun 02 '13 at 21:56

acdcjunior · Accepted Answer · 2013-06-03T02:12:30.843

What I want to do is remove the saying: "congratulations! you have completed all the tasks completely" and only show it when all the boxes are checked and submit button is click

Make the <span> empty: <span id="message"></span>. And let the JavaScript fill it when you validate the form.

What if I wanna put a link with the text, should I just use the html anchor tag in the javascript string? EX: congratulations! you have completed all the task completely and here is the link

In that case, add the link in the "congratulations..." text and always return false so the form is never submitted.

and is there a javascript command that will get all the checkboxes on the page instead of putting each of their name, because I will create a huge checklist

Yes, there is. Here's the final code (verifying all checkboxes inside the myform form and adding the anchor tag to the resulting text):

function checkcheckboxes() {
    var valid = true;
    var inputs = document.getElementById("myform").getElementsByTagName("input");
    for (var i = 0; i < inputs.length; i++) {
        if (inputs[i].type == "checkbox") {
            if (!inputs[i].checked) {
                valid = false;
                break; // break as soon as it finds an unchecked
            }
        }
    }
    if (!valid) {
        document.getElementById("message").innerHTML = "You must check all boxes to proceed";
    } else {
        document.getElementById("message").innerHTML = "congratulations! you have completed all the tasks completely and <a href='http://www.google.com'>here is the link</a>.";
    }
    return false;
}

See working demo code here.

what if i wanna put a link with the text, should i just use the html anchor tag in the javascript string? EX: congratulations! you have completed all the task completely and here is the link @acdcjunior — Mohammad Dohadwala, Jun 03 '13 at 01:47
and is there a javascript command that will get all the checkboxes on the page instead of putting each of their name, because i will create a huge checklist — Mohammad Dohadwala, Jun 03 '13 at 01:51
the updated answer did not work with tables, on one row of the table, there is the task name, and on the other side of the table, there is a checkbox, there is no
tag each check box is located on a different cell of the table — Mohammad Dohadwala, Jun 03 '13 at 02:22
If there's no form, instead of . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . `var inputs = document.getElementById("myform").getElementsByTagName("input");` . . . . , use: `var inputs = document.getElementsByTagName("input");`. It will verify all checkboxes of the page. — acdcjunior, Jun 03 '13 at 02:25

how to hide a tag and show it with javascript

1 Answers1

Linked