We Keep Coding

Confusion with hiding some input fields using JS vanilla

I want to show hidden input fields when check "Buy on company" checkbox. It works, but if I uncheck it leaving "Is VAT exemt" checked and return: "VAT ID field" is shown with "Is VAT exemt" checkbox checked. So I want to avoid this situation.
Picture of situation:
document.getElementById('billing_company').style['display'] = 'none';
document.getElementById('billing_company_code').style['display'] = 'none';
document.getElementById('is_vat_exempt').style['display'] = 'none';
document.getElementById('is_vat_exempt_field').style['display'] = 'none';
document.getElementById('billing_vat_id').style['display'] = 'none';
document.getElementById('buy_on_company').onclick = function() {
if (this.checked) {
document.getElementById('billing_company').style['display'] = 'block';
document.getElementById('billing_company_code').style['display'] = 'block';
document.getElementById('is_vat_exempt').style['display'] = 'block';
document.getElementById('is_vat_exempt_field').style['display'] = 'block';
document.getElementById('billing_vat_id').style['display'] = 'block';
} else {
document.getElementById('billing_company').style['display'] = 'none';
document.getElementById('billing_company_code').style['display'] = 'none';
document.getElementById('is_vat_exempt').style['display'] = 'none';
document.getElementById('is_vat_exempt_field').style['display'] = 'none';
document.getElementById('billing_vat_id').style['display'] = 'none';
}
};
document.getElementById('is_vat_exempt').onclick = function() {
if (this.checked) {
document.getElementById('billing_vat_id').style['display'] = 'none';
} else {
document.getElementById('billing_vat_id').style['display'] = 'block';
}
};
<div id="buy_on_company_field">
<input type="checkbox" id="buy_on_company"><label>Buy on company</label>
</div>
<div id="billing_company_field">
<input type="text" id="billing_company" placeholder="Company name" style="display: block;">
</div>
<div id="billing_company_code_field">
<input type="text" id="billing_company_code" placeholder="Company code" style="display: block;">
</div>
<div id="is_vat_exempt_field">
<input type="checkbox" id="is_vat_exempt"><label>Is VAT exempt</label>
</div>
<div id="billing_vat_id_field">
<input type="text" id="billing_vat_id" placeholder="VAT ID field" style="display: block;">
</div>

The code for clicking on buy_on_company is always hiding or showing the billing_vat_id field. It needs to test that checkbox.
document.getElementById('billing_company').style['display'] = 'none';
document.getElementById('billing_company_code').style['display'] = 'none';
document.getElementById('is_vat_exempt').style['display'] = 'none';
document.getElementById('is_vat_exempt_field').style['display'] = 'none';
document.getElementById('billing_vat_id').style['display'] = 'none';
document.getElementById('buy_on_company').onclick = function() {
if (this.checked) {
document.getElementById('billing_company').style['display'] = 'block';
document.getElementById('billing_company_code').style['display'] = 'block';
document.getElementById('is_vat_exempt').style['display'] = 'block';
document.getElementById('is_vat_exempt_field').style['display'] = 'block';
if (document.getElementById('is_vat_exempt').checked) {
document.getElementById('billing_vat_id').style['display'] = 'none';
} else {
document.getElementById('billing_vat_id').style['display'] = 'block';
}
} else {
document.getElementById('billing_company').style['display'] = 'none';
document.getElementById('billing_company_code').style['display'] = 'none';
document.getElementById('is_vat_exempt').style['display'] = 'none';
document.getElementById('is_vat_exempt_field').style['display'] = 'none';
document.getElementById('billing_vat_id').style['display'] = 'none';
}
};
document.getElementById('is_vat_exempt').onclick = function() {
if (this.checked) {
document.getElementById('billing_vat_id').style['display'] = 'none';
} else {
document.getElementById('billing_vat_id').style['display'] = 'block';
}
};
<div id="buy_on_company_field">
<input type="checkbox" id="buy_on_company"><label>Buy on company</label>
</div>
<div id="billing_company_field">
<input type="text" id="billing_company" placeholder="Company name" style="display: block;">
</div>
<div id="billing_company_code_field">
<input type="text" id="billing_company_code" placeholder="Company code" style="display: block;">
</div>
<div id="is_vat_exempt_field">
<input type="checkbox" id="is_vat_exempt"><label>Is VAT exempt</label>
</div>
<div id="billing_vat_id_field">
<input type="text" id="billing_vat_id" placeholder="VAT ID field" style="display: block;">
</div>

