ansaurus

Question

Answer 1

+8 A:

That depends on what you mean by "field." It sounds as though you're talking about a form, which wouldn't be PHP, but instead HTML. You could have a button [Add] post back to the server, which then refreshes the page with another set of form-inputs. You also do that via javascript without having to refresh the page.

Simple Javascript (jQuery) Example:

$(document).ready(function(){
  $("input[value='Add']").click(function(event){
    event.preventDefault();
    $("p.field:last").clone().insertAfter("p.field:last");
  });
});

<form method="post">
  <p class="field">
    <input type="text" name="firstname[]" value="" /> 
    <input type="text" name="lastname[]" value="" />
  </p>
  <p>
    <input type="submit" name="submit" value="Add" /> 
    <input type="submit" name="submit" value="Done" />
  </p>
</form>

Simple PHP Example:

I don't encourage you use this as-is

<?php

  $count = 1;

  if ($_POST["submit"] == "Add") {

    $count = ($_POST["firstname"]) ? (count($_POST["firstname"]) + 1) : 1;

  } else 
  if ($_POST["submit"] == "Done") {

    print "<pre>";
    print_r($_POST["firstname"]);
    print_r($_POST["lastname"]);
    print "</pre>";

  }

?>
<form method="post">
  <?php for($i = 0; $i < $count; $i++) { ?>
  <p class="field">
    <input type="text" name="firstname[]" value="<?php print $_POST["firstname"][$i]; ?>" /> 
    <input type="text" name="lastname[]" value="<?php print $_POST["lastname"][$i]; ?>" />
  </p>
  <?php } ?>
  <p>
    <input type="submit" name="submit" value="Add" /> 
    <input type="submit" name="submit" value="Done" />
  </p>
</form>

Jonathan Sampson 2009-06-25 02:42:16

edited my question. Thanks for the remind

2009-06-25 02:49:13

+1 for taking advantage of name="firstname[]". Makes parsing the POST so much easier in PHP. I've seen some pretty heinous regex-based name parsing used, where array syntax would have been so much cleaner and faster. Don't forget to run htmlentities on $_POST["firstname"][$i] though -- otherwise you've got an XSS hole.

Frank Farmer 2009-06-25 03:02:20

Thanks for the kind words, Frank. Yeah, I am not suggesting these scripts are web-ready in any way :) They would certainly need some nursing before they went into production.

Jonathan Sampson 2009-06-25 03:08:17

Answer 2

+1 A:

There are two ways to do this, either using solely PHP or by some fancy JavaScript. I will tackle the PHP-only solution. A JavaScript solution would be much more responsive as there wouldn't be repeated round trips to the server but it would also only work for users who have JavaScript enabled, whereas a PHP solution works for everybody.

A general outline of the solution is this:

Initially $count is 1, and one row is generated.
If the user clicks Add, the form is posted back to the very same PHP file with a hidden count variable included. The script restarts from the beginning, increments $count, and displays one more row than the last time.
If the user clicks Submit, the names that have been entered are processed.

Here's some sample code. I apologize that I do not have PHP installed on the machine I'm writing this one so this is entirely untested. Hopefully there aren't too many horrendous syntax errors!

<?php
  $count = isset($_POST['count']) ? $_POST['count'] : 1;

  if (isset($_POST['add']))
    ++$count;
  else if (isset($_POST['submit']))
  {
    header('Content-Type: text/plain');
    print_r($_POST);
    exit;
  }
?>

<html>
  <body>
    <form action="<?php echo htmlspecialchars($_SERVER['REQUEST_URI']) ?>" method="post">
      <input type="hidden" name="count" value="<?php echo $count ?>" />

      <?php for ($i = 1; $i <= $count; ++$i) { ?>

        [<?php echo $i ?>]
        First: <input type="text" name="firstName<?php echo $i ?>"
                      value="<?php echo htmlspecialchars($_POST["firstName$i"]) ?>" />
        Last:  <input type="text" name="lastName<?php echo $i ?>"
                      value="<?php echo htmlspecialchars($_POST["lastName$i"]) ?>" />
        <br />

      <?php } ?>

      <input type="submit" name="add"    value="Add"    />
      <input type="submit" name="submit" value="Submit" />
    </form>
  </body>
</html>

Oh and you want a JavaScript solution, eh? Well you've got the really nice jQuery answer already. How about a ridiculously long plain-JavaScript solution, then?

<html>
  <head>
    <script type="text/javascript">
    // <![CDATA[

      var count = 0;

      function addRow() {
        var table      = document.getElementById("table");
        var row        = document.createElement("tr");
        var countCell  = document.createElement("td");
        var countText  = document.createTextNode(++count);
        var firstCell  = document.createElement("td");
        var firstInput = document.createElement("input");
        var lastCell   = document.createElement("td");
        var lastInput  = document.createElement("input");

        firstInput.type = "text";
        firstInput.name = "firstName" + count;
        lastInput.type  = "text";
        lastInput.name  = "lastName" + count;

        table    .appendChild(row);
        row      .appendChild(countCell);
        countCell.appendChild(countText);
        row      .appendChild(firstCell);
        firstCell.appendChild(firstInput);
        row      .appendChild(lastCell);
        lastCell .appendChild(lastInput);
      }

    // ]]>
    </script>
  </head>

  <body>
    <form action="somewhere.php" method="post">
      <table id="table">
        <tr>
          <th>Row</th>
          <th>First</th>
          <th>Last</th>
        </tr>
      </table>

      <script type="text/javascript">
        addRow();
      </script>

      <input type="button" value="Add" onclick="addRow()" />
      <input type="submit" value="Submit" />
    </form>
  </body>
</html>

John Kugelman 2009-06-25 02:56:32

use firstName[] instead of doing firstName1 firstName2...

Andrew Moore 2009-06-25 03:14:13

Others did that, so I wrote to spec instead. Or if you don't buy that, can I claim that square brackets are technically invalid in form field names? :-)

John Kugelman 2009-06-25 03:17:50

@John: Nope, they are valid!

Andrew Moore 2009-06-25 04:01:05

Well how do you do, I was all set to prove you wrong but you are correct. @name is CDATA, so brackets are fine and dandy.

John Kugelman 2009-06-25 04:07:56

ansaurus

tags:

views:

answers:

Unlimited fields in PHP?

Simple Javascript (jQuery) Example:

Simple PHP Example:

related questions