javascript - 使用动态创建的输入字段插入多条记录

Question

基本上这就是我在将新记录保存到我的数据库时使用 eloqouent 所做的(请参阅下文)

$item = new item();
$item->name = $request->name;
$item->description = $request->description;
$item->rating = $request->rating;
$item->save();

但我遇到了动态创建输入字段的场景，所以这是我的脚本

$(document).on("click", "#create_input", function(){
    $("form fieldset").append('<input type="text" name="name" value="" /><input type="text" name="description" value="" /><input type="text" name="rating" value="" />');
});

我的默认表单是(引用下文)

<button id="#create_input">Create new field</button>
<form action="{{ url('/item/add') }}" method="post">
    <input type="hidden" name="_token" value="{{ csrf_token() }}">
    <fieldset>
        <input type="text" name="name" value="" />
        <input type="text" name="description" value="" />
        <input type="text" name="rating" value="" />
    </fieldset>
    <button>Save</button>
</form>

因此，如果用户单击“创建新字段”按钮，另一个输入字段(名称、描述、评级)将被添加到表单字段集中。

那么我如何保存它，就像同时保存 2 条记录一样(假设我有 2 组名称、描述、评级的字段集)？取决于当前存在于表单中的字段数，然后还取决于插入的数量，例如我有 4 个评分、描述、评分字段集，然后将插入 4 个记录。有什么想法吗？

Answer 1

使用输入数组。并使用循环。定义字段，如 -

<fieldset>
    <input type="text" name="name[]" value="" />
    <input type="text" name="description[]" value="" />
    <input type="text" name="rating[]" value="" />
</fieldset>

jQuery-

$(document).on("click", "#create_input", function(){
    $("form fieldset").append('<input type="text" name="name[]" value="" /><input type="text" name="description[]" value="" /><input type="text" name="rating[]" value="" />');
});

当表单被发布时，你会得到类似于 -

的值

array(
   name -> array(
              0 -> 'aaa',
              1 -> 'bbb',
              2 -> 'ccc',
           )
   description -> array(
              0 -> 'aaa',
              1 -> 'bbb',
              2 -> 'ccc',
           )
...........
)

然后您可以遍历它们并相应地保存它们。