Confusion with hiding some input fields using JS vanilla

Confusion with hiding some input fields using JS vanilla - javascript

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

Related

how to condition if two onclick function is being called

How to show or display if the Monthly() and Annual() functions are being invoked?
Wanted to display:
<input style="display:none;" id="payment_950" type="text"
name="payment_amount" placeholder="₱750 + ₱200 = ₱950.00"
class="form-control" readonly>
Code :
//show and hide payment subscription
function Monthly() {
var x = document.getElementById("payment_750");
var y = document.getElementById("payment_200");
var z = document.getElementById("payment_950");
if (x.style.display === "none") {
x.style.display = "block";
y.style.display = "none";
z.style.display = "none";
} else {
x.style.display = "none";
y.style.display = "none";
z.style.display = "none";
}
}
//show and hide payment subscription
function Annual() {
var x = document.getElementById("payment_750");
var y = document.getElementById("payment_200");
var z = document.getElementById("payment_950");
if (y.style.display === "none") {
x.style.display = "none";
y.style.display = "block";
z.style.display = "none";
} else {
x.style.display = "none";
y.style.display = "none";
z.style.display = "none";
}
}
<input onclick="Monthly()" value="Monthly Subscription" id="monthly" name="payment_description" type="checkbox">
<span class="checkmark"></span>
<input onclick="Annual()" value="Annual Membership" id="annual" name="payment_description" type="checkbox">
<span class="checkmark"></span>
<input style="display:none;" id="payment_750" type="text" name="payment_amount" placeholder="₱750.00" class="form-control" readonly>
<input style="display:none;" id="payment_200" type="text" name="payment_amount" placeholder="₱200.00" class="form-control" readonly>
<input style="display:none;" id="payment_950" type="text" name="payment_amount" placeholder="₱750 + ₱200 = ₱950.00" class="form-control" readonly>

Try this :
var x = document.getElementById("payment_750");
var y = document.getElementById("payment_200");
var z = document.getElementById("payment_950");
var monthly = document.querySelector('#monthly');
var annual = document.querySelector('#annual');
//show and hide payment subscription
function Monthly() {
let bothChecked = check();
if (!bothChecked) {
if (x.style.display === "none")
x.style.display = "block";
else
x.style.display = "none";
}
}
//show and hide payment subscription
function Annual() {
let bothChecked = check();
if (!bothChecked) {
if (y.style.display === "none")
y.style.display = "block";
else
y.style.display = "none";
}
}
function check() {
if (monthly.checked && annual.checked) {
x.style.display = "none";
y.style.display = "none";
z.style.display = "block";
return true;
}
z.style.display = "none";
return false;
}
<input onclick="Monthly()" value="Monthly Subscription" id="monthly" name="payment_description" type="checkbox">
<span class="checkmark">Monthly</span>
<br/>
<input onclick="Annual()" value="Annual Membership" id="annual" name="payment_description" type="checkbox">
<span class="checkmark">Annual</span>
<input style="display:none;" id="payment_750" type="text" name="payment_amount" placeholder="₱750.00" class="form-control" readonly>
<input style="display:none;" id="payment_200" type="text" name="payment_amount" placeholder="₱200.00" class="form-control" readonly>
<input style="display:none;" id="payment_950" type="text" name="payment_amount" placeholder="₱750 + ₱200 = ₱950.00" class="form-control" readonly>

How to format the Body of a Mailto Message

