从动态表单中收集数据

时间:2015-11-09 19:01:54

标签: javascript php jquery html

这是opencart add product表单的一部分。

enter image description here

如果您要添加额外的产品属性,它会动态添加文本框和文本区域。

我设法复制表格并且有效。

HTML

<form method="post" action="#">
    <table class="table table-striped table-bordered table-hover" id="attribute">
        <thead>
            <tr>
                <td class="text-left">Attribute</td>
                <td class="text-left">Text</td>
                <td></td>
            </tr>
        </thead>
        <tbody>
        </tbody>
        <tfoot>
            <tr>
                <td colspan="2"></td>
                <td class="text-left">
                    <button onclick="addAttribute();" type="button" data-original-title="Add Attribute"><i class="fa fa-plus-circle">+</i></button>
                </td>
            </tr>
        </tfoot>
    </table>
    <input class="button" type="submit" value="Submit">
</form>

和Javascript

var attribute_row = 0;

function addAttribute() {
html = '<tr id="attribute-row' + attribute_row + '">';
html += '<td class="text-left" style="width: 20%;"><input type="text" name="product_attribute[' + attribute_row + '][name]" value="" placeholder="Attribute" class="form-control" /><input type="hidden" name="product_attribute[' + attribute_row + '][attribute_id]" value="" /></td>';
html += '<td class="text-left">';
html += '<div class="input-group"><textarea name="product_attribute[' + attribute_row + '][product_attribute_description][1][text]" rows="5" placeholder="Text" class="form-control"></textarea></div>';
html += '</td>';
html += '<td class="text-left"><button type="button" onclick="$(\'#attribute-row' + attribute_row + '\').remove();" data-toggle="tooltip" title="Remove" class="btn btn-danger"><i class="fa fa-minus-circle">-</i></button></td>';
html += '</tr>';
$('#attribute tbody').append(html);
attributeautocomplete(attribute_row);
attribute_row++;
}

function attributeautocomplete(attribute_row) {
$('input[name=\'product_attribute[' + attribute_row + '][name]\']').autocomplete({
    'source': function(request, response) {
        $.ajax({
            url: 'index.php?route=catalog/attribute/autocomplete&token=84b0e12cb7c03e1357354f27fe3fcd2d&filter_name=' + encodeURIComponent(request),
            dataType: 'json',
            success: function(json) {
                response($.map(json, function(item) {
                    return {
                        category: item.attribute_group,
                        label: item.name,
                        value: item.attribute_id
                    }
                }));
            }
        });
    },
    'select': function(item) {
        $('input[name=\'product_attribute[' + attribute_row + '][name]\']').val(item['label']);
        $('input[name=\'product_attribute[' + attribute_row + '][attribute_id]\']').val(item['value']);
    }
});
}

$('#attribute tbody tr').each(function(index, element) {
attributeautocomplete(index);
});

这是一个有效的演示https://jsbin.com/fozocojazi/edit?js,output

现在,我需要从php中的上表中收集数据。你能建议我该怎么办?

1 个答案:

答案 0 :(得分:1)

尝试使用array_keys()

$keys = array_keys($_POST);

foreach ($keys as $key) {
    // do something with the data
    echo $_POST[$key];
}