Hide/Show Table based off of drop down menu selection HTML - html

Question

I'm trying to hide the second table below and make it appear when customers select the debit option from the drop down menu at the top. I'm relatively new to this so any help is greatly appreciated!
<table width="723" height="75" border="2">
<tbody>
<tr>
<th width="248" scope="col"><span style="font-size: 13px">Payment
Method:</span>
<select>
<option value=""></option>
<option value="tracer ach credit">Credit</option>
<option value="tracer ach debit">Debit</option>
</select> </th>
</tr>
</tbody>
</table>
<br>
<table width="723" height="558" border="2">
<tbody>
<tr style="text-align: center; font-size: 13px;">
<td height="40" colspan="2">
</td>
</tr>
<tr>
<td height="24" valign="top"><span style="font-size: 13px">Bank
Account:</span>
</td>
<td height="26"><textarea rows="1" cols="50">
</textarea> </td>
</td>
<span style="text-align: center">
</div>
</span>
</tr>
</tbody>
</table>

Answer 1

Add id="table2" to your table and this CSS to start hidden:
#table2 {
visibility:hidden;
}
And add to your <select> the onchange="ShowHide(this)" every change in select call the ShowHide function.
With javascript add this function to turn visible the table if the option selected is debit:
function ShowHide(select){
var table2 = document.getElementById("table2");
if(select.value == "tracer ach debit"){
table2.style.visibility="visible";
}else{
table2.style.visibility="hidden";
}
}
Online example:
function ShowHide(select){
var table2 = document.getElementById("table2");
if(select.value == "tracer ach debit"){
table2.style.visibility="visible";
}else{
table2.style.visibility="hidden";
}
}
#table2 {
visibility:hidden;
}
<table width="300" height="75" border="2">
<tbody>
<tr>
<th scope="col">
<span style="font-size: 13px">Payment Method:</span>
<select id="select" onchange="ShowHide(this)">
<option value=""></option>
<option value="tracer ach credit">Credit</option>
<option value="tracer ach debit">Debit</option>
</select>
</th>
</tr>
</tbody>
</table>
<br>
<table width="300" height="300" border="2" id="table2">
<tbody>
<tr>
<td colspan="2"></td>
</tr>
<tr>
<td valign="top">
<span style="font-size: 13px">Bank Account:</span>
</td>
<td>
<textarea rows="1" cols="30"></textarea>
<span></span>
</td>
</tr>
</tbody>
</table>

Answer 2

function paymentChangeHandler(event) {
var value = event.target.value;
var bank = document.getElementById("bank_info");
if (value.indexOf('debit') !== -1) {
bank.style.visibility = "visible";
} else {
bank.style.visibility = "hidden";
}
}
var selector = document.getElementById("payment_method");
selector.onchange = paymentChangeHandler;
<table width="723" height="75" border="2">
<tbody>
<tr>
<th width="248" scope="col"><span style="font-size: 13px">Payment
Method:</span>
<select id="payment_method">
<option value=""></option>
<option value="tracer ach credit">Credit</option>
<option value="tracer ach debit">Debit</option>
</select> </th>
</tr>
</tbody>
</table>
<br>
<table width="723" height="558" border="2" id="bank_info" style="visibility:hidden;">
<tbody>
<tr style="text-align: center; font-size: 13px;">
<td height="40" colspan="2">
</td>
</tr>
<tr>
<td height="24" valign="top"><span style="font-size: 13px">Bank
Account:</span>
</td>
<td height="26"><textarea rows="1" cols="50">
</textarea> </td>
<span style="text-align: center">
</span>
</tr>
</tbody>
</table>
Add id's for payment method drop down control and bank table and add style visibility:hidden to bank table.