Member Avatar for seju

hello...help me rapidly..
query is that.. when we select the mail from the select tag and then automatically display the two text box like user name and contact no.. how i do this...? but remeber it that without use button....i hope as soon as i vl get my perfect ans...

  • 4 Contributors
  • 3 Replies
  • 236 Views
  • 4 Hours Discussion Span
  • Latest Post Latest Post by arundhati dalal

Dani AI

Generated

Short, practical improvements that build on the replies here. wanted the username and contact fields to appear as soon as a particular select option is chosen; showed the basic idea of toggling visibility and provided a demo. For a more robust solution, avoid inline handlers, use an unobtrusive change listener, toggle a single container, and also toggle the inputs' disabled state so hidden fields do not trigger HTML5 validation or get submitted accidentally. Also add minimal ARIA and move focus to the first field when it appears for better keyboard usability.

Example (HTML + plain JS):

<select id="contactMethod" aria-controls="contactFields">
  <option value="">Choose...</option>
  <option value="mail">Mail</option>
  <option value="other">Other</option>
</select>

<div id="contactFields" hidden>
  <label for="username">Username</label>
  <input id="username" name="username" type="text">

  <label for="contact">Contact</label>
  <input id="contact" name="contact" type="text">
</div>

<script>
document.addEventListener('DOMContentLoaded', function () {
  var sel = document.getElementById('contactMethod');
  var box = document.getElementById('contactFields');
  var inputs = box.querySelectorAll('input,textarea,select');

  function update() {
    var show = sel.value === 'mail';
    box.hidden = !show;
    box.setAttribute('aria-hidden', String(!show));
    Array.prototype.forEach.call(inputs, function(i){ i.disabled = !show; });
    if (show && inputs[0]) inputs[0].focus();
  }

  sel.addEventListener('change', update);
  update();
});
</script>

Troubleshooting notes: ensure your option values match exactly (no extra spaces), run the script after DOM load, and use disabled when hiding required fields to avoid validation errors. For no-JS users consider a progressive-enhancement approach (show fields by default or use a <noscript> message).

Recommended Answers

All 3 Replies

Member Avatar for mrvijayakumar

This can be done in many ways, here is the one quick solution..

<script>
function PerformAction() {
    var SelectedValue = document.Form.SelectValue.value;
    if(SelectedValue == "mail") document.getElementById("VisibleID").style.visibility="visible";
    else document.getElementById("VisibleID").style.visibility="hidden";
    return false;
}
</script>
<form action="" method="get" name="Form">
  <select onchange="PerformAction()" name="SelectValue">
    <option value=""></option>
    <option value="mail">Mail</option>
  </select>
  <div style="visibility:hidden;" id="VisibleID"> Username :
    <input name="" type="text" />
    <br/>
    Contact Number :
    <input name="" type="text" />
  </div>
</form>
Member Avatar for arundhati dalal

thnks for help me

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.