whisk whisk - 24 days ago 9
CSS Question

Showing and hiding table row when item is selted

Having trouble getting this HTML/java script to work correctly, been working at is for a day now. Looked on line and found what I have coded here. I want it when the page loads to not display the "Colors*" row. When I select the size of shit from the drop down then it will show the color options.

As of right now that kinda works, the table that has the colors and radio buttons in it resizes and doesn't display correctly, matching the above row in length, so this is were I'm stuck. Along with the radio buttons allowing to select all of them instead of just one.

I added two images showing what it looks like.
Edit: Buttons problem has been fixed

Im looking to do this with just javascript, no jquery.

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<script type="text/javascript" src="jsForm.js"></script>
<title>Javascript with Forms</title>
<style type="text/css">
table{
width: 800px;
padding: 10px;
}
</style>
</head>
<body>
<form action="#">
<table border="1">
<caption>T-Shirt Selection</caption>
<tr><td style="100px;"></td><td style="150px;"></td><td style="50px;"></td><td style="50px;"></td><td></td></tr>
<tr>
<th>Description</th>
<th>Selection</th>
<th>Qty</th>
<th>Total</th>
</tr>
<tr>
<td>
T_Shirt 1:
</td>
<td>
<select id="shirts" onchange="showButton(this)">
<option value="0" selected >Choose T-Shirt </option>
<option value="1" >Small $10.99</option>
<option value="2" >Medium $12.99</option>
<option value="3" >Large $14.99</option>
<option value="4" >X-Large $15.99</option>
<option value="5" >XX-Large $15.99</option>
</select>
</td>
<td>
<input type="text" name="qty" maxlength="4" size="4" />
</td>
<td>
<input type="text" name="qty" maxlength="10" size="10" />
</td>
</tr>


<tr id="hidden_button" style="display:none;">
<td colspan="1">Color.*</td>
<td colspan="3">
<input type="radio" name="Back" value="Black" /> Black
<input type="radio"name="White" value="White" />White
<input type="radio"name="Blue" value="Blue" />Blue
<input type="radio" name="Red" value="Red"/>Red
</td>
</tr> </table>
</form>
</body>




Javascript

function showButton(elem){
if(elem.value == 0){
document.getElementById('hidden_button').style.display = "none";
}else if(elem.value > 0){
document.getElementById('hidden_button').style.display = "block";
}


}

here is what im talking about
enter image description here
enter image description here

Any help is greatly appreciated

Answer

You need to use display = "table-row" in your script, not display = "block"

function showButton(elem) {
  if (elem.value == 0) {
    document.getElementById('hidden_button').style.display = "none";
  } else if (elem.value > 0) {
    document.getElementById('hidden_button').style.display = "table-row";
  }
}
table {
  width: 800px;
  padding: 10px;
}
<form action="#">
  <table border="1">
    <caption>T-Shirt Selection</caption>
    <tr>
      <td style="100px;"></td>
      <td style="150px;"></td>
      <td style="50px;"></td>
      <td style="50px;"></td>
      <td></td>
    </tr>
    <tr>
      <th>Description</th>
      <th>Selection</th>
      <th>Qty</th>
      <th>Total</th>
    </tr>
    <tr>
      <td>
        T_Shirt 1:
      </td>
      <td>
        <select id="shirts" onchange="showButton(this)">
          <option value="0" selected>Choose T-Shirt</option>
          <option value="1">Small $10.99</option>
          <option value="2">Medium $12.99</option>
          <option value="3">Large $14.99</option>
          <option value="4">X-Large $15.99</option>
          <option value="5">XX-Large $15.99</option>
        </select>
      </td>
      <td>
        <input type="text" name="qty" maxlength="4" size="4" />
      </td>
      <td>
        <input type="text" name="qty" maxlength="10" size="10" />
      </td>
    </tr>


    <tr id="hidden_button" style="display:none;">
      <td colspan="1">Color.*</td>
      <td colspan="3">
        <input type="radio" name="Back" value="Black" />Black
        <input type="radio" name="White" value="White" />White
        <input type="radio" name="Blue" value="Blue" />Blue
        <input type="radio" name="Red" value="Red" />Red
      </td>
    </tr>
  </table>
</form>

Comments