CODEWITHSUNDEEP
javascripthtmlhtml-table
Scripter
Scripter

Reputation: 579

HTML table format with javascript style-change

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>

Upvotes: 1

Views: 409

Answers (2)

J4R
J4R

Reputation: 1104

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>

Upvotes: 1

ikiK
ikiK

Reputation: 6532

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>

Upvotes: 1

Related Questions