如何使用Ajax获取动态生成模态框表单数据 解决重复ID提交异常问题

你遇到的问题核心是HTML规范要求id属性全局唯一，你循环生成的所有模态框里的提交按钮、表单输入项都复用了相同的id，jQuery的id选择器默认只会匹配到第一个符合条件的元素，所以无论点击哪个按钮，永远只会读取第一个模态框的表单数据。

你可以按照以下步骤修改代码，不需要特意给按钮设置唯一id也能解决问题，同时避免所有表单元素id重复导致的取值错误：

第一步：修改PHP生成的HTML代码 #

把提交按钮的id替换为类选择器，同时给按钮添加自定义属性关联对应支付ID（如果后续需要用到支付ID的话可以直接读取）：

<div id="feedback">
    <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#feedback-modal-<?php echo $item['payment_id']; ?>">Add Payment</button>
</div>
<div id="feedback-modal-<?php echo $item['payment_id']; ?>" class="modal fade" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h3>Add Payment</h3>
            </div>
            <div class="modal-body">
                <form class="feedback" name="feedback" method="POST">
                    <strong>Full Name</strong>
                    <br>
                    <input type="text" name="fullName" class="input-xlarge" value="<?php echo $item['full_name'] ?? 'Unknown';?>">
                    <br><br>
                    <strong>Subtotal</strong>
                    <br>
                    <input type="text" name="subtotal" class="input-xlarge" value="<?php echo $item['subtotal'] ?? '0';?>">
                    <br><br>
                    <strong>Payment Method</strong>
                    <br>
                    <select name="paymentMethod">
                        <option value="Cash1">Cash1</option>
                        <option value="Cash2">Cash2</option>
                        <option value="Cash3">Cash3</option>
                    </select>
                    <br><br>
                    <strong>Received by</strong>
                    <br>
                    <input type="text" name="receivedBy" class="input-xlarge" value="<?php echo $item['received_by'] ?? 'Unknown';?>">
                </form>
            </div>
            <div class="modal-footer">
                <!-- 把id换成类，加自定义属性存支付ID -->
                <button class="btn btn-success payment-submit-btn" name="payment-btn" data-payment-id="<?php echo $item['payment_id']; ?>">Send</button>
                <a href="#" class="btn" data-dismiss="modal">Close</a>
            </div>
        </div>
    </div>
</div>

第二步：修改Ajax提交逻辑 #

通过当前点击的按钮定位所属的模态框，仅在当前模态框内读取表单数据，不会读取到其他模态框的内容：

$(document).ready(function () {
    // 使用类选择器+事件委托，适配动态生成的按钮元素
    $(document).on('click', '.payment-submit-btn', function () {
        // 拿到当前点击的按钮实例
        const $currBtn = $(this);
        // 向上查找当前按钮所属的模态框容器
        const $currModal = $currBtn.closest('.modal');
        // 仅在当前模态框内查找表单元素取值
        const submitData = {
            contactFrmSubmit: 1,
            fullName: $currModal.find('[name="fullName"]').val(),
            subtotal: $currModal.find('[name="subtotal"]').val(),
            paymentMethod: $currModal.find('[name="paymentMethod"]').val(),
            receivedBy: $currModal.find('[name="receivedBy"]').val()
        };
        $.ajax({
            type: "POST",
            url: "admin-server.php",
            // 直接传对象，jQuery会自动处理参数转义，比字符串拼接更稳妥
            data: submitData,
            success: function (message) {
                $("#feedback").html(message);
                // 隐藏当前触发的模态框
                $currModal.modal('hide');
            },
            error: function () {
                alert("Error");
            }
        });
    });
});

如果确实需要给按钮设置唯一ID，直接按照payment-btn-<?php echo $item['payment_id']; ?>的格式生成即可，上述方案已经可以完全解决你的问题。

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