我有一个可以在这里看到的表单http://pay.splatwebsolutions.co.uk,它有一个表单的动态元素,即参与者的数量动态变化。
我命名为动态字段
attendee[]['attendee_name']
attendee[]['attendee_email']
attendee[]['attendee_type']
在提交时,我目前得到一个看起来像这样的数组(假设我已经添加了3个与会者。
Array
(
[0] => Array
(
[0] => Liam O'Neill
)
[1] => Array
(
[0] => liam@splatwebsolutions.co.uk
)
[2] => Array
(
[0] => normal
)
[3] => Steve Steveson
[4] => liam@splatewebsolutions.co.uk
[5] => normal
[6] => Geoff Geoffson
[7] => liam@splatewebsolutions.co.uk
[8] => normal
)
我想要的是像这样的数组
Array
(
[0] => Array
(
['attendee_name'] => Liam O'Neill
['atendee_email'] => liam@test.com
['atendee_type'] => normal
)
[1] => Array
(
['attendee_name'] => Liam O'Neill
['atendee_email'] => liam@test.com
['atendee_type'] => normal
)
)
表单布局
<h3>Attendees</h3>
<p>Please list all attendees. Not attendees marked as free, student or reviewing will need verification before the course date</p>
<table class="attendee-table">
<thead>
<tr>
<th class="fifteen">Remove</th>
<th class="thirty">Attendee Name</th>
<th class="thirty">Attendee Email</th>
<th class="twenty">Attendee Type</th>
<th class="five">Add</th>
</tr>
</thead>
<tbody>
<tr>
<td><a class="remove-attendee" href="#">Remove</a></td>
<td><input type="text" name="attendee[]['attendee_name']" class="attendee-name"></td>
<td><input type="text" name="attendee[]['attendee_email']" class="attendee-email"></td>
<td>
<select name="attendee[]['attendee-type']" class="attendee-type">
<option SELECTED value="normal">Normal</option>
<option value="reviewing">Reviewing</option>
<option value="student">Student</option>
<option value="free">Free</option>
</select>
</td>
<td class="centeralign">
<a href="#" class="add-attendee">+</a>
</td>
</tr>
</tbody>
</table>
<table class="add-margins">
<tr>
<td class="twenty bt">Sub Total:</td>
<td class="subtotal"></td>
<td class="fifty"></td>
<td class="ten"></td>
</tr>
</table>
关联的jQuery
$(document).on(
'click',
'.add-attendee',
function(e){
$('.attendee-table > tbody:last-child').append('<tr><td><a class="remove-attendee" href="#">Remove</a></td><td><input type="text" name="attendee[]["attendee_name"]" class="attendee-name"></td><td><input type="text" name="attendee[]["attendee_email"]" class="attendee-email"></td><td><select name="attendee[]["attendee-type"]" class="attendee-type"><option SELECTED value="normal">Normal</option><option value="reviewing">Reviewing</option><option value="student">Student</option></select></td><td class="centeralign"><a href="#" class="add-attendee">+</a></td></tr>');
e.preventDefault();
});
$(document).on(
'click',
'.remove-attendee',
function(e) {
$(this).closest('tr').remove();
calculate();
e.preventDefault();
});
$('.attendee-table').change(function() {
calculate();
});