使用AJAX保存多个输入字段的问题（Laravel框架）

你遇到的核心问题确实是输入字段名称重复导致的：当多个表单行的tag、ordernr等字段使用相同name属性时，jQuery选择器$('input[name=tag]')只会匹配到DOM中的第一个元素，所以AJAX提交时永远只会拿到第一行的值。下面是具体的解决思路和代码调整方案：

1. 给输入字段设置唯一标识 #

我们可以利用每行唯一的regel值（从Blade代码里的id="{{ $orderregel->regel }}"能看出这是行的唯一标识），给每个表单的input字段添加带唯一键的name属性，这样既不会冲突，也方便后端识别对应行的数据。

修改你的Blade表单代码：

@if($orsrg->aant_gelev == 1) {{-- 注意这里你写的是=，应该是==判断 --}}
<tr id="{{ $orderregel->regel }}"> 
    <td>{{ $orsrg->artcode }}</td> 
    <td>{{ $orsrg->oms45 }}</td> 
    <td> 
        <form class='addtagform' method='post'> 
            @csrf {{-- 用Laravel内置指令替代手动写token，更安全简洁 --}}
            <input type='hidden' name='ordernr[{{ $orsrg->regel }}]' value='{{ $orkrg->ordernr }}'> 
            <input type='hidden' name='regel[{{ $orsrg->regel }}]' value='{{ $orsrg->regel }}'> 
            <input class="form-control form-control-sm" 
                   type='text' 
                   name="tag[{{ $orsrg->regel }}]" 
                   maxlength='24' 
                   value="{{ $orderregel->tags()->pluck('tag')->first() }}">
        </form>
    </td> 
</tr> 
@endif

这里把每个字段的name改成了tag[唯一regel值]的形式，确保每行的字段都是唯一的。

2. 调整AJAX逻辑，针对当前表单获取值 #

之前的saveToDB()函数没有明确指向当前触发输入事件的表单，导致全局选择器拿错数据。我们需要把当前表单作为参数传入函数，精准获取该行的字段值：

修改你的AJAX/JQuery代码：

<script type="text/javascript"> 
$(document).ready(function () { 
    var timeoutId; 
    // 监听每个addtagform内的输入变化
    $('.addtagform input').on('input propertychange change', function () { 
        console.log('Input field changed'); 
        clearTimeout(timeoutId); 
        // 获取当前输入所在的表单
        var currentForm = $(this).closest('.addtagform');
        timeoutId = setTimeout(function () { 
            saveToDB(currentForm); // 将当前表单传入保存函数
        }, 1000); 
    }); 

    function saveToDB(form) { 
        console.log('Saving row data to database'); 
        // 从当前表单中精准获取对应字段的值
        var regel = form.find('input[name^="regel["]').val();
        var tag = form.find(`input[name="tag[${regel}]"]`).val(); 
        var ordernr = form.find(`input[name="ordernr[${regel}]"]`).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 d = new Date(); 
                $('.form-status-holder').html('Saved! Last: ' + d.toLocaleTimeString()); 
            }, 
        }); 
    } 

    $('.addtagform').submit(function (e) { 
        saveToDB($(this)); // 提交时也传入当前表单
        e.preventDefault(); 
    }); 
}); 
</script>

关键调整点：

• 用$(this).closest('.addtagform')锁定当前输入所在的表单，避免全局选择错误
• 通过regel值精准定位当前行的字段

3. 控制器中获取值的方式 #

因为每次AJAX请求只提交单行的数据，所以在控制器里可以直接通过请求对象获取单个值：

public function saveTag(Request $request)
{
    $tag = $request->input('tag');
    $ordernr = $request->input('ordernr');
    $regel = $request->input('regel');

    // 执行你的数据库操作，比如更新对应orderregel的tag
    Orderregel::where('ordernr', $ordernr)
              ->where('regel', $regel)
              ->update(['tag' => $tag]);

    return response()->json(['status' => 'success']);
}

如果需要批量处理（比如一次性提交多行），可以把前端AJAX的data改成数组格式，后端用$request->input('tag')拿到所有行的tag数组，但根据你的需求（实时保存单行输入），单行提交的方式更合适。

内容的提问来源于stack exchange，提问作者Cryptolacha