How can I dynamically add input fields to a form?

Question

I'm not much of a web programmer, but I'm creating a simple web app that has a form where the user can enter a series of points (x,y,z) but I don't know how many the user is going to enter. I don't want to guess the probable maximum (100 maybe?) and put 100 fields on the form because it would look ugly. What's the easiest way to add more fields (or unhide fields) as the user enters data without contacting the server.

Currently I'm just using html & php, but I assume to do this I'll need javascript?

Currently my code looks like this, as the user enters data, I want another row to appear.

<form action="edit.php" method="post"> 
  <table border=1> 
    <tr> 
      <td> 
      <td>X
      <td>Y
      <td>Z
    </tr> 
    <tr> 
      <td>1</td> 
      <td><input type=text name=x1 size=10 value="0.4318"></td> 
      <td><input type=text name=y1 size=10 value="0.0000"></td> 
      <td><input type=text name=z1 size=10 value="0.1842"></td> 
    </tr> 
    <tr> 
      <td>2</td> 
      <td><input type=text name=x2 size=10 value="0.4318"></td> 
      <td><input type=text name=y2 size=10 value="0.0000"></td> 
      <td><input type=text name=z2 size=10 value="-0.1842"></td> 
    </tr> 
    <tr> 
      <td>3</td> 
      <td><input type=text name=x3 size=10 value="-0.3556"></td> 
      <td><input type=text name=y3 size=10 value="0.0000"></td> 
      <td><input type=text name=z3 size=10 value="0.1636"></td> 
    </tr> 
    ... I want more to appear here...
  </table> 
  <button name="submit" value="submit" type="submit">Save</button> 
</form> 

Any idea the easiest way? Thanks...

Answer 1

I would use jQuery and append the new inputs.