I have some partially valid html code. I'm trying to display some text input based on radio button selection. How it works for me is that when the radio button is pressed, it hides the other options, but when the screen first loads, all 3 options show up. I'm assuming it's because the function is called on click and the selected option of the first radio button does not constitute a click. I tried making an onload event listener that would only show up on the first request I made, but that didn't work. This is my code
<% layout('layouts/boilerplate') %>
<h1>New Part</h1>
<form action="/parts" method="POST" novalidate class="validated-form">
<div>
<label class="form-label" for="partnum">Part Number</label>
<input class="form-control" type="text" name="part[partnum]" id="partnum" required>
</div>
<div>
<label class="form-label" for="description">Part Description</label>
<input class="form-control" type="text" name="part[description]" id="description" required>
</div>
<div class="btn-group" role="group" aria-label="Basic radio toggle button group">
<input type="radio" class="btn-check" name="part[type]" id="btnradio1" value="Purchased" autocomplete="off" onclick="show1()" checked >
<label class="btn btn-outline-primary" for="btnradio1">Purchased</label>
<input type="radio" class="btn-check" name="part[type]" id="btnradio2" value="Assembly" autocomplete="off" onclick="show2()">
<label class="btn btn-outline-primary" for="btnradio2">Assembly</label>
<input type="radio" class="btn-check" name="part[type]" id="btnradio3" value="Machined" autocomplete="off" onclick="show3()">
<label class="btn btn-outline-primary" for="btnradio3">Machined</label>
</div>
<div>
<h1 id="test1">Test 1</h1>
</div>
<div>
<h1 id="test2" >Test 2</h1>
</div>
<div id="machined">
<h1 id="test3" >Test 3</h1>
<div>
<label class="form-label" for="material">Material</label>
<input class="form-control" type="text" name="part[material]" id="material" required>
</div>
</div>
<div><button>Add Part</button></div>
</form>
<a href="/parts">Back to your Parts</a>
<script>
function show1(){
document.getElementById('test1').style.display ='block';
document.getElementById('test2').style.display ='none';
document.getElementById('machined').style.display ='none';
}
function show2(){
document.getElementById('test1').style.display ='none';
document.getElementById('test2').style.display ='block';
document.getElementById('machined').style.display ='none';
}
function show3(){
document.getElementById('test1').style.display ='none';
document.getElementById('test2').style.display ='none';
document.getElementById('machined').style.display ='block';
}
</script> 
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Let's call each section that needs to be conditionally shown/hidden a "subform". You can add a CSS class to each subform, for example:
You can then introduce a CSS rule to hide all subforms except the one corresponding to the currently selected option. A good way to track this selection so that CSS can see it is as a data attribute on the element that contains all the options (e.g.
). Your initial value will determine which subforms are initially visible:...and corresponding styles...
/* Hide .subform1 unless it's currently selected */ .subform1 { display: none; } .subform-group[data-selection="1"] .subform1 { display: block; }To tie it all together, we can create a JS function to update the data properties. Maybe you'll have multiple sets of subforms on a page (or even within a form), so it's useful to determine which selections to update:
function show(subformGroupId, selection) { document.getElementById(subformGroupId).setAttribute("data-selection", selection); }If you need additional options, you can add additional
subformCSS classes; if you need multiple sets of subforms, you can add them, and make sure to use a class with a uniqueidSeparate HTML elements to contain all subforms.See the complete code snippet for a working example.
function show(subformGroupId, selection) { document.getElementById(subformGroupId).setAttribute("data-selection", selection); }.subform1, .subform2, .subform3, .subform4 /* add extra subforms as needed ... */ { display: none; /* Hide all forms by default */ } .subform-group[data-selection="1"] .subform1, .subform-group[data-selection="2"] .subform2, .subform-group[data-selection="3"] .subform3, .subform-group[data-selection="4"] .subform4 /* add extra subforms as needed ... */ { display: block; /* Display the form matching the selected option */ }Back to your Parts