HTML table format with javascript style-change

Question

In my HTML table I would like to hide a question and show this if a specific option is chosen in the dropdown. This works fine with the code below, but the table isn't formatted right (two <td> in the space of one)?

Demo (pick "Other type" at "Type") How to fix this?

function setForm(value) {
  if (value == '99') {
    document.getElementById('form1').style = 'display:block;';
  } else {
    document.getElementById('form1').style = 'display:none;';
  }

}

<form action="index.php" method="post">
  <table cellspacing="0" cellpadding="0">
    <tr>
      <td>First question:</td>
      <td><input type="text" name="firstone" /></td>
    </tr>
    <tr>
      <td>Type: </td>
      <td>
        <select id="type" name="type" onchange="setForm(this.value)">
          <option value="1">1</option>
          <option value="2">2</option>
          <option value="99">Other type</option>
        </select>
      </td>
    </tr>
    <tr id="form1" style="display:none;">
      <td>Specify type:</td>
      <td><input type="text" name="othertype" /></td>
    </tr>
    <tr>
      <td>Description:</td>
      <td><input type="text" name="description" minlength="10" maxlength="1000" /></td>
    </tr>
  </table>
  <input type="submit" name="submit" value="Verstuur" />
</form>

ikiK · Accepted Answer · 2021-02-06 19:07:45Z

Dont use block to display tr table element, just set style display to empty:

.style.display = '';

function setForm(value) {
  if (value == '99') {
    document.getElementById('form1').style.display = '';
  } else {
    document.getElementById('form1').style.display = 'none';
  }

}

<form action="index.php" method="post">
  <table cellspacing="0" cellpadding="0">
    <tr>
      <td>First question:</td>
      <td><input type="text" name="firstone" /></td>
    </tr>
    <tr>
      <td>Type: </td>
      <td>
        <select id="type" name="type" onchange="setForm(this.value)">
          <option value="1">1</option>
          <option value="2">2</option>
          <option value="99">Other type</option>
        </select>
      </td>
    </tr>
    <tr id="form1"  style="display:none;">
      <td>Specify type:</td>
      <td><input type="text" name="othertype" /></td>
    </tr>
    <tr>
      <td>Description:</td>
      <td><input type="text" name="description" minlength="10" maxlength="1000" /></td>
    </tr>
  </table>
  <input type="submit" name="submit" value="Verstuur" />
</form>

J4R · Accepted Answer · 2021-02-06 19:09:12Z

The problem is, display:block for a tr element.
Try this:

function setForm(value) {
  if (value == '99') {
    document.getElementById('form1').style = 'display:table-row;';
  } else {
    document.getElementById('form1').style = 'display:none;';
  }

}

<form action="index.php" method="post">
  <table cellspacing="0" cellpadding="0">
    <tr>
      <td>First question:</td>
      <td><input type="text" name="firstone" /></td>
    </tr>
    <tr>
      <td>Type: </td>
      <td>
        <select id="type" name="type" onchange="setForm(this.value)">
          <option value="1">1</option>
          <option value="2">2</option>
          <option value="99">Other type</option>
        </select>
      </td>
    </tr>
    <tr id="form1" style="display:none;">
      <td>Specify type:</td>
      <td><input type="text" name="othertype" /></td>
    </tr>
    <tr>
      <td>Description:</td>
      <td><input type="text" name="description" minlength="10" maxlength="1000" /></td>
    </tr>
  </table>
  <input type="submit" name="submit" value="Verstuur" />
</form>

Collectives™ on Stack Overflow

HTML table format with javascript style-change

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related