Laravel表单提交异常：JS生成的隐藏输入值无法传递至后端

1. 隐藏输入框未正确创建（核心问题） #

你当前创建隐藏输入框的代码var hidden = $('');是空的，没有生成合法的<input type="hidden">元素，且未设置name属性——表单提交时只有带name的字段才会被传递到后端。修正代码如下：

var selectName = $('select').attr('name');
// 正确创建隐藏输入框并配置必要属性
var hidden = $('<input type="hidden">');
hidden.attr('name', selectName); // 必须设置name属性才能被表单提交
hidden.val($('select').val());
hidden.insertAfter($('select'));

2. 按钮元素生成不合法 #

你生成按钮的代码var btn = $('' + $(this).text() + '');没有创建有效的按钮DOM元素，应明确生成带类名的按钮：

var btn = $('<button type="button" class="btn">' + $(this).text() + '</button>');

3. 选中状态判断逻辑错误 #

option的选中状态需用:selected选择器，而非:checked：

if ($(this).is(':selected')) btn.addClass('on');

4. 移除原select避免提交冲突 #

原select元素仍在表单中时，会和同名隐藏输入框产生提交冲突，建议生成隐藏输入框后移除原select：

$('select').remove();

5. 前端验证值是否正确设置 #

点击按钮后可通过控制台确认隐藏输入框的状态，确保值已正确更新：

$(document).on('click', '.btn', function() {
    $('.btn').removeClass('on');
    $(this).addClass('on');
    var hiddenInput = $('input[name="' + selectName + '"]');
    hiddenInput.val($(this).text());
    // 控制台打印验证
    console.log('隐藏输入框name:', hiddenInput.attr('name'));
    console.log('隐藏输入框当前值:', hiddenInput.val());
});

Laravel后端验证 #

提交后可在控制器中打印所有请求参数，确认字段是否被接收：

// 控制器对应方法内
dd($request->all());

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