重复的成员表单

duplicate member form

本文关键字：表单 成员      更新时间：2023-09-26

我有一个预订表格，你在下面看到：

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

但是我有一个问题，最后它说"添加MEmber"我喜欢复制预订表格，一秒钟我们的第三人也预订，我怎样才能复制预订表格？

有许多方法可以存档。一种简单的方法是将所有数据提交到服务器，在那里重建整个表单。在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';

仍有改进需要应用！

您可以使用多个表体，这将使解决方案非常简单，并且在客户端浏览器中禁用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作为表格布局。

我绝对建议使用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;
 }
}

这样，用户可以添加他想要的所有成员，并且您都可以处理它们。

相关文章：