ansaurus

Question

Change number of HTML Input fields with Javascript

Answer 1

A:

You should not use write() - better approach is to use JavaScript to insert objects into DOM under your table object. In general DOM changing is a lot cleaner than write() (and you can't remove an extra row with write when they change the select from 2 to 1).

(google for "adding rows table javascript" - it will show examples)

Then, for each row, you add a TD element, and under each TD, add an input element.

DVK 2010-02-13 21:08:21

Answer 2

A:

You can use a javascript template engine, it cleanly separates the HTML from the JS logic.

I'm the author of PURE look at the demo page and the tutorials.
It was my way of replacing my XML/XSLT stack when I moved to JSON.

If the style is not your cup of tea, you can search on the web and will find plenty of these tools, and they radically change the way you build dynamic web pages.

Mic 2010-02-13 21:10:34

Answer 3

A:

this can be made easily with jQuery

('#mytable').append('<tr>...</tr>');

you'll need first to catch the change (I'll suppose #selectnumrows an ID for numrows)

('#selectnumrows').change(function() {
var x = $(this).val(); // would better if you parse it
for (var i = 1; i < x; i ++) {
('#mytable').append('<tr><td><input type="text" name="row[' + x + ']" /></td></tr>');
} 
});

Working with jQuery will make the task 100 easier. Get some background and you'll be able to understand the code/better it.

Omar Abid 2010-02-13 21:19:35

Answer 4

A:

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"+n);
        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.

Tim 2010-02-13 23:34:55

ansaurus

tags:

views:

answers:

Change number of HTML Input fields with Javascript

related questions