I am attempting to clean up the email output in this Mailto form so that it is more easily readable. To do so I would like be able to pass the header fields into the email and format the output for easier reading.
This is my first attempt at creating an HTML based form. I have it created so that the fields work they way I would like them to in the form itself but the mailto output is still very messy.
<!DOCTYPE html>
<html>
<body>
<form name= "ReportRequest" action="mailto:cbostic#entirafamilyclinics.com?subject=Report Request" method="post" enctype="text/plain">
<Label><h1>Report Request Form</h1></Label>
<br>
<Label><h2>Requestor Information:</h2></Label>
<br>
Date Requested: <input type="date" name="Date Requested:">
<br>
Email Address: <input type = "text" name = "Email Address:">
<br>
<script>
// Put this script in header or above select element
function check(elem) {
// use one of possible conditions
if (elem.value == 'Adjust Current Report')
//if (elem.selectedIndex == 1)
{
document.getElementById("other-div").style.display = 'block';
document.getElementById("other-div2").style.display = 'block';
document.getElementById("other-div3").style.display = 'block';
document.getElementById("fre").style.display = 'none';
document.getElementById("ques").style.display = 'none';
document.getElementById("use").style.display = 'none';
document.getElementById("rec").style.display = 'none';
document.getElementById("format").style.display = 'none';
document.getElementById("patdet").style.display = 'none';
document.getElementById("excl").style.display = 'none';
document.getElementById("clinic").style.display = 'none';
document.getElementById("provider").style.display = 'none';
document.getElementById("age").style.display = 'none';
document.getElementById("daterange").style.display = 'none';
document.getElementById("diag").style.display = 'none';
document.getElementById("cptcode").style.display = 'none';
document.getElementById("visit").style.display = 'none';
document.getElementById("enc").style.display = 'none';
document.getElementById("gender").style.display = 'none';
document.getElementById("reptyp").style.display = 'none';
document.getElementById("rephead").style.display = 'none';
document.getElementById("critq").style.display = 'none';
document.getElementById("gen1").style.display = 'none';
document.getElementById("gen2").style.display = 'none';
document.getElementById("gen3").style.display = 'none';
document.getElementById("gen4").style.display = 'none';
document.getElementById("gen5").style.display = 'none';
document.getElementById("fin1").style.display = 'none';
document.getElementById("fin2").style.display = 'none';
document.getElementById("fin3").style.display = 'none';
document.getElementById("fin4").style.display = 'none';
document.getElementById("fin5").style.display = 'none';
document.getElementById("fin6").style.display = 'none';
document.getElementById("fin7").style.display = 'none';
document.getElementById("fin8").style.display = 'none';
document.getElementById("fin9").style.display = 'none';
document.getElementById("fin10").style.display = 'none';
document.getElementById("med1").style.display = 'none';
document.getElementById("med2").style.display = 'none';
document.getElementById("med3").style.display = 'none';
document.getElementById("med4").style.display = 'none';
document.getElementById("med5").style.display = 'none';
document.getElementById("med6").style.display = 'none';
document.getElementById("med7").style.display = 'none';
} else
if (elem.value == 'Create New Report')
{
document.getElementById("other-div").style.display = 'none';
document.getElementById("other-div2").style.display = 'none';
document.getElementById("other-div3").style.display = 'none';
document.getElementById("fre").style.display = 'block';
document.getElementById("ques").style.display = 'block';
document.getElementById("use").style.display = 'block';
document.getElementById("rec").style.display = 'block';
document.getElementById("format").style.display = 'block';
document.getElementById("patdet").style.display = 'block';
document.getElementById("excl").style.display = 'block';
document.getElementById("clinic").style.display = 'block';
document.getElementById("provider").style.display = 'block';
document.getElementById("age").style.display = 'block';
document.getElementById("daterange").style.display = 'block';
document.getElementById("diag").style.display = 'block';
document.getElementById("cptcode").style.display = 'block';
document.getElementById("visit").style.display = 'block';
document.getElementById("enc").style.display = 'block';
document.getElementById("gender").style.display = 'block';
document.getElementById("reptyp").style.display = 'block';
document.getElementById("rephead").style.display = 'block';
document.getElementById("critq").style.display = 'block';
}
}
</script>
Type of Request:
<select id="RequestType" name = "Type of Request:" onchange= "check(this);">
<option value="Please Choose">Please Choose</option>
<option value="Create New Report">Create New Report</option>
<option value="Adjust Current Report">Adjust Current Report</option>
</select>
<br>
<div id="other-div" style="display:none">
Report Name: <input type = "text" name = "Report Name:">
</div>
<div id="other-div2" style="display:none">
Report Location(if known): <input type = "text" name = "Report Location:">
<br>
</div>
<div id="fre" style="display:none">
Report Frquency:
<select name = "Report Frequency:">
<option value="Daily">Daily</option>
<option value="Weekly">Weekly</option>
<option value="Monthly">Monthly</option>
<option value="One Time">One Time</option>
<option value="Other">Other</option>
</select>
<br>
</div>
Request Priority:
<select name = "Report Priority:">
<option value="Low">Low</option>
<option value="Medium">Medium</option>
<option value="High">High</option>
</select>
<br>
Deadline Date: <input type="date" name="Deadline Date:">
<br>
<Label><h2>Report Creation Questions:</h2></Label>
<br>
<div id="ques" style="display:none">
Please Describe the question(s) you are attempting to answer:
<br>
<textarea rows = "5" cols = "50" name = "Please Describe the question(s) you are attempting to answer:">
</textarea>
<br>
</div>
<div id="use" style="display:none">
How will the report be used?
<br>
<textarea rows = "5" cols = "50" name = "How will the report be used?">
</textarea>
<br>
</div>
<div id="rec" style="display:none">
Who will receive the report?
<br>
<textarea rows = "5" cols = "50" name = "Who will receive the report?">
</textarea>
<br>
</div>
<div id="format" style="display:none">
What format would you like the report in? (excel or pdf)
<select name = "What format would you like the report in? (excel or pdf):">
<option value="Select">Select</option>
<option value="excel">Excel</option>
<option value="PDF">PDF</option>
</select>
<br>
</div>
<div id="patdet" style="display:none">
Are patient details needed for this report?
<br>
<textarea rows = "5" cols = "50" name = "Are patient details needed for this report?">
</textarea>
<br>
</div>
<div id="excl" style="display:none">
Does any data need to be excluded?
<br>
<textarea rows = "5" cols = "50" name = "Does any data need to be excluded?">
</textarea>
<br>
</div>
<div id="other-div3" style="display:none;">
<label>What is being adjusted (if changing a current report)?
<br>
<textarea rows = "5" cols = "50" name = "What is being adjusted (if changing a current report)?">
</textarea>
</label>
<br>
</div>
<div id="critq" style="display:none">
<Label><h2>What Is the Criteria for the Report?</h2></Label>
<br>
<Label>(Ex: Report only needs to be run for Shoreview Clinic, patients 6 years of age and older, with a diagnosis of asthma using CPT codes 1234, 5678)</Label>
<br>
</div>
<div id="clinic" style="display:none;">
Clinics: <input type = "text" name = "Clinics:">
<br>
</div>
<div id="provider" style="display:none;">
Providers: <input type = "text" name = "Providers:">
<br>
</div>
<div id="age" style="display:none;">
Age Range: <input type = "text" name = "Age Range:">
<br>
</div>
<div id="daterange" style="display:none;">
Date Range: <input type = "text" name = "Date Range:">
<br>
</div>
<div id="diag" style="display:none;">
Diagnosis: <input type = "text" name = "Diagnosis:">
<br>
</div>
<div id="cptcode" style="display:none;">
CPT Code(s): <input type = "text" name = "CPT Code(s):">
<br>
</div>
<div id="visit" style="display:none;">
Visit Type(s): <input type = "text" name = "Visit Type(s):">
<br>
</div>
<div id="enc" style="display:none;">
Encounter Types: <input type = "text" name = "Encounter Types:">
<br>
</div>
<div id="gender" style="display:none;">
Gender: <input type = "text" name = "Gender:">
<br>
</div>
<script>
// Put this script in header or above select element
function check2(elem2) {
// use one of possible conditions
if (elem2.value == 'Select')
//if (elem.selectedIndex == 1)
{
document.getElementById("gen1").style.display = 'none';
document.getElementById("gen2").style.display = 'none';
document.getElementById("gen3").style.display = 'none';
document.getElementById("gen4").style.display = 'none';
document.getElementById("gen5").style.display = 'none';
document.getElementById("fin1").style.display = 'none';
document.getElementById("fin2").style.display = 'none';
document.getElementById("fin3").style.display = 'none';
document.getElementById("fin4").style.display = 'none';
document.getElementById("fin5").style.display = 'none';
document.getElementById("fin6").style.display = 'none';
document.getElementById("fin7").style.display = 'none';
document.getElementById("fin8").style.display = 'none';
document.getElementById("fin9").style.display = 'none';
document.getElementById("fin10").style.display = 'none';
document.getElementById("med1").style.display = 'none';
document.getElementById("med2").style.display = 'none';
document.getElementById("med3").style.display = 'none';
document.getElementById("med4").style.display = 'none';
document.getElementById("med5").style.display = 'none';
document.getElementById("med6").style.display = 'none';
document.getElementById("med7").style.display = 'none';
}else
if (elem2.value == 'general')
{
document.getElementById("gen1").style.display = 'block';
document.getElementById("gen2").style.display = 'block';
document.getElementById("gen3").style.display = 'block';
document.getElementById("gen4").style.display = 'block';
document.getElementById("gen5").style.display = 'block';
document.getElementById("fin1").style.display = 'none';
document.getElementById("fin2").style.display = 'none';
document.getElementById("fin3").style.display = 'none';
document.getElementById("fin4").style.display = 'none';
document.getElementById("fin5").style.display = 'none';
document.getElementById("fin6").style.display = 'none';
document.getElementById("fin7").style.display = 'none';
document.getElementById("fin8").style.display = 'none';
document.getElementById("fin9").style.display = 'none';
document.getElementById("fin10").style.display = 'none';
document.getElementById("med1").style.display = 'none';
document.getElementById("med2").style.display = 'none';
document.getElementById("med3").style.display = 'none';
document.getElementById("med4").style.display = 'none';
document.getElementById("med5").style.display = 'none';
document.getElementById("med6").style.display = 'none';
document.getElementById("med7").style.display = 'none';
} else
if (elem2.value == 'Financial')
{
document.getElementById("gen1").style.display = 'none';
document.getElementById("gen2").style.display = 'none';
document.getElementById("gen3").style.display = 'none';
document.getElementById("gen4").style.display = 'none';
document.getElementById("gen5").style.display = 'none';
document.getElementById("fin1").style.display = 'block';
document.getElementById("fin2").style.display = 'block';
document.getElementById("fin3").style.display = 'block';
document.getElementById("fin4").style.display = 'block';
document.getElementById("fin5").style.display = 'block';
document.getElementById("fin6").style.display = 'block';
document.getElementById("fin7").style.display = 'block';
document.getElementById("fin8").style.display = 'block';
document.getElementById("fin9").style.display = 'block';
document.getElementById("fin10").style.display = 'block';
document.getElementById("med1").style.display = 'none';
document.getElementById("med2").style.display = 'none';
document.getElementById("med3").style.display = 'none';
document.getElementById("med4").style.display = 'none';
document.getElementById("med5").style.display = 'none';
document.getElementById("med6").style.display = 'none';
document.getElementById("med7").style.display = 'none';
} else
if (elem2.value == 'Clinical')
{
document.getElementById("gen1").style.display = 'none';
document.getElementById("gen2").style.display = 'none';
document.getElementById("gen3").style.display = 'none';
document.getElementById("gen4").style.display = 'none';
document.getElementById("gen5").style.display = 'none';
document.getElementById("fin1").style.display = 'none';
document.getElementById("fin2").style.display = 'none';
document.getElementById("fin3").style.display = 'none';
document.getElementById("fin4").style.display = 'none';
document.getElementById("fin5").style.display = 'none';
document.getElementById("fin6").style.display = 'none';
document.getElementById("fin7").style.display = 'none';
document.getElementById("fin8").style.display = 'none';
document.getElementById("fin9").style.display = 'none';
document.getElementById("fin10").style.display = 'none';
document.getElementById("med1").style.display = 'block';
document.getElementById("med2").style.display = 'block';
document.getElementById("med3").style.display = 'block';
document.getElementById("med4").style.display = 'block';
document.getElementById("med5").style.display = 'block';
document.getElementById("med6").style.display = 'block';
document.getElementById("med7").style.display = 'block';
}
}
</script>
<br>
<div id="reptyp" style="display:none">
Type of Report:
<select name = "Type of Report:" onchange= "check2(this)">
<option value="Select">Select</option>
<option value="general">General</option>
<option value="Financial">Financial/Billing</option>
<option value="Clinical">Clinical/Medical</option>
</select>
<br>
</div>
<div id="rephead" style="display:none">
<Label><h2>What Headings Do You Want Displayed on Your Report?</h2></Label>
<br>
</div>
<div id="gen1" style="display:none">
<input type = "checkbox" name = "Primary Care Provider (PCP)" value= 'X'> Primary Care Provider (PCP)
</div>
<div id="gen2" style="display:none">
<input type = "checkbox" name = "Appointment Provider" value= 'X'> Appointment Provider
</div>
<div id="gen3" style="display:none">
<input type = "checkbox" name = "Encounter Date" value= 'X'> Encounter Date
</div>
<div id="gen4" style="display:none">
<input type = "checkbox" name = "Appointment Facility" value= 'X'> Appointment Facility
</div>
<div id="gen5" style="display:none">
<input type = "checkbox" name = "Insurance details" value= 'X'> Insurance details
</div>
<br>
<div id="fin1" style="display:none">
<input type = "checkbox" name = "Claim Number" value= 'X'> Claim Number
</div>
<div id="fin2" style="display:none">
<input type = "checkbox" name = "Claim Date" value= 'X'> Claim Date
</div>
<div id="fin3" style="display:none">
<input type = "checkbox" name = "Service Date" value= 'X'> Service Date
</div>
<div id="fin4" style="display:none">
<input type = "checkbox" name = "Appointment Facility" value= 'X'> Appointment Facility
</div>
<div id="fin5" style="display:none">
<input type = "checkbox" name = "Appointment Provider" value= 'X'> Appointment Provider
</div>
<div id="fin6" style="display:none">
<input type = "checkbox" name = "ICD Codes" value= 'X'> ICD Codes
</div>
<div id="fin7" style="display:none">
<input type = "checkbox" name = "CPT/HCPCS Codes" value= 'X'> CPT/HCPCS Codes
</div>
<div id="fin8" style="display:none">
<input type = "checkbox" name = "Insurance Names" value= 'X'> Insurance Names
</div>
<div id="fin9" style="display:none">
<input type = "checkbox" name = "Billed Amount" value= 'X'> Billed Amount
</div>
<div id="fin10" style="display:none">
<input type = "checkbox" name = "Amount Paid By Insurance" value= 'X'> Amount Paid By Insurance
</div>
<br>
<div id="med1" style="display:none">
<input type = "checkbox" name = "Allergies" value= 'X'> Allergies
</div>
<div id="med2" style="display:none">
<input type = "checkbox" name = "ICD Codes" value= 'X'> ICD Codes
</div>
<div id="med3" style="display:none">
<input type = "checkbox" name = "CPT/HCPCS Codes" value= 'X'> CPT/HCPCS Codes
</div>
<div id="med4" style="display:none">
<input type = "checkbox" name = "Advanced Directives" value= 'X'> Advanced Directives
</div>
<div id="med5" style="display:none">
<input type = "checkbox" name = "Problem List" value= 'X'> Problem List
</div>
<div id="med6" style="display:none">
<input type = "checkbox" name = "Medications" value= 'X'> Medications
</div>
<div id="med7" style="display:none">
<input type = "checkbox" name = "Referrals" value= 'X'> Referrals
</div>
<br>
<Label><h2>Additional information regarding your request:</h2></Label>
<br>
<textarea rows = "5" cols = "50" name = "Additional information regarding your request:">
</textarea>
<br>
<input type="submit" value="Send">
<input type="reset" value="Reset">
</form>
</body>
</html>
I would expect a well formatted email output including the form headers that would be easily readable.

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>

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>

