使用ajax保存多个输入字段

Question

我正在尝试使用 ajax 即时保存输入字段的值。我正在使用 Laravel 框架来制作我的应用程序。下面是我用来创建字段的代码。问题是每个表行上的输入字段名称都是相同的，因此当使用 ajax 提交表单时，只有第一行的值被推送。有人可以指出我如何解决这个问题的正确方向吗？我应该为输入字段指定唯一的名称吗？如果是这样，我如何在控制器中检索这些值？

@if($orsrg->aant_gelev = 1)

  <tr id="{{ $orderregel->regel }}">

     <td>{{ $orsrg->artcode }}</td>

     <td>{{ $orsrg->oms45 }}</td>

     <td>

         <form class='addtagform' method='post'>

           <input type="hidden" name="_token" id="token" value="{{ csrf_token() }}">

           <input type='hidden' name='ordernr[]' value='{{ $orkrg->ordernr }}'>

           <input type='hidden' name='regel[]' value='{{ $orsrg->regel }}'>

           <input class="form-control form-control-sm" type='text' id="tag" name="tag" class='form-control' maxlength='24' value="{{ $orderregel->tags()->pluck('tag')->first() }}"></form></td>

  </tr> 

@endif

我使用的ajax / jquery如下（它在更改后1秒将值保存到数据库）：

<script type="text/javascript">

$(document).ready(function () {

    var timeoutId;

    $('form input, form textarea').on('input propertychange change', function () {

        console.log('Textarea Change');

        clearTimeout(timeoutId);

        timeoutId = setTimeout(function () {

            saveToDB();

        }, 1000);

    });

    function saveToDB()

    {

        console.log('Saving to the db');

        form = $('.addtagform');

        var tag = $('input[name=tag]', this.form).val();

        var ordernr = $('input[name=ordernr]', this.form).val();

        var regel = $('input[name=regel]', this.form).val();

        $.ajax({

            url: "/warehouse/tag",

            headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},

            type: "POST",

            data: {tag: tag, ordernr: ordernr, regel: regel},

            success: function (data) {

                var jqObj = jQuery(data);

                var d = new Date();

                $('.form-status-holder').html('Saved! Last: ' + d.toLocaleTimeString());

            },

        });

    }

很感谢任何形式的帮助。提前致谢！

Answer 1

满足您的要求的一种更简单、更容易的方法是使用 jQuery 的serialize()函数 - 您在表单上调用它，它会自动将所有表单数据转换为发送到服务器所需的编码格式。例如data: form.serialize()