循环生成多输入框无法批量传值至PHP的问题排查与修复

问题根源 #

1. 所有数量输入框共用同一个name="cantidad"，jQuery的.val()只会返回第一个匹配元素的值
2. PHP端仅接收单个cantidad值，无法对应每个商品的购买数量，导致用同一数量乘所有商品价格，逻辑完全错误

分模块修复代码 #

1. 商品渲染PHP文件（修正输入框命名与HTML结构）

把输入框name改成数组格式，绑定商品数据库ID（比递增序号更可靠，避免数据库顺序变化导致对应错误），同时修复标签嵌套错误：

<tbody>
    <?php
    $conexion  = mysqli_connect("localhost", "root", "", "llanoponte");
    $sql       = "SELECT * FROM libros";
    $resultado = $conexion->query($sql);

    if ($resultado->num_rows > 0) {
        while ($row = $resultado->fetch_assoc()) {
            $valor = $row['Precio'];
            // 用商品ID作为数组键，确保数量与商品一一对应
            echo "<tr>
                    <td>{$row['Titulo']}</td>
                    <td>{$row['Autor']}</td>
                    <td>{$row['Genero']}</td>
                    <td>{$valor} €</td>
                    <td><input type='number' name='cantidad[{$row['id']}]' class='cantidad' value='0' min='0'></td>
                  </tr>";
        }
    } else {
        echo "<tr><td colspan='5'>Sin resultados</td></tr>";
    }
    
    $conexion->close();
    ?>
</tbody>

补充：给输入框加min='0'防止输入负数，同时修正了原代码中标签的嵌套混乱问题

2. AJAX传值脚本（收集所有输入框数据）

遍历所有数量输入框，整理成「商品ID-购买数量」的键值对后发送：

function Datos() {
    let cantidadData = {};
    $(".cantidad").each(function() {
        // 从name属性中提取商品ID
        const libroId = $(this).attr("name").match(/\[(\d+)\]/)[1];
        // 空值默认设为0
        cantidadData[libroId] = $(this).val() || 0;
    });

    $.ajax({
        url: 'total.php',
        type: 'post',
        data: {cantidades: cantidadData},
        success: function (respuesta) {
            $('#resultados').html(respuesta);
        }
    })
}

3. 总价计算PHP文件（匹配商品ID计算总价）

接收数量数组，循环商品时根据ID匹配对应的购买数量，计算正确总价：

include('conexiones.php');

// 接收数量数组，默认空数组避免报错
$cantidades = $_POST['cantidades'] ?? [];
$conexion  = mysqli_connect("localhost", "root", "", "llanoponte");
// 只查询需要的字段，提升效率
$sql       = "SELECT id, Precio FROM libros";
$resultado = $conexion->query($sql);

if ($resultado->num_rows > 0) {
    $total = 0;

    while ($row = $resultado->fetch_assoc()) {
        $libroId = $row['id'];
        // 确保数量是整数，无对应值时设为0
        $cantidad = isset($cantidades[$libroId]) ? intval($cantidades[$libroId]) : 0;
        $total += $row['Precio'] * $cantidad;
    }

    echo "<p>{$total} €</p>";

} else {
    echo 'Sin resultados';
}

$conexion->close();

4. 总价展示区域（修复HTML语法错误）

修正未闭合的</div>标签，调整jQuery脚本位置确保加载顺序正确：

<div class="texto2">
    <h1>Total</h1>
    <div id="resultados"></div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script>

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