Registerscript (HTML and Javascript)

I'm working on a register script, but i'm stuck. I have an oppertunity to the user pay or free memberships. And when they choose "pay" the pay column becomes visible but if i after that choose "free" i see both the free and the pay column. But i only want one column be seen not both at the same time
Javascript
<script type="text/javascript">
function betal(value) {
if (value == 'show') { document.getElementById('betalversion').style.display = 'block'; }
else { document.getElementById('betalversion').style.display = 'none'; }
}
</script>
<script type="text/javascript">
function gratis(value) {
if (value == 'show') { document.getElementById('gratisversion').style.display = 'block'; }
else { document.getElementById('gratisversion').style.display = 'none'; }
}
</script>
HTML
<div class="FormGroup">
<h2 class="description">Vad skulle du vilja ha?</h2>
<label class="choice">
<input id="gratisVersion" name="field_Payment" type="radio" value="Gratis" class="required" onclick="gratis('show');">
Gratis Version</label>
<br />
<label class="choice">
<input id="betalVersion" name="field_Payment" type="radio" value="Betal" class="required" onclick="betal('show');">
Betal Version</label>
<br />
</div>
<div class="FormGroup" style="display: none" id="betalversion">
<br />
<h2 class="description">Fyll i dina uppgifter</h2>
<br>
<div class="explanation">Här är nåt</div>
<input type="text" name="paypal_address" id="Text1" size="40">
</div>
<div class="FormGroup" style="display: none" id="gratisversion">
<br />
<h2 class="description">Fyll i dina uppgifter</h2>
<br>
<label for="name">Användarnamn</label><input type="text" name="name" id="name"/>
<br />
<label for="pass">Lösenord</label><input type="password" name="pass" id="pass" onkeyup="passwordStrength(this.value)" />
<br />
<p>

