Develop Reference

If both checkboxes are true, then show DIV

I am trying to show a Div that contains a button element, but only when BOTH checkboxes have been "agreed" to.
I have tried to use JS to check this and then set the style display when each checkbox is clicked.
HTML:
<div class="agreement_box">
<input type="checkbox" id="box1" onclick="showMe('submit_btn')">
</div>
<br>
<div class="agreement_box">
<input type="checkbox" id="box2" onclick="showMe('submit_btn')">
</div>
<div id="submit_btn" class="profileSubmit_btn" style="display:none">
<button>
BUTTON
</button>
</div>
JS:
function showMe(box) {
var chbox1 = document.getElementByID("box1");
var chbox2 = document.getElementByID("box2");
var vis = "none";
if (chbox1.checked && chbox2.checked) {
vis = "block";
break;
}
document.getElementById(box).style.display = vis;
}
Fiddle: https://jsfiddle.net/nhykqodp/2/
I'm kinda new to JS and my HTML knowledge is about 10 years out of date at this point. Any help would be appreciated.
Thanks.

If I run your code, it shows:
Uncaught SyntaxError: Illegal break statement
Thats because a break
can only be used inside a loop.
Furthermore, you have a typo, it should be getElementById instead of getElementByID
Note: The d shouldn't be capitalised
Remove the break
Fix the typos:
function showMe(box) {
var chbox1 = document.getElementById("box1");
var chbox2 = document.getElementById("box2");
var vis = "none";
if (chbox1.checked && chbox2.checked) {
vis = "block";
}
document.getElementById(box).style.display = vis;
}
<div class="agreement_box">
<input type="checkbox" id="box1" onclick="showMe('submit_btn')">
</div>
<br>
<div class="agreement_box">
<input type="checkbox" id="box2" onclick="showMe('submit_btn')">
</div>
<div id="submit_btn" class="profileSubmit_btn" style="display:none">
<button>
BUTTON
</button>
</div>
Using an in-line if statement, we can remove the vis variable so we can alter the style right away like so:
function showMe(box) {
const chbox1 = document.getElementById("box1");
const chbox2 = document.getElementById("box2");
document.getElementById(box).style.display = (chbox1.checked && chbox2.checked) ? 'block' : 'none';
}
function showMe(box) {
const chbox1 = document.getElementById("box1");
const chbox2 = document.getElementById("box2");
document.getElementById(box).style.display = (chbox1.checked && chbox2.checked) ? 'block' : 'none';
}
<div class="agreement_box">
<input type="checkbox" id="box1" onclick="showMe('submit_btn')">
</div>
<br>
<div class="agreement_box">
<input type="checkbox" id="box2" onclick="showMe('submit_btn')">
</div>
<div id="submit_btn" class="profileSubmit_btn" style="display:none">
<button>
BUTTON
</button>
</div>

The syntax errors have already been pointed out; for hiding/showing elements these already have an API which is called el.hidden. I recommend you use it.
Aside from that, you shouldn't use inline event handlers like onclick. Instead, use EventTarget.addEventListener().
I've also generalized your code, so that any number of checkboxes can act as toggle for any element, given that element has the id that you define in data-toggle on the checkboxes.
const checkboxes = Array.from(document.querySelectorAll('[data-toggle]'));
function allChecked(toggle) {
return checkboxes.filter(cb => cb.dataset.toggle === toggle).every(cb => cb.checked);
}
for (const checkbox of checkboxes) {
checkbox.addEventListener('change', function() {
document.getElementById(this.dataset.toggle).hidden = !allChecked(this.dataset.toggle);
});
}
<div class="agreement_box">
<input type="checkbox" data-toggle="submit_btn">
</div>
<br>
<div class="agreement_box">
<input type="checkbox" data-toggle="submit_btn">
</div>
<div id="submit_btn" class="profileSubmit_btn" hidden>
<button>
BUTTON
</button>
</div>

Little syntax error just replace document.getElementByID to document.getElementById

