本文讲解如何在包含多个相似表单的页面中，使用 jquery 精准获取每个表单的独立数据并发送 ajax 请求，避免因重复 id 导致仅第一个表单生效的问题。核心方案是用 `$(this).find()` 定位当前提交表单内的元素。
在动态渲染多条内容（如卡片列表）的页面中，为每条记录嵌入独立编辑表单是一种常见需求。但若所有表单都使用相同 id（例如 zuojiankuohaophpcntextarea id="text">），jQuery 的 $("#text").val() 将始终只取到文档中第一个匹配元素的值——这正是原问题中“仅第一个 textarea 被更新”的根本原因。
HTML 规范明确要求 id 属性必须全局唯一，因此解决方案的第一步是：移除所有重复的 id，改用 name 属性配合类选择器进行上下文定位。
✅ 正确的 HTML 结构（关键修改）
<div class="row">
<?php
$query = $veri->selectToplu('contents_temp');
foreach ($query as $row) { ?>
<span class="col-md-3 mb-2">
<div class="card">
<?php if (isset($row['video'])): ?>
<video controls style="height: 187px;" src="<?= htmlspecialchars($row['video']) ?>" class="bs-card-video"></video>
<?php else: ?>
<img class="card-img-top" style="height: 187px;" src="<?= htmlspecialchars($row['img1']) ?>">
<?php endif; ?>
<div class="card-body text-center">
<span deleteid="<?= $row['id'] ?>" class="btn btn-sm btn-danger delete" style="position:absolute; right:0; top:0;">x</span>
<!-- 移除所有 id，添加统一 class="form" -->
<form method="POST" class="form">
<textarea name="text" class="form-control" rows="3" style="height: 7rem;"><?= htmlspecialchars($row['text']) ?></textarea>
<input type="hidden" name="id" value="<?= $row['id'] ?>">
<button type="submit" class="btn btn-primary btn-sm mt-1">Güncelle</button>
<!-- 使用 class="status" 替代 id="status"，确保每个状态提示独立 -->
<div class="status text-success small mt-1"></div>
</form>
</div>
</div>
</span>
<?php } ?>
</div>⚠️ 注意事项：使用 htmlspecialchars() 输出 PHP 变量，防止 XSS 攻击；所有 <form> 添加 class="form" 作为统一委托目标；状态提示区改为 <div class="status">，避免 ID 冲突；移除 onclick="buton();" 等冗余内联事件，交由 jQuery 统一管理。
✅ 正确的 jQuery 逻辑（事件委托 + 上下文查找）
$(document).ready(function() {
// 监听所有 .form 的 submit 事件（非 click！）
$('.form').on('submit', function(e) {
e.preventDefault(); // 阻止默认表单提交
// ✨ 关键：使用 $(this) 指向当前被提交的表单，再 find 其内部字段
const $form = $(this);
const text = $form.find('[name="text"]').val().trim();
const id = $form.find('[name="id"]').val();
const $status = $form.find('.status');
// 简单校验
if (!text || !id) {
$status.html('Lütfen tüm alanları doldurun.').removeClass('text-success').addClass('text-danger').show();
return;
}
// 发送 AJAX 请求
$.post('../../app/modules/content/update.php', {
text: text,
id: id
}, function(response) {
$status.html('Güncellendi ✓').removeClass('text-danger').addClass('text-success').show();
// 可选：3秒后自动隐藏提示
setTimeout(() => $status.fadeOut(300), 3000);
}).fail(function() {
$status.html('Hata oluştu! Lütfen tekrar deneyin.').removeClass('text-success').addClass('text-danger').show();
});
});
});? 为什么这样更可靠？
- $(this) 在事件回调中始终指向触发事件的 DOM 元素（即当前 <form>），不受页面结构影响；
- .find() 是相对查找，确保只读取该表单内的字段，彻底规避 ID 重复陷阱；
- 使用 submit 事件而非 click，兼容回车提交、无障碍访问等场景；
- 错误处理与用户反馈闭环，提升交互健壮性。
? 进阶建议
- 若卡片数量极大（如 >100 条），可考虑使用事件委托（$(document).on('submit', '.form', ...)）提升性能；
- 后端 update.php 应严格校验 id 和 text 参数，并返回 JSON 格式响应（如 { "success": true, "message": "OK" }），前端据此做精细化反馈；
- 可为正在提交的按钮添加 loading 状态（如禁用 + 加载图标），防止重复点击。
通过以上重构，每个卡片的表单都能独立、准确地提交自身数据，真正实现“一页面多数据并行更新”。
