重复成员的形式

我有一个预订表格，你看到波纹管：重复成员的形式

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

但我有一个问题，它说：“加入会员”到底我喜欢重复预订形式，第二我们的第三个人也要预订，我怎样才能使这个复制预订表？

来源

2012-07-06 mauro

请解释一下重复的，如果您想预订超过一人时，你可以像第一人等的名称添加字段 – 2012-07-06 10:24:55

苏氨酸的原因有比这更为什么重复的第二或第三人称，因为预订是由集团提出，这是怎么也得：S – mauro 2012-07-06 10:33:20

你似乎想要什么是很容易的。尝试一些快速的JavaScript教程和尝试这样做，如果你在这里面临的问题和复出问。它只是HTML。 – Prusse 2012-07-06 10:36:32

有许多方法可以将其归档。一种简单的方法是将所有的数据提交给服务器，在那里整个表单被重建。在javascript端做这件事可以用模板来完成（我假设你使用jQuery）。

服务器端解决方案（作为最终提交）需要的是，您的输入名称是非常形成的。

例子：

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

如果你想确定，如果形式的最终形式提交，或只是增加一个成员，可以形成提交 - 按钮这样的：

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

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

还有改进适用于：

PHP的边，这可以通过确定！

来源

2012-07-06 11:00:56 Ron

您可以使用多个台体，这将使该解决方案非常简单，在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 here

来源

2012-07-06 11:47:39 Stano

编辑：只是不混淆你，我只是意识到，我使用Stano和Eric的表格布局的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; 
} 
}

通过这种方式，用户可以添加所有他想要的成员，你都可以对其进行处理。

来源

2012-07-06 12:10:27

重复成员的形式

回答

相关问题