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

You will most likely have to use javascript, yes. You can use this or write your own using it as a reference:

http://www.mredkj.com/tutorials/tableaddrow.html

Answer 2

I would use jQuery and append the new inputs.

Answer 3

What you're saying is that you're hand writing the input tags? Or are you saying that you want a dynamic action where a user clicks a button and it adds more table rows?

In anycase, for your code, you just need a loop, like so. I assume $data is whatever data you want to set based on an array that is probably from the database or something:

<?php
for($i=0, $iMaxSize=count($data); $i<$iMaxSize; $i++)
{
?>
 <tr> 
  <td><?= $i+1 ?></td> 
  <td><input type=text name=x1 size=10 value="<?=$data[$i]['something']"></td> 
  <td><input type=text name=y1 size=10 value="<?=$data[$i]['somethingelse']"></td> 
  <td><input type=text name=z1 size=10 value="<?=$data[$i]['somethingelseagain']"></td> 
 </tr> 
<?php
} // end for 
?>

Of course you can't copy and past the above, but that's a good starting point.

For dynamically doing it, you can't use php. What it sounds like you want to use is javascript ajax, and php combination.