Pass specific Form Input to Jquery Function

Question

I am currently working on a forum where I use multiple forms on one page with the same ID. So when I try to get the input through document.getElementById("#id").val it will always select the first form on the website. I generate these forms so I can't change the IDs separately.

So what I tried to do is pass parameters to the jQuery function like this:

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});

}

This doesn't seem to work though because I keep getting variable undefined error.

What am I doing wrong?

EDIT:

This is the actual HTML code:

<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>

But you could get all the forms: var forms = document.querySelector("form"); Then you can iterate over them. — Radmation
– Radmation, Commented May 29, 2018 at 20:44

Radmation · Accepted Answer · 2018-05-29 21:11:18Z

1

I think you are trying to remove the deleted comments from the DOM after it has been deleted in the DB and because all your delete forms have the same id - you are unsure which one to remove from the DOM.

I would honeslty only have one <form> tag on my page wrapping everything that it needs too. And on the output you could do something like:

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

Then you will know how to reference the comment when you need to remove it.

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

The above code isn't perfect and likely has syntax errors but I hope you get the idea.

edited May 29, 2018 at 21:11

answered May 29, 2018 at 21:00

Radmation

1,5441 gold badge14 silver badges31 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Radmation Over a year ago

@JasonGreb Glad I could help! Do you mind accepting the answer so this can be closed? Thanks!!

Ivan Over a year ago

@JasonGreb Consider upvoting / accepting his answer for future reference.

Jason Greb Over a year ago

I can only accept your answer, I can't upvote yet because I have less than 15 rep. :( sorry

Ivan · Accepted Answer · 2018-05-29 21:00:33Z

0

In my opinion, if you wish to select all forms you should use classes instead. remember you can always use more than one class per item. In the other hand, ids are unique and it would not be very easy to select all of them with JavaScript.

For example, you could add the class form to the <form> tags you want to select. I have provided the HTML code below (in 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>';

Then in JavaScript, you can use the document method .querySelectorAll which allows you to select all elements that match the given selector. In your case use document.querySelectorAll('.form'). This will return an array of HTML elements.

answered May 29, 2018 at 21:00

Ivan

41.3k9 gold badges78 silver badges120 bronze badges

1 Comment

Jason Greb Over a year ago

This is not quiet what I was looking because I cannot distinguish what form was submitted but thank you anyway!

Collectives™ on Stack Overflow

Pass specific Form Input to Jquery Function

2 Answers 2

3 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related