Displaying and concealing table rows based on selected items

Question

Displaying and concealing table rows based on selected items

After spending a whole day trying to get this HTML/java script to work properly, I came across some code online that I used here. My goal is to have the "Colors*" row not displayed when the page loads, but to show the color options when a shirt size is selected from the drop-down menu.

Currently, the color table with radio buttons is not displaying correctly, as it resizes and does not match the length of the row above. I am also struggling with the radio buttons allowing multiple selections instead of just one.

I have also included two images to illustrate the issue. Edit: The button problem has been resolved.

I am looking to achieve this using only JavaScript, without 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 an example of the issue: https://i.sstatic.net/RNk1a.png https://i.sstatic.net/wp7b0.png

Any assistance would be greatly appreciated.

javascript html css

Answer 1

Answer №1

Ensure that your script uses display = "table-row" rather than display = "block"

It is advisable to toggle a class instead of directly altering an element's style, as demonstrated 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>

Answer 2

Ensure that your script uses display = "table-row" rather than display = "block"

It is advisable to toggle a class instead of directly altering an element's style, as demonstrated 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>

Answer 3

Answer №2

issue found in the section below

<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

Due to different names given to the radio buttons, they are not grouped together. To fix this, give all of them the same name.

<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

Answer 4

issue found in the section below

<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

Due to different names given to the radio buttons, they are not grouped together. To fix this, give all of them the same name.

<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

Answer 5

Answer №3

To start, you need to fix the first row. It contains 5 table cells but the colspan is set to only 3 columns, while all other rows (except the last hidden one) have 4 columns!!!

Having code like this in your first row is not ideal:

style="100px;"

You should include a style attribute such as width/height, etc.

There is no need to specify:

colspan="1"

As this is the default setting for table cells.

Answer 6

To start, you need to fix the first row. It contains 5 table cells but the colspan is set to only 3 columns, while all other rows (except the last hidden one) have 4 columns!!!

Having code like this in your first row is not ideal:

style="100px;"

You should include a style attribute such as width/height, etc.

There is no need to specify:

colspan="1"

As this is the default setting for table cells.

Answer 7

Answer №4

Here is a script that adds a class on click event for a specific element:

$('#shirts').on('click', function() { $(this).addClass('current').hidden_button(); });

Answer 8

Here is a script that adds a class on click event for a specific element:

$('#shirts').on('click', function() { $(this).addClass('current').hidden_button(); });

Displaying and concealing table rows based on selected items

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

We're facing some technical difficulties with the form for the school project. Furthermore, I need to ensure that the answers are

Autocomplete for Converting Postal Codes to Cities

Trouble aligning a div at the center within another div using margin auto

Discovering identical objects by property and combining them with the help of JavaScript or UnderscoreJS

Best practices for implementing JavaScript in JSP pages

Choosing a sibling element before another using CSS

How to modify the styling of an input element in React without directly manipulating the input itself

Determining Adjacency of <li> Elements Using jQuery Sortable() and Class Comparison

Generate a unique token through a personalized form

How can I overlay text on top of an image?

Angular.js is a great tool for showing PDF files on a

What could be causing my UI Bootstrap datepicker-popup to suddenly stop functioning?

Tips for relocating a CSS button

The W3C validator does not recognize any modifications made after jQuery and JavaScript have been applied

What exactly is the functionality of the third parameter (usually next()) behind the scenes in ExpressJS once it is hidden behind the abstraction layer?

adjust time in jQuery AJAX request when a button is clicked

Limiting the draggable element within a compact container using jquery UI

Adjust the node_modules path tailored to your project

Ways to include additional assurances depending on a specific circumstance

Arrange your grid system with Bootstrap Vue