One line was missing, to hide "billing_vat_id" in second 'else' statement.
document.getElementById('billing_vat_id').style['display'] = 'none';
https://i.imgur.com/QRpD12r.png

Javascript Checkbox Display Error

I am using javascript to check if a checkbox is ticked or not. There are 3 checkboxes and only one can be selected at a time. I am using the following code which works fine, when I uncheck a box and check another the div displays correctly but if I select one then select another e.g have selected checkbox1 and select checkbox2 the "testing" div still appears and the "video" div does not appear. I am guessing this is just something really simple but I can't work it out
HTML
<div class="row">
<div class="col-25">
<label for="lname">Type</label>
</div>
<div class="col-75" style="font-size:17px; padding-top:1%;">
<div id="margin" style="margin-right:4%">Image: <input type="checkbox" id="myCheck1" class="check" onclick="myFunction()" name="image"></div><div id="margin" style="margin-right:4%">Video: <input type="checkbox" id="myCheck2" class="check" onclick="myFunction()" name="video"></div><div id="margin" style="margin-right:4%">HTML<a style="color:red">(not currently in use)</a>: <input type="checkbox" id="myCheck3" class="check" onclick="myFunction()" name="html"></div>
</div>
</div>
Javascript
<script>
function checkFunction() {
var checkBox = document.getElementById("myCheck1");
var text = document.getElementById("testing");
var checkBox2 = document.getElementById("myCheck2");
var text2 = document.getElementById("video");
var checkBox3 = document.getElementById("myCheck3");
var text3 = document.getElementById("html");
if (checkBox.checked == true){
text.style.display = "block";
text2.style.display = "none";
text3.style.display = "none";
} else {
text.style.display = "none";
if (checkBox2.checked == true){
text2.style.display = "block";
text.style.display = "none";
text3.style.display = "none";
} else {
text2.style.display = "none";
if (checkBox3.checked == true){
text3.style.display = "block";
text2.style.display = "none";
text.style.display = "none";
} else {
text3.style.display = "none";
text.style.display = "none";
text2.style.display = "none";
}
}
}
}
</script>
</script>
<script type="text/javascript">
$('.check').on('change', function() {
$('.check').not(this).prop('checked', false)
});
</script>

as some people answered you, you should definitely try using some radio buttons instead of checkboxes avoiding completely the need for extra code controlling basic functionality

Check this Out
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<link href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css"/>
<script>
$(document).ready(function(){
$('input.check').on('change', function() {
if($('input.check').is(':checked'))
{
$('input.check').not(this).prop('checked', false);
$('input.check').not(this).parent('div').css('display', 'none');
}
else{
$('input.check').parent('div').css('display', '')
}
})
})
</script>
<body>
<div class="row">
<div class="col-25">
<label for="lname">Type</label>
</div>
<div class="col-75" style="font-size:17px; padding-top:1%;">
<div id="margin" style="margin-right:4%">Image: <input type="checkbox" id="myCheck1" class="check" name="image"></div><div id="margin" style="margin-right:4%">Video: <input type="checkbox" id="myCheck2" class="check" name="video"></div><div id="margin" style="margin-right:4%">HTML<a style="color:red">(not currently in use)</a>: <input type="checkbox" id="myCheck3" class="check" name="html"></div>
</div>
</div>
</body>
</html>

Found an easy way to fix this, other examples sometimes did not work and you would have to click twice, this works perfect.
<script type="text/javascript">
$('.check').on('change', function() {
var text = document.getElementById("testing");
var text2 = document.getElementById("video");
$('.check').not(this).prop('checked', false)
var res = $(this).val();
console.log("res is: " + res);
if (res == '1') {
text.style.display = "block";
text2.style.display = "none";
}
else {
text.style.display = "none";
text2.style.display = "block";
}
});
</script>

Javascript show div does not work when I press button

I have this simple code, and i can't understand why it is not working.
<div>
<input type="button" class="button" value="Add A Site" onclick="Div();" />
</div>
<script type="text/javascript">
function Div() {
var E = document.getElementsByClassName('Form');
if (E.style.display == 'none') {
E.style.display = 'block';
this.value = "Close";
} else {
S.style.display = 'none';
this.value = "Add A Site";
}
}
</script>
<div class="Form" style="display:none;">
<h1>Example</h1>
</div>

