Member Avatar for sha1023012

Hello everyone.
I am kinda getting confused here. I need to have a checkbox and when the checkbox is checked i need to show two labels and controls so that the user can enter the salary and title of the employee.Then when the checkbox is unchecked, hide the two sets of controls. Now would that be better to use in a group or not. I know how to hide and show forms but I am getting confused with this. Can someone please explain to me so I can understand it Thanks.

  • 3 Contributors
  • 2 Replies
  • 136 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by dwarvenassassin

Dani AI

Generated

Two simple, reliable options: put the two fields in a single container (a fieldset or div) and toggle that group on the checkbox, or keep the fields visible but make them inactive. Both are valid — points out you can control rendering from the server side, and ’s suggestion to leave the controls visible but non-interactive is a fine UX choice when you want context to remain on-screen. The example below shows a small, accessible client-side pattern that covers both behavior and the common gotchas.

<input type="checkbox" id="isEmployee" aria-controls="employeeFields" aria-expanded="false">
<label for="isEmployee">Is employee</label>

<fieldset id="employeeFields" class="hidden" aria-hidden="true">
  <legend>Employee details</legend>
  <label for="title">Title</label>
  <input id="title" name="title" type="text">
  <label for="salary">Salary</label>
  <input id="salary" name="salary" type="number">
</fieldset>

<style>
.hidden { display: none; }
</style>
var cb = document.getElementById('isEmployee');
var group = document.getElementById('employeeFields');

cb.addEventListener('change', function () {
  var show = cb.checked;
  group.style.display = show ? '' : 'none';
  group.setAttribute('aria-hidden', !show);
  cb.setAttribute('aria-expanded', show);
  // disable inputs when hidden so they don't participate in submission/validation
  Array.prototype.forEach.call(group.querySelectorAll('input,select,textarea'), function (el) {
    el.disabled = !show;
  });
  if (show) group.querySelector('input') && group.querySelector('input').focus();
});

Notes and cautions: use fieldset + legend for semantic grouping; toggle required or other validation attributes in sync with visibility; disabled form controls are not submitted, so if you need their values preserved for the server, store them elsewhere or re-enable before submit. Always keep server-side validation/fallback — never assume client script runs.

Recommended Answers

All 2 Replies

Member Avatar for ddanbe

Label and TextBox controls both have a Visible property that can be set to true or false.

Member Avatar for dwarvenassassin

personally, I'd rather use the Enabled property and leave them visible.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.