Question

我使用jQuery生成两个动态字段。每对字段都显示在页面上，可以有多个实例。在提交（不是ajax）时，每对字段都会与stack.yaml一起保存到自己的表格行中。

HTML代码中有两种形式，输入两个值，用户点击次数和添加链接＆＃39;然后jQuery创建两个隐藏字段（这些是提交的字段），输入的数据在视觉上显示（追加）到Auth::id()。原始字段变空，此过程可以重复...

我正努力创建一个由eloquent识别的数组，以便多次保存数据。

我收到错误＆＃39;未定义索引：链接＆＃39;或者jQuery中的第二个输入行。

叶片/ HTML：

#link-list

的jQuery / JavaScript的

{!! Form::open(['route' => ['multiple.store'], 'method' => 'post', 'role'=> 'form', 'class' => 'form']) !!}

    <ul id="link-list">
        <!-- append new rows -->
    </ul>

    <div id="newlink" class="form-inline">
        <div class="form-group">
            {!! Form::text('prestore', null, ['placeholder' => 'Store name', 'class' => 'form-control']) !!}
        </div>
        <div class="form-group">
            {!! Form::text('prelink', null, ['placeholder' => 'Link / URL', 'class' => 'form-control']) !!}
        </div>
        <div class="form-group">
            <button class="btn btn-primary submit new-row" type="button">Add store link</button>
        </div>
    </div>

    <br/><br/>

    {!! Form::submit('Submit rows', ['class' => 'btn btn-success submit']) !!}

{!! Form::close() !!}

控制器：

$(document).on('click', '.new-row', function() {
    var store = $('#newlink input[name=prestore]').val();
    var link = $('#newlink input[name=prelink]').val();
    console.log(store, link);
    $('<li class="not-saved">' +
            '<a href="'+link+'">'+store+'</a>' +
            '<input type="hidden" name="rows[][link]" value="' + link + '">' +
            '<input type="hidden" name="rows[][store]" value="' + store + '">' +
        '</li>').appendTo('#link-list').hide().fadeIn(280);
    $('input[name=prestore]').val('');
    $('input[name=prelink]').val('');
});

Answer 1

您的JavaScript元素名称中存在一个问题：

<input type="hidden" name="rows[][link]" value="' + link + '">
<input type="hidden" name="rows[][store]" value="' + store + '">

这将生成$rows，如：

[
    0 => ["link" => "foo"], 
    1 => ["store" => "bar"]
]

但是您的PHP代码期望$rows如下：

[
    0 => [
        "link" => "foo",
        "store" => "bar"
    ], 
    1 => [
        "link" => "foo",
        "store" => "bar"
    ]
]

生成期望值的一种方法是在元素中指定行键：

<input type="hidden" name="rows[0][link]" value="' + link + '">
<input type="hidden" name="rows[0][store]" value="' + store + '">
<input type="hidden" name="rows[1][link]" value="' + link + '">
<input type="hidden" name="rows[1][store]" value="' + store + '">

显然，根据您提供的代码，这有点棘手，如果您需要帮助，请告诉我。

Answer 2

如果这对其他人有帮助，那就是使用Ben的正确答案所需的jQuery：

var count = 0;

$(document).on('click', '.new-row', function() {

    count++;

    var store = $('#newlink input[name=prestore]').val();
    var link = $('#newlink input[name=prelink]').val();

    if ($('input[name=prestore]').val().length > 2 && $('input[name=prelink]').val().length > 2) {

        $('<li class="not-saved">' +
            '<a href="' + link + '">' + store + '</a>' +
            '<input type="hidden" name="rows[' + count + '][store]" value="' + store + '">' +
            '<input type="hidden" name="rows[' + count + '][link]" value="' + link + '">' +
            '</li>').appendTo('#link-list').hide().fadeIn(280);

        $('input[name=prestore]').val('');
        $('input[name=prelink]').val('');

    } else {

        console.log('At least 3 characters for each field required!');

    }

});

我还添加了一点点验证，因此它不会附加空字段

Answer 3

我同意这是你的元素名称的问题，但不同意Ben的解决方案。您可以保持JavaScript原样并在PHP中处理：

{{1}}

从Laravel 5中的动态表单中将多行保存到数据库

3 个答案: