从动态表单创建关联多层数组

时间:2017-01-08 09:33:36

标签: php jquery html

我有一个可以在这里看到的表单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();

        });

0 个答案:

没有答案