使用jQuery Validation插件的Ajax表单重复提交旧值复用问题求助

你的核心问题出在两个地方：

• 提前在点击事件中获取了输入框的值，后续submitHandler始终复用这个旧值，没有实时读取最新输入内容。
• 每次点击提交按钮都重新初始化jQuery Validation插件，导致插件内部状态异常，无法正确跟踪输入框的新值。

HTML（保持不变） #

<form id="org-684" class="org">
    <input class="org-name" type="text" name="name" value="" required>
    <button type="submit" class="updateOrg">Update</button>
</form>

JavaScript（关键修正） #

$(document).ready(function(){
    // 针对每个.org表单初始化验证插件，只执行一次
    $('.org').each(function() {
        var $form = $(this);
        // 从表单ID中提取org id
        var id = $form.attr('id').split('-')[1];
        
        $form.validate({
            // 表单验证规则，保留required校验
            rules: {
                name: {
                    required: true
                }
            },
            submitHandler: function(form) {
                // 实时获取当前输入框的最新值
                var org_name = $form.find('.org-name').val();
                
                $.ajax({
                    type: "POST",
                    url: "update.php",
                    data: {
                        id: id,
                        org_name: org_name
                    },
                    success: function(response){
                        var result = jQuery.parseJSON(response);
                        $form.find('.org-name').val(result.name);
                    },
                    error: function() {
                        // 可在此添加错误提示逻辑，比如弹出失败提示
                    },
                    cache: false
                });
                return false; // 阻止表单默认提交行为
            }
        });
    });
})

PHP（补充更新逻辑） #

你原代码仅查询数据库返回旧数据，未执行更新操作，补充完整逻辑并加入SQL注入防护：

<?php
// 假设$mysqli是已初始化的数据库连接实例
$orgId = $_POST['id'];
$orgName = $_POST['org_name'];

// 执行数据库更新（使用预处理语句防止SQL注入）
$updateStmt = $mysqli->prepare("UPDATE org SET name = ? WHERE id = ?");
$updateStmt->bind_param("si", $orgName, $orgId);
$updateStmt->execute();
$updateStmt->close();

// 查询最新数据返回给前端
$selectStmt = $mysqli->prepare("SELECT name FROM org WHERE id = ?");
$selectStmt->bind_param("i", $orgId);
$selectStmt->execute();
$result = $selectStmt->get_result();
$row = $result->fetch_assoc();

$res = array(
    'name' => $row['name']
);
echo json_encode($res);
$selectStmt->close();
?>

• 验证插件初始化时机：页面加载时一次性初始化所有.org表单的验证逻辑，避免重复初始化导致的插件状态混乱。
• 实时获取输入值：在submitHandler内部实时读取输入框的最新值，确保每次提交都使用当前输入的内容。
• 修复PHP逻辑：补充数据库更新操作，同时使用预处理语句杜绝SQL注入风险。
• 移除冗余点击事件：依靠Validation插件的submitHandler处理表单提交，无需单独绑定按钮点击事件，避免逻辑冲突。

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