Member Avatar for HunainHafeez

I have made a sign up form which asks user to enter his personal + Academic details and EMPLOYMENT INFO, i am done with personal and academic details section and also designed EMPLOYER INFO section but as u know that it isn't necessary that every person would have employment experience so i provided an option with YES | NO..... so i want that if user click on YES then EMPLOYMENT INFO section appears and if no, then disappears. i have kept employment info within <DIV></DIV>,

e.g

have a look at employment section

  • 2 Contributors
  • 2 Replies
  • 111 Views
  • 1 Hour Discussion Span
  • Latest Post Latest Post by HunainHafeez

Dani AI

Generated

Short note on the approach already shown by (server-side visibility) and (page looks OK): server-side toggling works in ASP.NET but causes a full postback and feels slower. A small client-side enhancement gives an instant, accessible experience while keeping the server-side check as the authoritative validation.

Use a semantic control (radio group for Yes/No or a single checkbox) and toggle the employment DIV on the client. When hiding the section, disable its inputs (so they are not submitted) and remove required constraints; when showing, re-enable them. Also update aria-hidden so assistive tech knows the state, and ensure the server renders the initial state correctly for users without JavaScript.

Example client-side pattern:

/* expects radios named "hasEmployment" and a container with id "employmentSection" */
function toggleEmployment() {
  var section = document.getElementById('employmentSection');
  var radios = document.getElementsByName('hasEmployment');
  var has = false;
  for (var i = 0; i < radios.length; i++) {
    if (radios[i].checked && radios[i].value === 'yes') { has = true; break; }
  }
  section.classList.toggle('hidden', !has);
  section.setAttribute('aria-hidden', String(!has));
  var inputs = section.querySelectorAll('input, select, textarea');
  for (var j = 0; j < inputs.length; j++) {
    inputs[j].disabled = !has;
    if (!has) inputs[j].removeAttribute('required');
  }
}
document.addEventListener('DOMContentLoaded', function () {
  var controls = document.getElementsByName('hasEmployment');
  for (var k = 0; k < controls.length; k++) controls[k].addEventListener('change', toggleEmployment);
  toggleEmployment();
});

Server-side notes: always re-check the "has employment" value on submit and validate/ignore employment fields as appropriate. For accessibility details and attributes, see MDN on aria-hidden and form control disabled/required:

This pattern preserves accessibility, avoids unnecessary postbacks, and keeps server-side validation as the final authority.

Recommended Answers

All 2 Replies

Member Avatar for lps

I don't see any problem exist on the page.

Member Avatar for HunainHafeez

@Ips i have solved it
like this

<div id="empinfodiv" runat=server>

then like this

if (checkboxemployeement.checked)
{
empinfodiv.visible=true;

}
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.