Show or hide HTML form based on checkbox status

Question

Show or hide HTML form based on checkbox status

I have a task to show or hide a form based on the status of a checkbox in a Google web application. If the checkbox is checked, then the form should be visible; otherwise, it should be hidden. I attempted to achieve this using the code provided below, but it didn't work as expected:

if (document.getElementById("df1").checked) {
   document.getElementById("co").style.visibility = "hidden";
} else {
   document.getElementById("co").style.visibility = "visible";
}

<form id="co" style="visibility: hidden">
<br>
<label type="text">Name </label><input type="text">
<br>
<label type="text">Roll No. </label><input type="number" value="0" min="0">
<br><br>
<input type="submit" value="submit">

<input type="checkbox" id="df1">

javascript html css google-apps-script web-applications

Answer 1

Answer №1

Your checkbox is only evaluated when the page loads, causing an issue with updating its state. To fix this, you should attach an event handler to the checkbox so that the DOM can be updated as the checkbox is interacted with.

Additionally, consider simplifying the logic by using a class to toggle visibility.

Check out this working example:

const cb = document.querySelector('#df1');
const form = document.querySelector('#co');

cb.addEventListener('change', e => {
  form.classList.toggle('hidden', !e.target.checked);
});

.hidden {
  visibility: hidden;
}

<form id="co" class="hidden">
  <br>
  <label type="text">Name </label><input type="text">
  <br>
  <label type="text">Roll No. </label><input type="number" value="0" min="0">
  <br><br>
  <input type="submit" value="submit">
</form>

<input type="checkbox" id="df1">

Answer 2

Your checkbox is only evaluated when the page loads, causing an issue with updating its state. To fix this, you should attach an event handler to the checkbox so that the DOM can be updated as the checkbox is interacted with.

Additionally, consider simplifying the logic by using a class to toggle visibility.

Check out this working example:

const cb = document.querySelector('#df1');
const form = document.querySelector('#co');

cb.addEventListener('change', e => {
  form.classList.toggle('hidden', !e.target.checked);
});

.hidden {
  visibility: hidden;
}

<form id="co" class="hidden">
  <br>
  <label type="text">Name </label><input type="text">
  <br>
  <label type="text">Roll No. </label><input type="number" value="0" min="0">
  <br><br>
  <input type="submit" value="submit">
</form>

<input type="checkbox" id="df1">

Answer 3

Answer №2

Using simple HTML and CSS:

input#df1:checked ~ form#co {
    visibility: visible;
}
form#co {
    visibility: hidden;
}

<input type="checkbox" id="df1" />
<label for="df1">Show Form</label>

<form id="co">
    <br />
    <label type="text">Name </label><input type="text" />
    <br />
    <label type="text">Roll No. </label
    ><input type="number" value="0" min="0" /> <br /><br />
    <input type="submit" value="submit" />
</form>

If JavaScript is necessary:

const cb = document.getElementById("df1")
const form = document.getElementById("co")

cb.addEventListener("change", (e) => {
    if (e.target.checked) form.style.visibility = "visible"
    else form.style.visibility = "hidden"
})

<input type="checkbox" id="df1" />
<label for="df1">Show Form</label>

<form id="co" style="visibility: hidden;">
    <br />
    <label type="text">Name </label><input type="text" />
    <br />
    <label type="text">Roll No. </label
    ><input type="number" value="0" min="0" /> <br /><br />
    <input type="submit" value="submit" />
</form>

Answer 4

Using simple HTML and CSS:

input#df1:checked ~ form#co {
    visibility: visible;
}
form#co {
    visibility: hidden;
}

<input type="checkbox" id="df1" />
<label for="df1">Show Form</label>

<form id="co">
    <br />
    <label type="text">Name </label><input type="text" />
    <br />
    <label type="text">Roll No. </label
    ><input type="number" value="0" min="0" /> <br /><br />
    <input type="submit" value="submit" />
</form>

If JavaScript is necessary:

const cb = document.getElementById("df1")
const form = document.getElementById("co")

cb.addEventListener("change", (e) => {
    if (e.target.checked) form.style.visibility = "visible"
    else form.style.visibility = "hidden"
})

<input type="checkbox" id="df1" />
<label for="df1">Show Form</label>

<form id="co" style="visibility: hidden;">
    <br />
    <label type="text">Name </label><input type="text" />
    <br />
    <label type="text">Roll No. </label
    ><input type="number" value="0" min="0" /> <br /><br />
    <input type="submit" value="submit" />
</form>

Answer 5

Answer №3