JavaScript not running when input box is focused on. Simple fix?

I copied this code from my previous website, which was running perfectly fine. However, even when I copied everything over, it doesn't work for some reason.
I've looked through the code and never touched anything, but also fiddled around with a few options I could have thought of. Nothing has worked so far.
https://jsfiddle.net/Lpbmg0z6/
HTML:
<section class="contact__section" id="contact">
<h2 class="vh">Contact Me</h2>
<div class="innerContent">
<div class="contact__form clear all">
<fieldset id="contact_form">
<div class="contactForm__full contactForm__input">
<label for="name" class="all">name</label>
<input type="text" name="name" id="name" />
</div>
<div class="contactForm__full contactForm__input">
<label for="email" class="all">email</label>
<input type="text" name="email" id="email" />
</div>
<div class="contactForm__full contactForm__input">
<label for="message" class="all">message</label>
<textarea name="message" id="message"></textarea>
</div>
<div class="contactForm__full">
<button class="submit_btn all" id="submit_btn" aria-label="Submit message">submit</button>
</div>
<div id="result" class="contactForm__results"></div>
</fieldset>
</div>
</div>
</section>
JS:
$("input").focus(function () {
$(this).parent().find("label").removeClass("labelBlur").addClass("labelFocus");
});
$("input").focusout(function () {
if ($(this).val().length == 0) {
$(this).parent().find("label").addClass("labelBlur").removeClass("labelFocus");
}
});
var inputs = $("input").length;
for (var i = 0; i < inputs; i++) {
$input = $("input:eq(" + i + ")");
if (($input.attr("type") != "checkbox") && ($input.attr("type") != "submit")) {
if ($input.val().length != 0) {
$input.parent().find("label").addClass("labelFocus");
} else {
$input.parent().find("label").addClass("labelBlur");
}
}
}
$("textarea").focus(function () {
$(this).parent().find("label").removeClass("labelBlur").addClass("labelFocus--textarea");
});
$("textarea").focusout(function () {
if ($(this).val().length == 0) {
$(this).parent().find("label").addClass("labelBlur").removeClass("labelFocus--textarea");
}
});
var textareas = $("textarea").length;
for (var i = 0; i < textareas; i++) {
$textarea = $("textarea:eq(" + i + ")");
if (($textarea.attr("type") != "checkbox") && ($textarea.attr("type") != "submit")) {
if ($textarea.val().length != 0) {
$textarea.parent().find("label").addClass("labelFocus--textarea");
} else {
$textarea.parent().find("label").addClass("labelBlur");
}
}
}
All it's supposed to be doing is when you click/focus on one of the inputs, it adds a class, and when you unfocus, it removes that class and adds back the default class.

In your JSFiddle, you've forgotten to include jQuery. Once jQuery is added the code works fine; do you think you've done the same on your actual site?
To add jQuery via a CDN visit https://code.jquery.com/ and pick one of the script tags on offer, e.g.
<script
src="https://code.jquery.com/jquery-1.12.4.min.js"
integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ="
crossorigin="anonymous"></script>

Show div upon submit

I am wanting to show a div (depending on the the value input) but I am seeing no errors in the console to point me in the right direction but there is something wrong with my code:
<style type="text/css">
#outputOne{display: none;}
#outputTwo{display: none;}
#outputThree{display: none;}
</style>
</head>
<body>
<form method="POST" onsubmit="return showResults()">
<input type="text" id="valueOne" /><br />
<input type="text" id="valueTwo" /><br />
<input type="text" id="valueThree" /><br />
<input type="submit" id="submit" />
</form>
<div id="outputOne">Value One</div>
<div id="outputTwo">Value Two</div>
<div id="outputThree">Value Three</div>
<script>
function showResults(){
if(value <= 100){
document.getElementById('outputOne').style.display = "block";
return true;
} if(value > 500){
document.getElementById('outputTwo').style.display = "block";
return true;
}if(value > 10000){
document.getElementById('outputThree').style.display = "block";
return true;
}
}
</script>