user Form which you are trying to access is inside div.form so you have to access that like below....I tested this, its working. the content in Form is displaying
<input type="button" class="button" value="Add A Site" onclick="Div();" />
<script type="text/javascript">
function Div() {
var E= document.getElementsByClassName('Form')[0];
if (E.style.display=='none'){
E.style.display='block';
this.value="Close";
}else {
S.style.display='none';
this.value="Add A Site";
}
}
</script>
<div class="Form" style="display:none;">
<h1>Example</h1></div>

<script>
function Div() {
var E = document.getElementsByClassName('Form')[0];
if (E.style.display==='none') {
E.style.display='block';
this.value=Close;
} else {
E.style.display = 'none';
this.value = 'Add A Site';
}
}
</script>
<input type="button" class="button" value="Add A Site" onclick="Div()" />
<div class="Form" style="display:none;">
<h1>Example</h1>
</div>
This should work for you.

Combine 3 functions into one in javascript

I tried to combine these 3 functions into one, but after I did that, it won`t work.
can you help me combine those?
function showForm(id, name) {
document.getElementById('submitForm').style.display = "block";
if (id == 0) {
document.getElementById('submitForm').style.display = "none";
} else {
document.getElementById(i).style.display = 'block';
}
}
function TestForm(id, name) {
document.getElementById('TestFormSubmit').style.display = "block";
if (id == 0) {
document.getElementById('TestFormSubmit').style.display = "none";
} else {
document.getElementById(i).style.display = 'block';
}
}
function FormOne(id, name) {
document.getElementById('FormOneSubmit').style.display = "block";
if (id == 0) {
document.getElementById('FormOneSubmit').style.display = "none";
} else {
document.getElementById(i).style.display = 'block';
}
}
If it needed, this is HTML, I use JSFiddle, after run it, choose form on right side, then it will shows "download form" but I don`t know how to do that.
<form name="forms" class="form1" id="first">
<br />
<p style="text-align: left;" class="form1">Choosing to Make A Difference</p>
<select id="dropdownMenu" name="budget" onchange="javascript: showForm(document.getElementById('dropdownMenu').value);">
<option value="0"></option>
<option value="#">Change Form</option>
<option value="#">Scholarships and Grants</option>
</select>
<br />
<br />
<div id="submitForm" style="display: none; position:absolute; margin-top:-20px;">
<input type="button" id="submit" value="Download Form" onclick="window.open(forms.budget.value,'newtab'+forms.budget.value)" />
</div>
<br />
</form>
<form name="forms" class="form1" id="second">
<br />
<p style="text-align: left;" class="form1">Choosing to Make A Difference</p>
<select id="TestFormDropdown" name="budget" onchange="javascript: TestForm(document.getElementById('TestFormDropdown').value);">
<option value="0"></option>
<option value="#">Change Form</option>
<option value="#">Scholarships and Grants</option>
</select>
<br />
<br />
<div id="TestFormSubmit" style="display: none; position:absolute; margin-top:-20px;">
<input type="button" id="submit" value="Download Form" onclick="window.open(forms.budget.value,'newtab'+forms.budget.value)" />
</div>
<br />
</form>
<form name="forms" class="form1" id="second">
<br />
<p style="text-align: left;" class="form1">Choosing to Make A Difference</p>
<select id="FormOneDropdown" name="budget" onchange="javascript: FormOne(document.getElementById('FormOneDropdown').value);">
<option value="0"></option>
<option value="#">Change Form</option>
<option value="#">Scholarships and Grants</option>
</select>
<br />
<br />
<div id="FormOneSubmit" style="display: none; position:absolute; margin-top:-20px;">
<input type="button" id="submit" value="Download Form" onclick="window.open(forms.budget.value,'newtab'+forms.budget.value)" />
</div>
<br />
</form>

Try This :
function showForm (id, name) {
document.getElementById('submitForm').style.display = "block";
if (id == 0)
document.getElementById('submitForm').style.display = "none";
else
document.getElementById(i).style.display = 'block';
}
JavaScript statements can be grouped together in code blocks, inside curly brackets {...}.

