Javascript 使用jquery在与其他表单共享元素名称的页面上提交一个表单

为了让大家对我的问题有一个最基本的了解，我正在尝试创建一个与facebook和twitter的仪表盘和评论系统工作方式非常相似的页面。您有一个页面，当用户向下滚动时，该页面将从循环中的数据库行连续创建表单元素（post）。然后，用户可以对这些帖子中的每一篇发表评论。我希望能够使用ajax在每个帖子上单独提交评论，而无需重新加载页面

我遇到了一个问题，当我试图提交对任何表单的评论时，除了页面上加载的第一个表单。此外，ajax只在提交时发布第一个表单元素（因为我猜每个表单和元素都有相同的名称）。 下面是我的评论加载脚本：[请原谅旧的php，我知道我需要将其更新为mysqli或PDO]

php

jscript

<script>
$('.comment_form').on('submit', function (e) {
  e.preventDefault();
  $.ajax ({
    type: 'post',
    url: 'submit_comment.php',
    data: {comment : $('#comment').val(), post_id : $('#post_id').text()}
    success: function() {
      $("#comment_body").load("load_comments.php #comment_body");
    }
  });
});
</script>

$（'.comment_form'）。关于（'submit'，函数（e）{
e、 预防默认值（）；
$.ajax({
键入：“post”，
url:'submit_comment.php'，
数据：{comment:$（'#comment'）.val（），post#id:$（'#post#id'）.text（）}
成功：函数（）{
$（“#comment_body”）.load（“load_comments.php#comment_body”）；
}
});
});

这个脚本在某种程度上是有效的，因为当我在第一篇文章上发表评论时，它的工作方式与预期的一样。我似乎不知道如何将表单单独定位在页面的下方。下面是一个例子：

最顶端的post_id值为40。如果我对post_id=38发表评论，ajax将把空的评论字段和post_id=40提交到数据库中

---

对脚本表单目标的任何帮助都将非常有用。如果我需要重新生成php查询，为每个回显的表单元素指定一个单独的名称，也可以。提前谢谢

您不能按类选择唯一的表单，因为您的类在所有表单中都是相同的。向表单元素添加一个“id”字段，如下所示：

"<form name='comment_form' id='"+ .$row['id'] +"'>"

---

您试图在ajax调用中发送到的数据正在使用：

$('#comment').val(), post_id : $('#post_id').text()

但是您的HTML没有ID=“comment”和ID=“post\u ID”的内容。（选择器中的“#”表示getElementById。）因此您不会向php页面发送任何数据。您需要使用正确的选择器来获取该数据。（见下文）

去掉你不需要的“表单”标签。换衣服

<input type="submit">

致：

然后，您的脚本可以是：

<script>
$('.comment-submit').on('click', function (e) {
  e.preventDefault();
  // get a referenct to this particular comment_body div
  var $commentbody = $(this).closest('.comment_body');
  // find the textarea within this particular comment_body
  var commenttext = $commentbody.find('textarea[name="comment"]').val();
  // find the post_id paragraph within this particular comment_body
  var postId = $commentbody.find('p[name="post_id"]').text();

  $.ajax ({
    type: 'post',
    url: 'submit_comment.php',
    data: {comment : commenttext , post_id : postId}
    success: function() {
      $comment_body.load("load_comments.php #comment_body");
    }
  });
});
</script>

$（'comment submit'）。在（'click'，函数（e）上{
e、 预防默认值（）；
//获取此特定注释的引用\u body div
var$commentbody=$（this）.closest（'.comment_body'）；
//在这个特定的注释体中查找文本区域
var commenttext=$commentbody.find（'textarea[name=“comment”]”）。val（）；
//在这个特定的评论正文中找到post_id段落
var postId=$commentbody.find（'p[name=“post_id”]”）。text（）；
$.ajax({
键入：“post”，
url:'submit_comment.php'，
数据：{comment:commenttext，post_id:postId}
成功：函数（）{
$comment_body.load（“load_comments.php#comment_body”）；
}
});
});

---

坦率地说，我不确定你的成功职能部门想要做什么。但我认为你也需要努力。通常，ajax调用将返回数据，因此success函数应该有一个返回值，用于填充屏幕的某些部分。jQuery“load（）”函数是ajax调用的成功回调中的另一个ajax调用。我真的认为你不想也不需要这样做

这个

$（'.comment_form'）

和

您需要给它一个class

或一个id

$（'.\comment_form'））

-

您的元素也没有匹配的ID。这段代码几乎没有什么正确的地方，除了完整的重构几乎不可能提出任何建议谢谢您的建议！非常好的建议。我很快就会在这里尝试！很好的解决方案。这很有效。这个糟糕的例子是我的错（我只是输入了一个新的，而不是复制我当前的代码，所以我已经有了具有匹配名称的ID字段）。不过，我将进一步研究success函数。我只是引用了一个单独的页面，本质上是相同的php，并将结果插入到该div中。不过，一定有一个更简单的方法，哈哈。再次感谢！仅供参考-如果页面上有多个ID=“comments”和ID=“post\u ID”的字段，则HTML页面无效。同一文档中的任意2个元素不能具有相同的ID。您应该删除ID，只使用名称。

<input type="submit">

<input type="button" class="comment-submit">

<script>
$('.comment-submit').on('click', function (e) {
  e.preventDefault();
  // get a referenct to this particular comment_body div
  var $commentbody = $(this).closest('.comment_body');
  // find the textarea within this particular comment_body
  var commenttext = $commentbody.find('textarea[name="comment"]').val();
  // find the post_id paragraph within this particular comment_body
  var postId = $commentbody.find('p[name="post_id"]').text();

  $.ajax ({
    type: 'post',
    url: 'submit_comment.php',
    data: {comment : commenttext , post_id : postId}
    success: function() {
      $comment_body.load("load_comments.php #comment_body");
    }
  });
});
</script>