If you want to see something you should prevent submit by returning false instead of true because now the form will be submited in all the cases and you will never see the div shown since the page will be refreshed.
Hope this helps.

You need to define value variable
And then return false on every if so that div will show on submit otherwise page will refresh and all default setting will be shown

Ok, so there are a few problems:
You never define value inside that function... you need to do that. Second, a form submission will refresh the page, undoing any DOM changes you did. This can be fixed by changing it to a button which calls your function. Here's an updated version of your code that works:
<style type="text/css">
.hide{display: none;}
.show{display: block;}
.submit{height:20px; width: 100px;}
</style>
</head>
<body>
<input type="text" id="valueOne" /><br />
<input type="text" id="valueTwo" /><br />
<input type="text" id="valueThree" /><br />
<button id="submit" class="submit" onClick="showResults()"></button>
<div id="outputOne" class="hide" >Value One</div>
<div id="outputTwo" class="hide" >Value Two</div>
<div id="outputThree" class="hide" >Value Three</div>
<script>
function showResults(){
var value = parseInt(document.getElementById('valueOne').value) + parseInt(document.getElementById('valueTwo').value) + parseInt(document.getElementById('valueThree').value);
if(value <= 100){
document.getElementById('outputOne').className = "show";
} else {
document.getElementById('outputOne').className = "hide";
}
if(value > 500){
document.getElementById('outputTwo').className = "show";
} else {
document.getElementById('outputTwo').className = "hide";
}
if(value > 10000){
document.getElementById('outputThree').className = "show";
} else {
document.getElementById('outputThree').className = "hide";
}
}
</script>
I've also switched the css to use classes, which is a bit more flexible and better practice.
Credit to Zakaria Acharki and mohsin azeem for spotting the form error causing a refresh, and to the always-helpful charlietfl for that and for pointing out my own silly error for the submit button.

Try substituting oninput event for onsubmit event
<head>
<style type="text/css">
#outputOne {
display: none;
}
#outputTwo {
display: none;
}
#outputThree {
display: none;
}
</style>
<script>
function showResults() {
var value = this.value;
console.log(value);
if (value <= 100) {
divs[0].style.display = "block";
divs[1].style.display = divs[2].style.display = "none";
}
if (value > 500) {
divs[1].style.display = "block";
divs[0].style.display = divs[2].style.display = "none";
}
if (value > 10000) {
divs[2].style.display = "block";
divs[0].style.display = divs[1].style.display = "none";
}
}
window.onload = function() {
divs = document.querySelectorAll("div[id^=output]");
Array.prototype.forEach.call(document.forms[0].querySelectorAll("input")
, function(el) {
el.setAttribute("placeholder", "enter a number");
el.oninput = showResults;
});
}
</script>
</head>
<body>
<form method="POST">
<input type="text" id="valueOne" />
<br />
<input type="text" id="valueTwo" />
<br />
<input type="text" id="valueThree" />
<br />
<input type="submit" id="submit" disabled />
</form>
<div id="outputOne">Value One</div>
<div id="outputTwo">Value Two</div>
<div id="outputThree">Value Three</div>
</body>

Jquery change function is not working?

