动态表单单条数据提交求助：仅发送对应ID的表单数据

问题根源 #

当前reg_tarefa()函数会全局获取所有id_tareff[]和obsposic[]元素的值，所以无论点击哪个按钮，都会发送所有表单的数据。要解决这个问题，需要让函数仅获取点击按钮所在表单内的数据。

修改步骤 #

1. 修改按钮的点击事件，传递当前按钮对象 #

在生成表单的JS代码中，把按钮的onclick属性改为传递当前按钮：

// 原按钮代码
<button type="button" class="btn-wide btn btn-primary" onclick="reg_tarefa();"> TRATADO <i class="metismenu-icon pe-7s-paper-plane"></i></button>

// 修改后代码
<button type="button" class="btn-wide btn btn-primary" onclick="reg_tarefa(this);"> TRATADO <i class="metismenu-icon pe-7s-paper-plane"></i></button>

2. 重写reg_tarefa函数，仅获取当前表单的数据 #

修改函数逻辑，通过传入的按钮元素定位到它所在的表单，然后只提取该表单内的输入值：

function reg_tarefa(btn) {  
  // 找到当前按钮所在的表单容器
  const currentForm = $(btn).closest('.instarefa');
  
  // 仅获取当前表单内的ID和备注内容
  const id_tareff = currentForm.find("input[name='id_tareff[]']").val();
  const obsposic = currentForm.find("textarea[name='obsposic[]']").val();

  // 构造请求数据（如果后端要求接收数组格式，可改为数组包裹）
  const dadosajax = {
    'id_tareff': id_tareff,
    'obsposic': obsposic
    // 若后端必须接收数组，替换为：
    // 'id_tareff[]': [id_tareff],
    // 'obsposic[]': [obsposic]
  };

  $.ajax({
    url: 'regtarefa.php',
    type: 'POST',
    cache: false,
    data: dadosajax,
    success: function(result2){ 
      // 可在此添加提交成功后的操作，比如提示、隐藏当前表单等
      console.log('提交成功:', result2);
    },
    error: function(xhr, status, error) {
      console.error('提交失败:', error);
    }
  });
}

3. 可选优化：使用事件委托替代内联点击事件（推荐） #

如果不想用内联onclick，可以改成事件委托的方式，更符合jQuery最佳实践：

• 去掉生成按钮时的onclick属性
• 添加以下事件绑定代码：

// 页面加载完成后绑定事件
$(document).on('click', '.instarefa .btn-primary', function() {
  reg_tarefa(this);
});

// 此时reg_tarefa函数逻辑和步骤2一致

关键原理 #

• $(btn).closest('.instarefa')：通过点击的按钮向上查找最近的instarefa类元素（即当前按钮所在的表单），实现精准定位。
• 仅在目标表单范围内查找输入元素，确保只提交当前点击按钮对应的单条数据，而非全局所有表单的数据。

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