Laravel中获取输入框ID值并传入路由实现产品更新

你当前按钮跳转使用的是后端渲染的固定{{$id}}，无法获取用户输入的ID值。要实现需求，可通过以下两种方式处理：

方案一：JavaScript动态拼接跳转URL #

修改Blade视图，通过JS实时获取输入框的ID值，再拼接成目标路由：

<div class="modal-body">
    <label for="product-id">ID:</label><br/>
    <input type="text" id="product-id" name="id" placeholder="Enter the product ID" required><br/>
</div>
<div class="modal-footer">
    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
    <button type="button" onclick="navigateToEdit()" class="btn btn-primary">Save changes</button>
</div>

<script>
function navigateToEdit() {
    const productId = document.getElementById('product-id').value;
    if (productId) {
        location.href = `/produtos/editar/${productId}`;
    } else {
        alert('请输入产品ID');
    }
}
</script>

方案二：表单提交（符合RESTful规范） #

由于你的update方法对应POST路由，更推荐用表单提交触发更新，直接传递所有表单数据：

修改Blade视图为表单结构 #

<form action="{{ route('alterar_produto', ['id' => '__TEMP_ID__']) }}" method="POST" id="update-form">
    @csrf
    <div class="modal-body">
        <label for="product-id">ID:</label><br/>
        <input type="text" id="product-id" name="id" placeholder="Enter the product ID" required><br/>
        <!-- 补充其他产品字段输入框，例如： -->
        <label for="nome">Nome:</label><br/>
        <input type="text" name="nome" placeholder="Enter product name" required><br/>
        <!-- 其余字段如custo、preco等同理添加 -->
    </div>
    <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="submit" class="btn btn-primary">Save changes</button>
    </div>
</form>

<script>
document.getElementById('update-form').addEventListener('submit', function(e) {
    const productId = document.getElementById('product-id').value;
    if (!productId) {
        e.preventDefault();
        alert('请输入产品ID');
        return;
    }
    // 动态替换表单action中的占位符为输入的ID
    this.action = this.action.replace('__TEMP_ID__', productId);
});
</script>

Controller代码优化 #

注意：通常不建议修改模型的id字段，若需求是根据输入ID找到对应产品并更新其他字段，可调整查询逻辑：

public function update(Request $request, $id){
    // 若需根据输入框的ID查询，替换为以下代码
    $produto = Produto::findOrFail($request->id);
    $produto->update([
        // 移除'id' => $request->id，避免修改主键导致数据混乱
        'Nome' => $request->nome,
        'custo' => $request->custo,
        'preco' => $request->preco,
        'quantidade' => $request->quantidade,
        'Marca' => $request->marcas,
        'Voltagem' => $request->Voltagem,
        'Descricao' => $request->Descricao,
    ]);
    return "Produto Atualizado com Sucesso!";
}

路由说明 #

现有路由已配置GET类型的edit（需自行实现该方法返回编辑视图）和POST类型的update，方案一跳转将触发edit方法，方案二表单提交将直接触发update完成更新。

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