I am trying to change css of two divs on a change in a select tag when specific value is selected so can you please take a look over my code that what am I doing wrong?
$(document).ready(function() {
$('#ads_site').change(function() {
if ($(this).val() == 'boss.az') {
$("#boss.az").css("display", "block");
}
elseif($(this).val() == 'jobsearch.az') {
$("#jobsearch.az").css("display", "block");
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form method="post" action="process.php">
<select name="ads_site" id="ads_site">
<option value="boss.az">boss.az</option>
<option value="jobsearch.az">jobsearch.az</option>
</select>
<div id="boss.az" style="display:none;">
<center>
<h3>::Ads To Be Added::</h3>
</center>
<br>
<input type="text" class="from_page" name="from_page" placeholder="From Page No">
<input type="text" class="to_page" name="to_page" placeholder="To Page No">
</div>
<div id="jobsearch.az" style="display:none;">
<center>
<h3>::Ads To Be Added::</h3>
</center>
<br>
<input type="text" class="from_ad" name="from_page" placeholder="From Ad No">
<input type="text" class="to_ad" name="to_page" placeholder="To Ad No">
</div>
<input type="submit" name="submit" class="login login-submit" value="Submit">
</form>

There are 2 problems:
There is no elseif in JavaScript, you should use else if instead.
Since your IDs contain . you should escape them, otherwise jQuery tries to select an element that has boss ID and az class name.
$(document).ready(function () {
$('#ads_site').change(function () {
if ( this.value === 'boss.az' ) {
$("#boss\\.az").show();
// in case that you want to hide the other element
// $("#jobsearch\\.az").hide();
}
else if ( this.value === 'jobsearch.az' ) {
$("#jobsearch\\.az").show();
}
});
});

Stopping action if requirements are not met

I want to check the validation of two text boxs if either one is empty. It showed show an error as an innerHTML and if they are both filled in. It will then continue to action. Here is my code:
function go()
{
var toCheck = document.getElementById('myAnchor');
if (toCheck != '') {
return true;
}
else
{
document.getElementById('myAnchor').innerHTML = 'Fred Flinstone';
}
}
this does set the innerHTML but still continues with the action. How can I stop it from continuing?
Thank you!

You should check the value of text box,
Change the code to
function go()
{
var toCheck = document.getElementById('myAnchor').value;
if (toCheck != '') {
return true;
}
else
{
document.getElementById('myAnchor').innerHTML = 'Fred Flinstone';
}
}

add the onsubmit on the form:
<form onsubmit="return true;">
...
</form>
if the return is false it will stop from submitting an opposite scenario if it's true. you could also call your functions on that attribute and do the same thing then if it doesn't fit the condition it will stop from submitting your form and do the other process you desire to happen.

Textfields use the value attribute.
document.getElementById('myAnchor').value = 'Fred Flinstone';
An empty textfield would have a value of "".
function go()
{
var toCheck = document.getElementById('myAnchor');
if (toCheck.value != "") {
return true;
}
else
{
toCheck.value = 'Fred Flinstone';
}
}
Here's a working example.
<!DOCTYPE html>
<html>
<body>
<form name="form" action="data.php">
<label style="float:left">
<font face="Comic Sans MS">* username &nbsp
</label></font>
<input type="text" id='textfield' name="name" size="40" style="float: left;">
<label id='myAnchor' style="display: inline; padding-left: 20px;"></label> <br/> <br/>
<label style="float:left"><font face="Comic Sans MS">* password &nbsp</label></font>
<input type="text" name="pwd" size="40" style="float: left;">
<label id="myAnchor2" style="display: inline; padding-left: 20px;">
</label> <br/> </p> <input type="button" value="LogIn" onClick="return go();"> </form>
</body>
<script>
function go()
{
var toCheck = document.getElementById('textfield');
if (toCheck.value != "") {
return true;
}
else
{
toCheck.value = 'Fred Flinstone';
}
}
</script>
</html>

In your question you said that
I want to check the validation of two text boxs
In that case you should be checking the value of textboxes, not the myAnchor.
I would change your html code like this:
<input type="text" name="name" id="name" size="40" style="float: left;">
<input type="text" name="pwd" id="pwd" size="40" style="float: left;">
<input type="submit" value="LogIn" onSubmit="go();">
adding id to the input boxes
then change the onClick event to onSubmit. that way you can perform javascript validation in the function, then submit the form if all goes well, otherwise display the error.
Then your script will be like...
function go() {
var name = document.getElementById('name').value,
pwd = document.getElementById('pwd').value;
if (name != '' && pwd != '') {
document.forms["form"].submit();
}
else {
document.getElementById('myAnchor').innerHTML = 'Fred Flinstone';
}
}