Could you try this one?
var functionCollections = {
showForm : function(id, name) {
document.getElementById('submitForm').style.display = "block";
if (id == 0) {
document.getElementById('submitForm').style.display = "none";
} else {
document.getElementById(i).style.display = 'block';
}
},
TestForm : function(id, name) {
document.getElementById('TestFormSubmit').style.display = "block";
if (id == 0) {
document.getElementById('TestFormSubmit').style.display = "none";
} else {
document.getElementById(i).style.display = 'block';
}
},
FormOne : function(id, name) {
document.getElementById('FormOneSubmit').style.display = "block";
if (id == 0) {
document.getElementById('FormOneSubmit').style.display = "none";
} else {
document.getElementById(i).style.display = 'block';
}
}
};
and on the html instead using showForm(id, name); use functionCollections.showForm(id, name);

Getting divs to close if another one opens with Javascript

Basically I have signup and signin and I they're both divs which appear and disappear on the click of a link but I wish for one to close if the other is clicked and then opened.
Example:
signin area is open and signup button is clicked. I wish for signin area to disappear and for the signup content to be revealed.
Current Code:
<script language="javascript">
function toggle() {
var ele = document.getElementById("signin");
var text = document.getElementById("signtext");
var ele2 = document.getElementById("signup");
var text2 = document.getElementById("signuptext");
if(ele.style.display == "block") {
ele.style.display = "none";
text.innerHTML = "show";
ele2.style.display = "block";
text2.innerHTML = "hide";
}
else {
ele.style.display = "block";
text.innerHTML = "hide";
ele2.style.display = "block";
text2.innerHTML = "hide";
}
}
function toggle2() {
var ele2 = document.getElementById("signup");
var text2 = document.getElementById("signuptext");
var ele = document.getElementById("signin");
var text = document.getElementById("signtext");
if(ele2.style.display == "block") {
ele2.style.display = "none";
text2.innerHTML = "show";
ele.style.display = "block";
text.innerHTML = "hide";
}
else {
ele2.style.display = "block";
text2.innerHTML = "hide";
ele.style.display = "block";
text.innerHTML = "hide";
}
}
</script>
Html :
<div id="signin" style="display: none">
<form action="loginscript.php" method="post">
<p>Username:<input type="text" id="username"></p>
<p>Password:<input type="password" id="password"> <input type="submit" value="submit"></p>
</form>
</div>
<div id="signup" style="display: none">
<h1>peek-a-boo</h1>
</div>

Try this.There is no need of creating two different functions.Lesser the number of functions=Better the code + smarter is the coder!!!!
function toggle(id){
switch(id)
{
case 'signin':
document.getElementById('signin').style.display='block';
document.getElementById('signup').style.display='none';
break;
case 'signup':
document.getElementById('signup').style.display='block';
document.getElementById('signin').style.display='none';
break;
}
HTML
<div id="signin" onclick="toggle(this.id)"> SignIN</div>
<div id="signup" onclick="toggle(this.id)"> SignUp</div>

You can invoke a function on "onclick" event and hide the div using CSS:Visibility property
<a id="myLink" href="#" onclick="MyFunction();">link text</a>

Try this one:
function signUpIn(objId) {
document.getElementById('signin').style.display = 'none';
document.getElementById('signup').style.display = 'none';
document.getElementById(objId).style.display = 'block';
}
Your html changes:
<div id="signin" style="display: block">
</div>
<div id="signup" style="display: none">
</div>
Sign Up
Sign In
Check if it works for you.

Try to grab concept from this, may not be a perfect, but still contain some learning part -
Check this working Fiddle - http://jsfiddle.net/j7LDD/
Working Code -
HTML PART -
<form id="signup" method="get" style="display:none;">
<label>SignUp Name</label>
<input type="text" name="signupname" />
<input type="submit" name="signupsubmit" value="signup" />
</form>
<form id="signin" method="get" style="display:none;">
<label>SignIn Name</label>
<input type="text" name="signinname" />
<input type="submit" name="signinsubmit" value="signin" />
</form>
<button id="signupbutton" onclick="toggle(this.id);">SignUp</button>
<button id="signinbutton" onclick="toggle(this.id);">SignIn</button>
JS PART -
<script>
function toggle( val ) {
if( "signupbutton" == val ) {
document.getElementById("signup").style.display = 'block';
document.getElementById("signin").style.display = 'none';
}
else {
document.getElementById("signin").style.display = 'block';
document.getElementById("signup").style.display = 'none';
}
}
</script>