Problem:
I’m reworking an HTML form to conditionally display further subsets of questions after a “parent” box is checked. The way I have it now works fine but is there an easier way to do this so you don’t have to rewrite the function for each “design of poster,” as it were in this example. Some way to write it (maybe with jQuery) where it isn’t specifically targeting one ID?
I apologize if the code is messy or seems inexperienced – it is. I’m sure there are frameworks that would make this much easier, but I’m a little nervous to step outside of Vanilla JS, as I’m sort of plopping this into an existing site where I’m not sure what frameworks are being used.
And the random use of the <table> element is just because I’m reworking a former teammate’s work and haven’t converted the whole thing to <div>s yet.
//poster A
function randiPosterAShow() {
if (document.getElementById('posterA-NewStore').checked) {
document.getElementById('r-posterA-dropdown').style.display = 'block';
} else {
document.getElementById('r-posterA-dropdown').style.display = 'none';
}
}
//poster A 8.5 x 11
function randiPosterA85Show() {
if (document.getElementById('postera8511').checked) {
document.getElementById('r-posterA-85-dropdown').style.display = 'block';
} else {
document.getElementById('r-posterA-85-dropdown').style.display = 'none';
}
}
//poster A 11 x 17
function randiPosterA11Show() {
if (document.getElementById('postera1117').checked) {
document.getElementById('r-posterA-11-dropdown').style.display = 'block';
} else {
document.getElementById('r-posterA-11-dropdown').style.display = 'none';
}
}
//poster B
function randiPosterBShow() {
if (document.getElementById('posterB-SchOrders').checked) {
document.getElementById('r-posterB-dropdown').style.display = 'block';
} else {
document.getElementById('r-posterB-dropdown').style.display = 'none';
}
}
//poster B 8.5 x 11
function randiPosterB85Show() {
if (document.getElementById('posterb8511').checked) {
document.getElementById('r-posterB-85-dropdown').style.display = 'block';
} else {
document.getElementById('r-posterB-85-dropdown').style.display = 'none';
}
}
//poster B 11 x 17
function randiPosterB11Show() {
if (document.getElementById('posterb1117').checked) {
document.getElementById('r-posterB-11-dropdown').style.display = 'block';
} else {
document.getElementById('r-posterB-11-dropdown').style.display = 'none';
}
}<table>
<tr>
<td style="width: 80px;" valign="top"><span>Design:</span></td>
<td>
<!-- poster A starts here -->
<input onclick="randiPosterAShow();" autocomplete="off" id="posterA-NewStore" name="posterA-NewStore" tabindex="1" title="Poster design new store" type="checkbox" value="posterA-NewStore" />
<label for="posterA-NewStore"><span>A (New Store)</span></label>
<!-- show from here down when "A" is checked. below div should be display:none -->
<div style="margin: 5px 0 0 25px; display: none;" id="r-posterA-dropdown">Size:
<div style="display: inline-block; vertical-align: top;">
<input onclick="randiPosterA85Show();" style="margin-right: 5px !important; vertical-align: text-top;" autocomplete="off" id="postera8511" name="postera8511" tabindex="1" title="8.5 x 11" type="checkbox" value="postera8511" />
<label for="postera8511">8.5" x 11"</label>
<!-- show from here down when "A – 8.5 x 11" is checked. below div should be set to display:none -->
<div style="display: none; margin: 5px 0 5px 20px;" id="r-posterA-85-dropdown">Options:
<div style="display: inline-block; vertical-align: text-top;">
<input style="margin-right: 5px !important; vertical-align: text-top;" autocomplete="off" id="postera85qr" name="postera85qr" tabindex="1" title="8.5 x 11" type="checkbox" value="postera85qr" />
<label for="postera85qr">Add QR Code</label>
<br><input style="margin-right: 5px !important;" autocomplete="off" id="postera85sp" name="postera85sp" tabindex="1" title="8.5 x 11" type="checkbox" value="postera85sp" />
<label for="postera85sp">Include Spanish Version</label>
</div>
</div>
<div>
<input onclick="randiPosterA11Show();" style="margin-right: 5px !important; vertical-align: text-top;" autocomplete="off" id="postera1117" name="postera1117" tabindex="1" title="8.5 x 11" type="checkbox" value="postera1117" />
<label for="postera1117">11" x 17"</label>
<!-- show from here down when "A – 11 x 17" is checked. below div should be set to display:none -->
<div style="display: none; margin: 5px 0 5px 20px;" id="r-posterA-11-dropdown">Options:
<div style="display: inline-block; vertical-align: text-top;">
<input style="margin-right: 5px !important; vertical-align: text-top;" autocomplete="off" id="postera11qr" name="postera11qr" tabindex="1" title="8.5 x 11 QR Code" type="checkbox" value="postera11qr" />
<label for="postera11qr">Add QR Code</label>
<br><input style="margin-right: 5px !important;" autocomplete="off" id="postera11sp" name="postera11sp" tabindex="1" title="8.5 x 11 QR Code" type="checkbox" value="postera11sp" />
<label for="postera11sp">Include Spanish Version</label>
</div>
</div>
</div>
</div>
</div>
<!-- poster A ends here -->
<!-- poster B starts here -->
<div style="margin-top: 5px;">
<input onclick="randiPosterBShow();" autocomplete="off" id="posterB-SchOrders" name="posterB-SchOrders" tabindex="1" title="Poster design scheduled orders" type="checkbox" value="posterB-SchOrders" />
<label for="posterB-SchOrders"><span>B (Scheduled Orders)</span></label>
<!-- show from here down when "B" is checked. below div should be display:none -->
<div style="margin: 5px 0 0 25px; display: none;" id="r-posterB-dropdown">
Size:
<div style="display: inline-block; vertical-align: top;">
<input onclick="randiPosterB85Show();" style="margin-right: 5px !important; vertical-align: text-top;" autocomplete="off" id="posterb8511" name="posterb8511" tabindex="1" title="8.5 x 11" type="checkbox" value="posterb8511" />
<label for="posterb8511">8.5" x 11"</label>
<!-- show from here down when "A – 8.5 x 11" is checked. below div should be set to display:none -->
<div style="display: none; margin: 5px 0 5px 20px;" id="r-posterB-85-dropdown">Options:
<div style="display: inline-block; vertical-align: text-top;">
<input style="margin-right: 5px !important; vertical-align: text-top;" autocomplete="off" id="posterb85qr" name="posterb85qr" tabindex="1" title="8.5 x 11" type="checkbox" value="posterb85qr" />
<label for="posterb85qr">Add QR Code</label>
<br><input style="margin-right: 5px !important;" autocomplete="off" id="posterb85sp" name="posterb85sp" tabindex="1" title="8.5 x 11" type="checkbox" value="posterb85sp" />
<label for="posterb85sp">Include Spanish Version</label>
</div>
</div>
<div>
<input onclick="randiPosterB11Show();" style="margin-right: 5px !important; vertical-align: text-top;" autocomplete="off" id="posterb1117" name="posterb1117" tabindex="1" title="8.5 x 11" type="checkbox" value="posterb1117" />
<label for="posterb1117">11" x 17"</label>
<!-- show from here down when "A – 11 x 17" is checked. below div should be set to display:none -->
<div style="display: none; margin: 5px 0 5px 20px;" id="r-posterB-11-dropdown">Options:
<div style="display: inline-block; vertical-align: text-top;">
<input style="margin-right: 5px !important; vertical-align: text-top;" autocomplete="off" id="posterb11qr" name="posterb11qr" tabindex="1" title="11 x 17 QR Code" type="checkbox" value="posterb11qr" />
<label for="posterb11qr">Add QR Code</label>
<br><input style="margin-right: 5px !important;" autocomplete="off" id="posterb11sp" name="posterb11sp" tabindex="1" title="11 x 17 Spanish" type="checkbox" value="posterb11sp" />
<label for="posterb11sp">Include Spanish Version</label>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- poster B ends here -->
<div style="margin-top: 5px;">
<input autocomplete="off" id="posterC-Topic" name="posterC-Topic" tabindex="1" title="Poster design topic" type="checkbox" value="posterC-Topic" />
<label for="posterC-Topic"><span>C (Placeholder Topic)</span></label>
</div>
</td>
</tr>
</table>Solution:
Make one function, as well name things consistently
- Make one function to handle the show/hiding of something
- Pass a parameter into the function, so you can re-use the function for many elements
- To make this work, you’ll have to make sure you name all of your elements consistently (which is a good practice anyways)
Beyond this, other things you’d want to look at are CSS classes and making your template (the HTML) more efficient by generating it programmatically; there’s many approaches to all this.
Sample function:
function togglePoster(poster) {
if (document.getElementById('checkbox-poster-'+poster).checked) {
document.getElementById('dropdown-poster-'+poster).style.display = 'block';
} else {
document.getElementById('dropdown-poster-'+poster).style.display = 'none';
}
}
Another way to write this function, a bit more elegant:
function togglePoster(poster) {
let dropdown = document.getElementById('dropdown-poster-'+poster)
let checked = document.getElementById('checkbox-poster-'+poster).checked
dropdown.style.display = checked ? 'block' : 'none'
}
Then call it like this:
onclick="togglePoster('somePosterName');"
Make sure you name your checkboxes consistently, with a prepend like ‘checkbox-poster-‘, like so:
<input id="checkbox-poster-somePoster1" ...
<input id="checkbox-poster-somePoster2" ...
<input id="checkbox-poster-somePoster3" ...
Apply the same naming logic to the other elements.
