I have been struggling with my JavaScript code, searching for a solution to hide a form option (label and textbox) until a value is selected from a dropdown. Specifically, I want to hide the label and input box for "lookup" until a value is selected from the "column" dropdown. Despite my efforts, I can't figure out what the issue is.
Here is my current attempt:
function showDiv(divId, element) {
document.getElementById(divId).style.display = element.value === "" ? 'table-row' : 'none';
}
var data = {
"coh_mst": ["AUDIT_ID", "AUDIT_TimeStamp", "..."],
... // more data here
};
window.onload = function() {
var tableSel = document.getElementById("table");
var columnSel = document.getElementById("column");
var lookupSel = document.getElementById("lookup");
for (var x in data) {
tableSel.options[tableSel.options.length] = new Option(x, x);
}
table.onchange = function() {
columnSel.length = 1;
var z = data[this.value];
for (var i = 0; i < z.length; i++) {
columnSel.options[columnSel.options.length] = new Option(z[i], z[i]);
}
}
}form {
display: table;
}
p {
display: table-row;
}
label {
display: table-cell;
}
input {
display: table-cell;
}
hideMe {
display: none;
}<form action="pageToVisit">
<p>
<label for="table">Choose a table:</label>
<select name="table" id="table" required>
<option value="" selected="selected">Select a Table</option>
</select>
</p>
<br><br>
<p>
<label for="column">Column to Filter:</label>
<select name="column" id="column">
<option value="" selected="">Please Select a Table First</option>
</select>
</p>
<br><br>
<p id="hideme">
<label for="lookup">Lookup Value:</label>
<input type="text" id="lookup" name="lookup" value="" onchange="showDiv('hideMe', this)">
</p>
<br><br>
</form>Thank you in advance for any advice provided!