<script type="text/javascript">
function betal(value) {
if (value == 'show') {
document.getElementById('betalversion').style.display = 'block';
document.getElementById('gratisversion').style.display = 'none';
}
else {
document.getElementById('betalversion').style.display = 'none';
document.getElementById('gratisversion').style.display = 'block';
}
}
</script>
<script type="text/javascript">
function gratis(value) {
if (value == 'show') {
document.getElementById('betalversion').style.display = 'none';
document.getElementById('gratisversion').style.display = 'block';
}
else {
document.getElementById('gratisversion').style.display = 'none';
document.getElementById('betalversion').style.display = 'block';
}
}
</script>

<script type="text/javascript">
var beta=document.getElementById('betalversion');
var grati=document.getElementById('gratisversion');
function betal(value) {
beta.style.display = 'none';
grati.style.display = 'none';
if (value == 'show') {
beta.style.display = 'block'; }
else { beta.style.display = 'none'; }
}
</script>
<script type="text/javascript">
function gratis(value) {
beta.style.display = 'none';
grati.style.display = 'none';
if (value == 'show') { grati.style.display = 'block'; }
else { grati.style.display = 'none'; }
}
</script>
hide both the divs on toggle

We Keep Coding

JavaScript is the programming language of the Web.

Confusion with hiding some input fields using JS vanilla - javascript

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

Related

how to condition if two onclick function is being called

How to format the Body of a Mailto Message

Javascript Checkbox Display Error

Getting divs to close if another one opens with Javascript

Registerscript (HTML and Javascript)

Categories

Resources