Show and Hide Form Sections with Radio Buttons in JavaScript

Table of Contents

Working example
Complete source
Modern notes

A radio-button group can decide which section of a form is visible. The original example switches between Contact Details and a Contact Form, with a third option to hide both. That same facility is preserved here.

demo of onclick radio button and layer

Show or Hide a Form Section Top ↑

Instead of inline onclick attributes, listen for the radio group's change event and use the native hidden attribute.

const choiceForm = document.getElementById("contact-choice");
const detailsPanel = document.getElementById("contact-details");
const formPanel = document.getElementById("contact-form");

function showPanel(panelId) {
  detailsPanel.hidden = panelId !== "contact-details";
  formPanel.hidden = panelId !== "contact-form";
}

choiceForm.addEventListener("change", (event) => {
  if (event.target.matches('input[name="type"]')) {
    showPanel(event.target.dataset.show);
  }
});

<form id="contact-choice" action="period-layerck.php" method="post">
  <fieldset>
    <legend>Choose what to display</legend>
    <label><input type="radio" name="type" value="details" data-show="contact-details"> Contact Details</label>
    <label><input type="radio" name="type" value="form" data-show="contact-form"> Contact Form</label>
    <label><input type="radio" name="type" value="hide-all" data-show="none"> Hide All</label>
  </fieldset>

  <div id="contact-details" class="contact-panel" hidden>
    <strong>Contact Details</strong><br>
    First Name:<br>Street Address:<br>City:<br>Zip:<br>State:<br>Country
  </div>

  <div id="contact-form" class="contact-panel" hidden>
    <strong>Contact Form</strong><br>
    <label>Name <input type="text" name="sname"></label><br>
    <label>Email <input type="email" name="email"></label><br>
    <label>Details<br><textarea name="dtl" rows="3" cols="25"></textarea></label><br>
    <button type="submit">Submit</button>
  </div>
</form>

.contact-panel {
  margin-top: 1rem;
  max-width: 420px;
  padding: 1rem;
  background: #f1f1f1;
  color: #000;
  border: 2px dashed #0000cc;
}
.contact-panel[hidden] { display: none; }

Complete Working Source Top ↑

The complete page is retained as one copyable source block, matching the facility of the original tutorial.

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Show and Hide Form Sections with Radio Buttons</title>
<style>
.contact-panel {
  margin-top: 1rem;
  max-width: 420px;
  padding: 1rem;
  background: #f1f1f1;
  color: #000;
  border: 2px dashed #0000cc;
}
.contact-panel[hidden] { display: none; }
</style>
</head>
<body>
<form id="contact-choice" action="period-layerck.php" method="post">
  <fieldset>
    <legend>Choose what to display</legend>
    <label><input type="radio" name="type" value="details" data-show="contact-details"> Contact Details</label>
    <label><input type="radio" name="type" value="form" data-show="contact-form"> Contact Form</label>
    <label><input type="radio" name="type" value="hide-all" data-show="none"> Hide All</label>
  </fieldset>

  <div id="contact-details" class="contact-panel" hidden>
    <strong>Contact Details</strong><br>
    First Name:<br>Street Address:<br>City:<br>Zip:<br>State:<br>Country
  </div>

  <div id="contact-form" class="contact-panel" hidden>
    <strong>Contact Form</strong><br>
    <label>Name <input type="text" name="sname"></label><br>
    <label>Email <input type="email" name="email"></label><br>
    <label>Details<br><textarea name="dtl" rows="3" cols="25"></textarea></label><br>
    <button type="submit">Submit</button>
  </div>
</form>
<script>
const choiceForm = document.getElementById("contact-choice");
const detailsPanel = document.getElementById("contact-details");
const formPanel = document.getElementById("contact-form");

function showPanel(panelId) {
  detailsPanel.hidden = panelId !== "contact-details";
  formPanel.hidden = panelId !== "contact-form";
}

choiceForm.addEventListener("change", (event) => {
  if (event.target.matches('input[name="type"]')) {
    showPanel(event.target.dataset.show);
  }
});
</script>
</body>
</html>

Why This Pattern Is Better Top ↑

hidden expresses visibility directly in HTML, while addEventListener() keeps behavior out of the markup. If the hidden content must remain visible to assistive technology, use a different visual-only CSS technique instead.

Event Handling onMouseOver and onMouseOut

Subhendu Mohapatra

Author & Instructor at plus2net

I write and maintain practical tutorials on Python, PHP, SQL, JavaScript, HTML, jQuery, and web development at plus2net. The tutorials focus on clear explanations, working examples, and code that readers can test and adapt while learning.

About the author Watch on YouTube

Connect:

Subscribe to our YouTube Channel here

Preethi	06-05-2010
when focus is on textbox,a msg will display and also perform validation using onblur

safeer	14-04-2015
Thanks these all are very good and most helpful for every body!

sanjeev sajal	17-03-2010
this so helpful me all time.