Hide the form.
Reposition the checkbox outside the form.
Create a function and utilize addEventListener on the checkbox.

window.addEventListener('load', () => { // when the elements are available
  document.getElementById('df1').addEventListener('click', (e) => {
    const show = e.target.checked;
    document.getElementById("co").style.visibility = show ? 'visible' : 'hidden';
  });
});

<form id="co" style="visibility : hidden">
  <label type="text">Name </label><input type="text">
  <br>
  <label type="text">Roll No. </label><input type="number" value="0" min="0">
  <br><br>
  <input type="submit" value="submit">
</form>
<input type="checkbox" id="df1">

Utilizing hidden attribute to conserve space:

window.addEventListener('load', () => { // when the elements are available
  document.getElementById('df1').addEventListener('click', (e) => {
    document.getElementById("co").hidden = !e.target.checked;
  });
});

<form id="co" hidden>
  <label type="text">Name </label><input type="text">
  <br>
  <label type="text">Roll No. </label><input type="number" value="0" min="0">
  <br><br>
  <input type="submit" value="submit">
</form>
<input type="checkbox" id="df1">

Answer 6

Hide the form.
Reposition the checkbox outside the form.
Create a function and utilize addEventListener on the checkbox.

window.addEventListener('load', () => { // when the elements are available
  document.getElementById('df1').addEventListener('click', (e) => {
    const show = e.target.checked;
    document.getElementById("co").style.visibility = show ? 'visible' : 'hidden';
  });
});

<form id="co" style="visibility : hidden">
  <label type="text">Name </label><input type="text">
  <br>
  <label type="text">Roll No. </label><input type="number" value="0" min="0">
  <br><br>
  <input type="submit" value="submit">
</form>
<input type="checkbox" id="df1">

Utilizing hidden attribute to conserve space:

window.addEventListener('load', () => { // when the elements are available
  document.getElementById('df1').addEventListener('click', (e) => {
    document.getElementById("co").hidden = !e.target.checked;
  });
});

<form id="co" hidden>
  <label type="text">Name </label><input type="text">
  <br>
  <label type="text">Roll No. </label><input type="number" value="0" min="0">
  <br><br>
  <input type="submit" value="submit">
</form>
<input type="checkbox" id="df1">

Answer 7

Answer №4

Is this the right solution?

function toggleFormVisibility() {
  const form = document.getElementById("co");
  form.style.display = document.getElementById("df1").checked ? "block" : "none";
}

<form id="co" style="display: none">
  <br>
  <label for="name">Name</label>
  <input type="text" id="name">
  <br>
  <label for="rollNo">Roll No.</label>
  <input type="number" id="rollNo" value="0" min="0">
  <br><br>
  <input type="submit" value="submit">

</form>
 <input type="checkbox" id="df1" onclick="toggleFormVisibility()">

Answer 8

Is this the right solution?

function toggleFormVisibility() {
  const form = document.getElementById("co");
  form.style.display = document.getElementById("df1").checked ? "block" : "none";
}

<form id="co" style="display: none">
  <br>
  <label for="name">Name</label>
  <input type="text" id="name">
  <br>
  <label for="rollNo">Roll No.</label>
  <input type="number" id="rollNo" value="0" min="0">
  <br><br>
  <input type="submit" value="submit">

</form>
 <input type="checkbox" id="df1" onclick="toggleFormVisibility()">

Show or hide HTML form based on checkbox status

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Creating a custom internal link with parameters using Twig

Tips for ensuring an HTML element remains within defined boundaries

What causes the position: sticky; property to fail in React implementations?

problem of underlining links in bootstrap

Search for specific item within an array of objects

Return Date objects in Node.js, not strings

Merging a VUE project and a .NET framework project to unleash their full potential

Prevent further triggering of the .click function when the user clicks repeatedly

Tips for maintaining the dropdown selection when new rows or columns are added to a table

The AJAX functionality seems to be failing to load the additional JavaScript and CSS files

Utilize lodash to locate the key of an object with deeply duplicated values

Optimizing Three.js for better performance

The call stack reached its maximum size while attempting to send a post request in an Express application

Transformation of JSON data from Array to Object

Struggling with the functionality of having numerous jQuery UI controls on a single page. Implementing the accordion control in multiple sections

What is the best way to create a box in the shape of an octagon

Prevent page from refreshing on mobile devices using JavaScript

The hyperlink functionality is disabled because Javascript is set to return false

Can you explain the function of the * CSS operator? Are there any additional CSS operators that serve similar purposes?

Inconsistencies in JavaScript comparison across various web browsers