Home/ Questions/Q 597369
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-13T16:16:22+00:00

I’m working on an HTML form that will post data to my Webserver for

  • 0

I’m working on an HTML form that will post data to my Webserver for storing into a database. I have no problem with the PHP and SQL code, but I want to have a small feature on the client side form:

There is to be a dropdown (select) that asks how many rows of a certain type you want. Then, a small JavaScript should produce these for you.

like such:

<form method="POST" action="act.php">
<select name="numrows"><option>1</option><option>2</option></select>
<table>
    <tr>
        <td><input type="text" name="row[x]" /></td>
    </tr>
</table>
</form>

Now I would like to have as many copies of the <tr> as selected in numrows, and each with the corresponding number in the name (replacing the x). How would I implement this in JavaScript?

I understand I need to Write a method and reference this with the onchange event in the select tag, but I’m at a complete loss of how to write this function.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    I’m sure you can do this in all sorts of ways with jQuery and so on, but if you’re after a portable, DOM-compliant solution, you might want to go back to basics like this:

    <html>
<head>
  <script type="text/javascript">
    function removerows (tablebody) {
      var rows = tablebody.getElementsByTagName("tr");
      while (rows.length)
        rows[0].parentNode.removeChild(rows[0]);
    }

    function addrows (tablebody, n) {
      for (var i=0; i<n; i++) {
        var row = document.createElement("tr");
        var titlecell = document.createElement("td");
        titlecell.appendChild(document.createTextNode("Row " + i));
        row.appendChild(titlecell);

        var cell = document.createElement("td");
        var input = document.createElement("input");
        input.setAttribute("type", "text");
        input.setAttribute("name", "row["+i+"]");
        cell.appendChild(input);
        row.appendChild(cell);
        tablebody.appendChild(row);
      }
    }

    function change () {
      var select = document.getElementById("numrows");
      var index = select.selectedIndex
      var n = parseInt(select.value);
      var tablebody = document.getElementById("maintablebody");
      removerows(tablebody);
      addrows(tablebody, n);
    }
  </script>
</head>
<body>
  <form method="POST" action="act.php">
  <select id="numrows" name="numrows" onchange="change()">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
  </select>
  <table id="maintable">
    <tbody id="maintablebody">
      <tr>
        <td>Row 0</td>
        <td><input type="text" name="row0" /></td>
      </tr>
    </tbody>
  </table>
  <input type="submit"/>
  </form>
</body>
</html>

    Here I’m using the W3C DOM Level 1, and the HTML extensions. The only not-very-standard aspect is the use of the onchange attribute to the select element. If you want to be purist about this, you may wish to use addElementListener and attachEvent.

    Paste this HTML into a file and try it in Firefox and/or Internet Explorer to see whether it does the sort of thing you’re after. If you’re not convinced, do come back with questions.

    • 0