Comments working for the first post only

Question

I coded a status-box. It was successful. Then I coded the comments system for the status. It all went fine. But there is a problem in it.

Problem: When there is more than one status posted, it only allows comments on the first status. If I try to post a comment on the second status, it won't load the AJAX request. I tried checking the Dev console too, but it didn't show anything.

Note: I load the statuses by AJAX into the main page. The comment is posted by a JavaScript function, which sends the $.ajax({type: "post"}); request to the file which retrieves the text, user ID and everything from the URL to save it into the database.

Please tell me if there is any logic in it, and what could be the problem.

jQuery AJAX function to POST comment

function send(id, post_id) {
    var pos = $("#txt").val();
    var post = pos.trim();
    if(post !== '') {
        $.ajax({
            url: 'comment.php?id='+id+'&post_id='+post_id+'&post='+post,
            type: "POST",
            success: function() {
                reload();
            }
        });
    }
}

This is how I call it:

<textarea cols="70" id="txt" placeholder="Write a comment.." class="input-user"></textarea><br />
<br />
<input type="submit" value="Post" style="background: #f2f2f2; width: 60px; height: 40px; padding: 5px; border-radius: 5px;" onclick="javascript:send('<?php echo $_SESSION['id']; ?>', '<?php echo $post['id']; ?>');" />

The comment.php file:

<?php 
include("includes/config.php");
include("includes/bbcode.php");
 $id = intval($_GET['id']);
$post_id = intval($_GET['post_id']);
 $pos = bbcode($_GET['post']);
$post = mysqli_real_escape_string($con, $pos);
  $post_comment = mysqli_query($con, "INSERT INTO comments(post_id, user_id, comment) VALUES('".$post_id."', '".$id."', '".$post."')") or die(mysqli_error($con));
 ?>

Again: All this is working only for the first post, i.e., you can only comment on the first post and if you try to comment on the second or later posts AJAX doesn't even send a request..

**WARNING**: When using `mysqli` you should be using [parameterized queries](http://php.net/manual/en/mysqli.quickstart.prepared-statements.php) and [`bind_param`](http://php.net/manual/en/mysqli-stmt.bind-param.php) to add user data to your query. **DO NOT** use string interpolation or concatenation to accomplish this because you have created a severe [SQL injection bug](http://bobby-tables.com/). **NEVER** put `$_POST` or `$_GET` data directly into a query, it can be very harmful if someone seeks to exploit your mistake. — tadman, Jun 07 '16 at 17:27
You should do `bbcode` rendering when you're displaying your entry, never when inserting in the database. If you do it prematurely it means you need to put that content into the page raw, exposing yourself to serious XSS concerns. — tadman, Jun 07 '16 at 17:28
show how multiple posts appear in your page. if you have MULTIPLE copies of that `textarea id=txt1`, then there's your problem. `id` must be UNIQUE across the document, and getElementById will only ever return the first one found, since it's illegal for multiple ids to exist. — Marc B, Jun 07 '16 at 17:29
[ID's Must Be Unique](http://stackoverflow.com/questions/5611963/can-multiple-different-html-elements-have-the-same-id-if-theyre-different-eleme), specifically because it will cause problems in [JavaScript](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id) and CSS when you try to interact with those elements. — Jay Blanchard, Jun 07 '16 at 18:29

Cesar Bielich · Accepted Answer · 2016-06-07T17:52:43.670

The reason is because when you are using id="txt" repeatedly. The script will only recognize the first one, after that you are toast. Also as @shut mentioned id's need to be unique. Change it to a class class="txt"

var pos = $(".txt").val();

Then call your function as such

$('form').on('click','.txt',function() {
    send('id_1', 'post_id_1');
});

function send(id, post_id) {
    var pos = $(".txt").val();
    var post = pos.trim();
    if(post !== '') {
        $.ajax({
            url: 'comment.php?id='+id+'&post_id='+post_id+'&post='+post,
            type: "POST",
            success: function() {

            }
        });
    }
}

Assuming you have a separate form for each one

<form>
<textarea cols="70" class="txt" placeholder="Write a comment.." class="input-user"></textarea><br />
<br />
<input type="button" value="Post" class="txt" style="background: #f2f2f2; width: 60px; height: 40px; padding: 5px; border-radius: 5px;" onclick="javascript:send('<?php echo $_SESSION['id']; ?>', '<?php echo $post['id']; ?>');" />
</form>

score 0 · Answer 2 · answered Jun 07 '16 at 17:30

id of any element must be unique. you are using comment box having id txt for all post then it always pick the data from the first textarea (for first post) which is blank in case of other post and AJAX doesn't send a request if the value of textarea is blank.

Comments working for the first post only

2 Answers2