ボタンのクリックで複数の入力フィールドを含む行を追加するフォームを作成する方法

Question

ボタンをクリックして複数の入力フィールド（php + html）を含む行を追加するフォームを作成する方法

私の行には、1つの選択オプションと3つの入力ボックスが含まれています。

<tr> 
    <td> 
     <select name="itemname[]" id="itemname" class="form-control" tabindex="1"> 
     ; 
     <option value="">Select item</option> 
     <?php 
      $sql_item = "SELECT id, item 
         FROM food_exchange_list 
         ORDER by item ASC"; 
      $result_item = mysqli_query($con, $sql_item); 
      if($result_item && $myrow_item = mysqli_fetch_array($result_item)) 
      { 
       do 
       { 
        $item_id = $myrow_item["id"]; 
        $item_name = $myrow_item["item"]; 
      ?> 
     <option value="<?php echo $item_id;?>"><?php echo $item_name; ?></option> 
     <?php 
      } 
      while($myrow_item = mysqli_fetch_array($result_item)); 
      } 
      ?> 
     </select> 
    </td> 
    <td><input type="number" class="form-control" min="0" max="100" id="exchange" name="exchange[]" required="required" tabindex="3" onchange="compute_protien(this.value)" style="width: 80px;"></td> 
    <td>60</td> 
    <td>2</td> 
    <td>60</td> 
    <td>2</td> 
</tr> 

これは1行のコードです。私は行の追加ボタンをクリックして同様の行を追加したいと思う、誰かが選択ボックスから値を選択し、PHPを使用して同じ行にそれをフィードデータベースから値をフェッチしたい。

Answer 1

（私はjQueryのは大丈夫、あなたのタグに基づいていると仮定）

あなたは追加使用してjQueryのオブジェクトにHTML要素を追加することができます。たとえば<a></a>タグの場合は$('<a>')を使用してhtmlオブジェクトを作成できます。

したがって、次のコード：

var table = $('table#myTable'); // find the table you want to append to 
var newRow = $('<tr>'); // creates a new row 
newRow.append($('<td>')); // creates and appends an empty table data element 
table.append(newRow);  // appends the row to your table 

は、あなたのテーブルに複数の行を追加することの基本を行います。あなたが所定れている場合

1. ：もちろん、あなたはまた、あなたが2つのオプションがあり-tagあなた<select>のすべてのオプションを取得するには、今

   ---

   あなたのクラス、名前を追加したい、テキストなどオプションの量は、あなたはそれがオフライン他

2. がサーバー

最初のソリューションは明らかに1より高速であるに要求を送信できます。 PHPを使用してhtmlに隠しデータを追加するだけで済みます。最小限の情報しか必要とせずにテーブルにdata要素を追加するか、既存の行をコピーするか（常に1つ以上あれば）、追加の行全体を作成できますが、display: none;を使用して非表示にすることができます。

注：これがフォームの中にある場合は、送信されないようにしてください。または少なくともサーバーによって無視されます。これを行う最も簡単な方法は、おそらくあなたのフォームの外にそれらの要素を追加することです。ただし、その場合はdataまたは "copy"オプションを使用することを強くお勧めします。

---

あなたがデータをフェッチする場合は、新しい行を追加するとき、あなたは$.get()を利用して行うことができます住んでいます。次に、必要なデータを使用してサーバーに応答させます。

たとえば、すべてのアイテムの取得リクエストを送信します。これは、次のようになります。

$.get("server_link_to_get_data.php", function(data, status) { 
    /* this is the callback; you should probably build your entire row here */ 
    $('select#whatever').append($('<option value="' + data + '">')); 
} 

（明らかにあなたは、IDと項目名の配列を返すようにしたいだろうように、そのコードは、あなたが望むものを正確に行いませんが、それはほぼ同じ動作します）

もちろん、正しいデータを取得してサーバーに応答させる必要もあります。これは明らかにサーバーのプログラミング方法に依存します。（あなたがMVCモデルなどを使用していないことを強くお勧めします）

このリクエストを行うことは、あなたのhtmlを汚染しないため、おそらく最もクリーンなオプションです。怒りのクリックを避けるために現在処理していることをユーザーに明確にします。

---

概要（Fiはあなたが要求を送信する前に、ボタンを無効にすることもできますし、コールバックにそれを再度有効）：あなたは、常に少なくとも一つの列を持つことが保証されている場合は、私は単にそれの<option>一部をコピーしますそれはきれいなJSのためのものであり、何かを複雑にする必要はありません。あなたはまた、PHPであなたのhtmlを構築し、あなたが何かを変更する場合はJSを更新する必要はありません。

もしあなたがそれを持っていなければ、私はたぶんGETリクエストを送ってそこから行を作ります。