将事件处理程序附加到在循环内创建的表单

Posted 2023-05-08

【中文标题】将事件处理程序附加到在循环内创建的表单

【英文标题】：Attaching event handlers to form created inside a loop

【发布时间】：2021-04-25 01:32:45

【问题描述】：

我有多个表单可以将数据发送到数据库。一个在循环内创建，一个在循环外。我已经使用 AJAX 将该数据发送到数据库。

在循环外的表单中，AJAX正常工作，无需刷新页面即可将数据发送到数据库。但是在循环内的表单中，我只能发送一次数据。第二次刷新页面。

这是循环外的第一种形式：

<!-- main from for post data out the loop -->
<form id="PostFormData" method="post" enctype="multipart/form-data">
  <input type="file" name="image[]">
  <input type="text" name="Post">
  <button>done</button>
</form>

这是此表单的 AJAX 代码

$("form#PostFormdata").submit(function(e) 
  e.preventDefault();
  var formData = new FormData(this);
  $.ajax(
    url: 'Post/sendPost.php',
    type: 'POST',
    data: formData,
    success: function(data) 
      document.getElementById("ajaxPost").innerhtml = data;
    ,
    cache: false,
    contentType: false,
    processData: false
  );
);

这是循环内的第二种形式

<!-- form inside the loop for comment data -->
<?php for ($i = 0; $i < 1000; $i++)  ?>
  <form id="CommentFormData" method="post" enctype="multipart/form-data">
    <input type="file" name="commentImage">
    <input type="text" name="commentValue">
    <button>done</button>
  </form>
<?php  ?>

这是循环表单的 AJAX 代码

$("form#CommentFormData").submit(function(e) 
  e.preventDefault();
  var formData = new FormData(this);

  $.ajax(
    url: 'Post/sendComment.php',
    type: 'POST',
    data: formData,
    success: function(data) 
      document.getElementById("InsidePost").innerHTML = data;
    ,
    cache: false,
    contentType: false,
    processData: false
   );
 );

【问题讨论】：

您不能拥有多个具有相同 ID 的表单（或任何其他 html 元素）。 javascript 无法区分它们。它只会找到第一个。改用类

【参考方案1】：

您在循环中生成的表单的问题是它们都具有相同的id。该值必须是唯一的。因此，事件处理程序只绑定到第一个，所有其他的不使用您提供的 AJAX 逻辑。

要解决此问题，请在所有表单上使用通用 class - 包括 PHP 循环之外的表单。这样页面中的所有表单都将使用相同的处理程序，并且您的 JS 将更加简洁。试试这个：

$("form.comment-form-data").submit(function(e) 
  e.preventDefault();
  var formData = new FormData(this);
  
  $.ajax(
    url: 'Post/sendComment.php',
    type: 'POST',
    data: formData,
    success: function(data) 
      $("#InsidePost").html(data);
    ,
    cache: false,
    contentType: false,
    processData: false
  );
);

<!-- form inside the loop for comment data -->
<?php for ($i = 0; $i < 1000; $i++)  ?>
  <form class="comment-form-data" method="post" enctype="multipart/form-data">
    <input type="file" name="commentImage">
    <input type="text" name="commentValue">
    <button>done</button>
  </form>
<?php  ?>

另外，顺便说一句，我假设您只是将 1000 个 form 元素添加到 DOM 以进行测试，因为这真的根本不应该做。

【讨论】：

我尝试了代码但问题没有解决:(