0

PHPで無制限のフィールドを作成するにはどうすればよいですか? シナリオは次のとおりです。

最初は 2 つのフィールドしかありません。名前 1、姓 1 と呼びましょう。

私がやりたいことは、「追加」ボタンをクリックすると、新しい行にさらに2つのフィールドが追加され、フィールドのラベル/名前は名2、姓2になることです。もう一度クリックすると、名前 3、姓 3 のようになります。

php のサンプル スクリプトを教えてもらえますか? 私はPHPが初めてです。

フォームは HTML である必要があります。誰かが Ajax のサンプル コードを提供できれば、大きなプラスになります。

4

2 に答える 2

10

それは、「フィールド」の意味によって異なります。PHP ではなく HTML であるフォームについて話しているように聞こえます。ボタン [追加] をサーバーにポストバックすることができます。これにより、別の一連のフォーム入力でページが更新されます。また、ページを更新することなく、javascript を介してそれを行います。

簡単な Javascript (jQuery) の例:

$(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>

簡単な PHP の例:

これをそのまま使用することはお勧めしません

<?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>
于 2009-06-25T02:42:16.540 に答える
2

これを行うには 2 つの方法があります。PHP のみを使用する方法と、高度な JavaScript を使用する方法です。PHPのみのソリューションに取り組みます。JavaScript ソリューションは、サーバーへのラウンドトリップが繰り返されないため、はるかに応答性が高くなりますが、JavaScript が有効になっているユーザーに対してのみ機能しますが、PHP ソリューションはすべての人に機能します.

ソリューションの概要は次のとおりです。

  1. 初期値$countは 1 で、1 行生成されます。
  2. countユーザーが [追加] をクリックすると、フォームは非表示の変数が含まれたまったく同じ PHP ファイルに戻されます。スクリプトは最初から再開し、 をインクリメントし$countて、前回よりも 1 行多く表示します。
  3. ユーザーが [送信] をクリックすると、入力された名前が処理されます。

ここにいくつかのサンプルコードがあります。これを書いているマシンに PHP がインストールされていないことをお詫びします。そのため、これは完全にテストされていません。恐ろしい構文エラーが多すぎないことを願っています!

<?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>

ああ、JavaScript ソリューションが必要ですね。さて、あなたはすでに本当に素晴らしいjQueryの答えを持っています. では、途方もなく長いプレーンな JavaScript ソリューションはどうでしょうか?

<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>
于 2009-06-25T02:56:32.923 に答える