Generating and submitting multiple forms with AJAX

Question

I am building a forum site, but I am having trouble to figure out why my AJAX code not working correctly. The problem is: I am generating multiple forms (commenting section) via while-loop for each post that users make, and I have written the below AJAX script:

<script type="text/javascript">

$(document).ready(function()
{
    $(".comment_submit2").click(function(){
        var topic_id = <?php echo $_GET['id']; ?>;
        var post_id = // receiving the id from the form
        $.ajax({
            type: "POST",
            url: "comment_on_post.php",
            data: {topic_id: topic_id,post_id : post_id,comment : $('textarea#commenting2').val() }, //success on the first post only
            //data: $(this).serialize(), not working at all..
            cache: false,
            success: function(data){
                alert(data);
                location.replace("topic2.php?id=<?php echo $_GET['id']; ?>");
            }
        });
        return false;
    });
});

</script>

<?php

include 'dbh.php';
//some other stuff...
$result_posts = $conn -> prepare("SELECT * FROM posts WHERE post_topic=:post_topic ORDER BY DATE(post_date) ASC");
$result_posts -> bindParam(':post_topic',$topic_id);
$result_posts -> execute();
while ($row2 = $result_posts ->fetch(PDO::FETCH_ASSOC)) 
{
    ?>
    //some other stuff...
    <form name="form2" id=" <?php echo $row2['post_id']; ?> ">
      <textarea id="commenting2" placeholder="Leave a comment" cols="30"rows="5"></textarea>
      <br>
      <input type="submit" class="comment_submit2" value="Comment">
    </form>
    //I need to pass the value id of form to ajax
    //some other stuff...
<?php  } ?>

The "comment_on_post.php" file is below :

<?php

include 'dbh.php'; 
session_start();

if (isset($_SESSION['uid'])) {
    $user     = $_SESSION['uid'];
    $reply    = $_POST['comment'];
    $topic_id = $_POST['topic_id'];
    //$post_id  = ?
    $comments = $conn -> prepare("INSERT INTO comments (uid,topic_id,post_id,comment,date) VALUES (:uid,:topic_id,:post_id,:reply,NOW())"); 
    $comments -> bindParam(':uid',$user);
    $comments -> bindParam(':topic_id',$topic_id);
    $comments -> bindParam(':post_id',$topic_id);
    $comments -> bindParam(':reply',$reply);
    $comments -> execute(); 
}

?>

This code is working only with the first post. I tried to serialize() but I think I am doing something wrong. Does anyone have an idea to solve this?

Barmar · Accepted Answer · 2017-04-14 00:54:46Z

1

IDs have to be unique, $('textarea#commenting2') will get the contents of the first text area with that ID, not the one in the current form. You should use a class="commenting2" instead of an ID, and then use DOM traversal to find the textarea in the current form.

data: {topic_id: topic_id, post_id: this.form.id ,comment : $(this).siblings('textarea.commenting2').val() },

edited Apr 14, 2017 at 0:54

answered Apr 14, 2017 at 0:39

Barmar

789k57 gold badges554 silver badges669 bronze badges

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

2 Comments

Ioannis P. Over a year ago

It is working(without post_id) but how to pass post_id into ajax ?

Barmar Over a year ago

this.form.id will return the ID of the form.

Collectives™ on Stack Overflow

Generating and submitting multiple forms with AJAX

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related