CODEWITHSUNDEEP
javascripthtmlcss
whisk
whisk

Reputation: 655

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 shirt 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

Upvotes: 1

Views: 58

Answers (4)

ubakara samy
ubakara samy

Reputation: 159

You can use on click Add class script here $('#shirts').on('click', function() { $(this).addClass('current').hidden_button(); });

Upvotes: 0

Asons
Asons

Reputation: 87191

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

And it's recommended to toggle a class instead of change an elements style, as in sample 2.

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>

Sample 2

function showButton(elem) {
  if (elem.value == 0) {
    document.getElementById('hidden_button').classList.remove('show');
  } else if (elem.value > 0) {
    document.getElementById('hidden_button').classList.add('show');
  }
}
table {
  width: 800px;
  padding: 10px;
}

#hidden_button {
  display: none;
}
#hidden_button.show {
  display: table-row;
}
<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">
      <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>

Upvotes: 2

Chrobak Stefan
Chrobak Stefan

Reputation: 23

First you must repair the first tr. There you have 5 td but your colspan is running about 3 cols and all other tr (less the last hidden) have 4 cols!!!

It is bad code if you write (like in your first tr)

style="100px;"

You forgot a style-attribute like width/height/etc

It is not necessary to write

colspan="1"

This is the default setting for td.

Upvotes: 1

reza
reza

Reputation: 1507

error you are having in the following section

<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

as you have put different name for the radio button, all of them became independent. to make them all in a group put same name to all of them.

<input type="radio" name="color" value="Black" /> Black
<input type="radio"name="color" value="White" />White
<input type="radio"name="color" value="Blue" />Blue
<input type="radio" name="color" value="Red"/>Red

Upvotes: 1

Related Questions