Question

我目前正在一个论坛上工作，我在一个页面上使用具有相同ID的多个表单。因此，当我尝试通过document.getElementById("#id").val获取输入时，它将始终选择网站上的第一个表单。我生成这些表单，所以我不能单独更改ID。

所以我试图将参数传递给jQuery函数，如下所示：

echo '<form id="delete-form" method="POST" action="javascript:deleteComment(comment_id_java.val, category_id_java.val, category_java.val)">';
echo '<input id="comment_id_java" type="hidden" name="id" value="'.$result_row['comment_id'].'">';
echo '<input id="category_id_java" type="hidden" name="urlid" value="'.$_GET['id'].'">';
echo '<input id="category_java" type="hidden" name="category" value="'.$_GET['category'].'">';
echo '<input id="delete-button" type="submit" name="submit" value="X">';
echo '</form>';

function deleteComment(comment_id_java, category_id_java, category_java){


    //Don't worry about this part, this works for sure I tested it.
    $.post("delete-comment.php", {
        id: comment_id,
        urlid: category_id,
        category: s_category
    });

    $("#comment-container").load("load-comments.php", {category:s_category, id:category_id});

}

这似乎不起作用，因为我不断收到variable undefined错误。

我做错了什么？

编辑：

这是实际的HTML代码：

<div id="comment-container">
  <div class="post-section">
    <div class="post-user-section">
      <h4>fiddel</h4>
      <h4 style="color:rgb(70,70,70);">User</h4>
      <img src="Images/profile-picture.png">
      <h4 style="color:rgb(180,180,180);">18-05-22</h4>
      <h4 style="color:rgb(180,180,180);">Reputation: 0</h4>
    </div>
    <div class="post-body-section-wide">
      <h5>Welcome User,
        <br>
        <br>This is the Announcement Section where we post any types of news!
      </h5>
    </div>
    <form id="vote-form" method="POST"><input type="hidden" name="id" value="17"><input id="upvote-button" type="submit" name="submit" value="&#128897;"><input id="downvote-button" type="submit" name="submit" value="&#128899;"></form>
  </div>
  <div class="post-section">
    <div class="post-user-section">
      <h4>fiddel</h4>
      <h4 style="color:rgb(70,70,70);">User</h4>
      <img src="Images/profile-picture.png">
      <h4 style="color:rgb(180,180,180);">18-05-24</h4>
      <h4 style="color:rgb(180,180,180);">Reputation: 0</h4>
    </div>
    <div class="post-body-section-wide">
      <h5>ddadas</h5>
    </div>
    <form id="vote-form" method="POST"><input type="hidden" name="id" value="21"><input id="upvote-button" type="submit" name="submit" value="&#128897;"><input id="downvote-button" type="submit" name="submit" value="&#128899;"></form>
  </div>
  <div class="post-section">
    <div class="post-user-section">
      <h4>fiddel</h4>
      <h4 style="color:rgb(70,70,70);">User</h4>
      <img src="Images/profile-picture.png">
      <h4 style="color:rgb(180,180,180);">18-05-25</h4>
      <h4 style="color:rgb(180,180,180);">Reputation: 0</h4>
    </div>
    <div class="post-body-section-wide">
      <h5>Why is this not locked LOL</h5>
    </div>
    <form id="vote-form" method="POST"><input type="hidden" name="id" value="33"><input id="upvote-button" type="submit" name="submit" value="&#128897;"><input id="downvote-button" type="submit" name="submit" value="&#128899;"></form>
  </div>
  <div class="post-section">
    <div class="post-user-section">
      <h4>JasonB</h4>
      <h4 style="color:rgb(255,23,41);">Owner</h4>
      <img src="Images/profile-picture.png">
      <h4 style="color:rgb(180,180,180);">18-05-29</h4>
      <h4 style="color:rgb(180,180,180);">Reputation: 0</h4>
    </div>
    <div class="post-body-section">
      <h5>fdfsd</h5>
    </div>
    <form id="delete-form" method="POST" action="javascript:deleteComment(comment_id_java.value, category_id_java.value, category_java.value)"><input id="comment_id_java" type="hidden" name="id" value="83"><input id="category_id_java" type="hidden" name="urlid" value="17"><input id="category_java" type="hidden" name="category" value="announcements"><input id="delete-button" type="submit"
        name="submit" value="X"></form>
  </div>
  <div class="post-section">
    <div class="post-user-section">
      <h4>JasonB</h4>
      <h4 style="color:rgb(255,23,41);">Owner</h4>
      <img src="Images/profile-picture.png">
      <h4 style="color:rgb(180,180,180);">18-05-29</h4>
      <h4 style="color:rgb(180,180,180);">Reputation: 0</h4>
    </div>
    <div class="post-body-section">
      <h5>asasf</h5>
    </div>
    <form id="delete-form" method="POST" action="javascript:deleteComment(comment_id_java.value, category_id_java.value, category_java.value)"><input id="comment_id_java" type="hidden" name="id" value="84"><input id="category_id_java" type="hidden" name="urlid" value="17"><input id="category_java" type="hidden" name="category" value="announcements"><input id="delete-button" type="submit"
        name="submit" value="X"></form>
  </div>
</div>

Answer 1

我认为您尝试在数据库中删除已删除的注释后删除它，因为所有删除表单都具有相同的ID - 您不确定要从DOM中删除哪一个。

我想在我的页面上只有一个<form>标签包装它所需要的一切。在输出上你可以做类似的事情：

echo "<div id="comment-id-".$result_row['comment_id']."">Comment Here</div>

然后，当您需要删除注释时，您将知道如何引用注释。

document.getElementById("comment-id-<?php echo $result_row['comment_id']; ?>").style.display = "none";

上述代码并不完美，可能存在语法错误，但我希望您能理解。

Answer 2

在我看来，如果你想选择所有form，你应该使用类。记住你每个项目总是可以使用多个班级。另一方面，id是唯一的，用JavaScript选择所有这些都不是很容易。

例如，您可以将班级form添加到要选择的<form>代码中。我在下面提供了HTML代码（用PHP格式）。

echo '<form id="form delete-form" method="POST" action="javascript:deleteComment(comment_id_java.val, category_id_java.val, category_java.val)">';
echo '<input id="comment_id_java" type="hidden" name="id" value="' . $result_row['comment_id'] . '">';
echo '<input id="category_id_java" type="hidden" name="urlid" value="' . $_GET['id'] . '">';
echo '<input id="category_java" type="hidden" name="category" value="' . $_GET['category'] . '">';
echo '<input id="delete-button" type="submit" name="submit" value="X">';
echo '</form>';

然后在JavaScript中，您可以使用文档方法.querySelectorAll，它允许您选择与给定选择器匹配的所有元素。在您的情况下使用document.querySelectorAll('.form')。这将返回一个HTML元素数组。

将特定表单输入传递给Jquery函数

2 个答案: