php - 允许用户使用 jquery 创建和提交最多 5 个文本框，并在 php 中将它们解析为一个数组？

Question

这可能吗？我希望用户发布一个包含 1-5 条数据的数组。

起初只会显示一个文本字段，但单击它旁边的“加号”图标后，它会在其下方创建另一个文本字段以供更多用户输入。

我还希望在文本框 2-5 旁边有一个删除图标，以便在必要时删除它们。

我的 JQuery 知识有限，我可以弄清楚如何将文本框附加到列表，但不能跟踪/删除它们。理想情况下，我还想将它们作为数组传递给 php，这样我就可以轻松地遍历它们。

<input type="text" size="15" maxlength="15" name="1"><img src="add.png" onclick="add();">
<!-- Below is hidden by default, and each one shows on click of the add image -->
<input type="text" size="15" maxlength="15" name="2"><img src="delete.png" onclick="delete(2);">
<input type="text" size="15" maxlength="15" name="3"><img src="delete.png" onclick="delete(3);">
<input type="text" size="15" maxlength="15" name="4"><img src="delete.png" onclick="delete(4);">
<input type="text" size="15" maxlength="15" name="5"><img src="delete.png" onclick="delete(5);">

Answer 1

jQuery clone() 对此非常方便。一个如何完成的小例子(关于 jsfiddle 的工作示例)

<ul>
    <li><input type="text" name="textbox[]" /></li>
</ul>
<input type="button" id="addTextbox" value="Add textbox" />
<script type="text/javascript">
$(function(){
    $('#addTextbox').click(function(){
        var li = $('ul li:first').clone().appendTo($('ul'));

        // empty the value if something is already filled in the cloned copy
        li.children('input').val('');
        li.append($('<button />').click(function(){
            li.remove();
            // don't need to check how many there are, since it will be less than 5.
            $('#addTextbox').attr('disabled',false);
        }).text('Remove'));

        // disable button if its the 5th that was added
        if ($('ul').children().length==5){
            $(this).attr('disabled',true);
        }
    }); 
});

</script>

对于服务器端部分，您可以通过 $_POST['textbox'] 执行 foreach() 循环