php - 重複会員フォーム

Question

以下に示すように、予約フォームがあります。

<table border=0> 
    <tr>  
            <td colspan="2"><h2>Book Now</h2>   </td>  
            </tr> 
        <tr>  
            <td width="139"> Select Date (dd/mm/yy):</td>  
            <td width="351"> <input type="text"  id="datepicker"> </td>  
        </tr> 
        <tr>
          <td>Select Category:</td>
          <td>&nbsp;</td>
        </tr>
         <tr>
          <td colspan="2"><select name="orgSelect" class="orgSelect">
<option value="0">----Select CAtegory----</option>
<option value="1">CAtegory 1</option>
<option value="2">CAtegory 2</option>
</select></td>
<tr>
<td>Select Product:</td><td>&nbsp;</td>
</tr>
          </tr>
        <tr>

        </tr>
        <tr>
          <td colspan="2"><select name="terrSelect" class="terrSelect">
<option value="0" class="static">----Select Product----</option>
<option value="1" class="sub_1">Product1</option>
<option value="2" class="sub_1">Product2</option>
</select>
   </td>
        </tr>       
        <tr>  
            <td> Number of Persons</td>  
            <td>
              <select name="persons" id="persons">
                <option>select</option>
                <option>1</option>
                <option>2</option>
                <option>3</option>
              </select></td>  
        </tr>  
        <tr>  
            <td><strong>Information:</strong></td>  
            <td>&nbsp;</td>  
        </tr>
         <tr>  
            <td>1st Member: </td>  
            <td>&nbsp;</td>  
        </tr>
         <tr>
           <td>First Name:</td>
           <td><input type="text" name="date" value=""></td>
         </tr>
         <tr>
           <td>Last Name:</td>
           <td><input type="text" name="date" value=""></td>
         </tr>
         <tr>
           <td>Email:</td>
           <td><input type="text" name="date" value=""></td>
         </tr>
         <tr>
           <td>Phone</td>
           <td><input type="text" name="date" value=""></td>
         </tr>
         <tr>
           <td>Mobile Phone</td>
           <td><input type="text" name="date" value=""></td>
         </tr> 
    </table>
    <p>Add Member</p>

しかし、問題があります。最後に「メンバーを追加」と表示され、予約フォームを複製するのが好きでした。3人目の人も予約するために、これを予約フォームと複製するにはどうすればよいですか。

score 0 · Accepted Answer

これをアーカイブする方法はいくつかあります。簡単な方法の 1 つは、フォーム全体が再構築されるサーバーにすべてのデータを送信することです。JavaScript側でこれを行うには、テンプレートを使用できます（jqueryを使用していると想定しています）。

サーバー側のソリューション (最終的な送信として) では、入力名が賢明に形成されている必要があります。

例：

data[members][{$memberId}][name]

フォームが最終フォームで送信されたかどうかを判断したい場合、または単にメンバーを追加したい場合は、次のように送信ボタンを作成できます。

<input type="submit" name="btn[submit]" value="submit booking" />
<input type="submit" name="btn[add]" value="submit booking" />

PHP側では、これは次のように決定できます。

$btnType = isset($_REQUEST['btn']) && is_array($_REQUEST['btn']) ? array_shift(array_keys($_REQUEST['btn'])) : 'submit';

適用する改善点はまだあります。

score 0 · Accepted Answer

複数のテーブル本体を使用できます。これにより、ソリューションが非常にシンプルになり、クライアントのブラウザーで JavaScript が無効になっている場合にも機能します。

<body>

<table border=0 id="table1">

    <tbody>
        <tr>  
            <td colspan="2"><h2>Book Now</h2>   </td> 
            ...
            <select name="persons" id="persons" onchange="change_persons(this.value)">
            ...
            <td><strong>Information:</strong></td>
            <td>&nbsp;</td>
        </tr>
    </tbody>

    <tbody>
        <tr>
            <td>1st Member: </td>
            ...
            <td>Mobile Phone</td>
            <td><input type="text" name="mobile1" value=""></td>
        </tr> 
    </tbody>

    <tbody>
        <tr>
            <td>2nd Member: </td>
            ...
            <td>Mobile Phone</td>
            <td><input type="text" name="mobile2" value=""></td>
        </tr>
    </tbody>

    <tbody>
        <tr>
            <td>3rd Member: </td>
            ...
            <td>Mobile Phone</td>
            <td><input type="text" name="mobile3" value=""></td>
        </tr>
    </tbody>
</table>

<script language="javascript">
<!--
function change_persons(show) {
    var bodies = document.getElementById('table1').tBodies;
    for (var i=1, l=bodies.length; i<l; i++) {
        bodies[i].style.display = (i<=show)? 'block':'none';
    }
}
change_persons(1); // at startup we show only 1 person
//--></script>

</body>

完全なhtmlはこちら

score 0 · Accepted Answer

編集:混乱しないように、テーブルレイアウトに Stano と Eric の html を使用していることに気付きました。

jQueryを使用することを強くお勧めします。jQueryを使用すると、作業がはるかに簡単になります。次の行でページに追加できます。

<script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js'></script>

次に、[メンバーの追加] オプションのボタンを使用します。

<button id='addMember'>Add new member</button>

また、テーブルにIDを与える必要があります

<table id='bigTable' border=0>

js ファイルでは、次のようなものを使用できます。

$(document).ready(function() {
 var currentMember = 2;
 $(function() {
  $('#addMember').click(function(event) {
   $('<tbody>')
    .attr('id', 'subTableMember'+currentMember);
    .appendTo('#bigTable');
   $('<tr>')
    .attr('id', 'tableRowMember'+currentMember);
    .appendTo('#subTableMember'+currentMember);
   $('<td>')
    .html(currentMember+'th member')
    .appendTo('#tableRowMember'+currentMember);
   $('<td>')
    .html('<input type="text" name="mobile'+currentMember+'">');
    .appendTo('#tableRowMember'+currentMember);
   currentMember++;
  });
 });
});

私はコードをテストしていませんが、始めるのに役立つはずです。

別の編集：サーバー部分を忘れた場合。PHPコードでは、次のようなものを使用できるようになりました:

foreach($_POST as $key=>$val) {
 if(substr($key, 0, 6) == 'mobile') {
  //This is a member mobile, add it to your DB or whatever
  echo $key.' => '.$val;
 }
}

このようにして、ユーザーは必要なすべてのメンバーを追加でき、それらをすべて処理できます。

php - 重複会員フォーム

3 に答える 3

Related

Reference