JQuery Ajax dynamic forms, how to show success message in div above form

Question

I have comment site, where user can comment on comment (subcomment)

Main Comment 1
    Sub Comment nr1
    Sub Comment nr2
Main Comment 2
    Sub Comment nr1

Every Main comment have form that shows on click. When user submits comment or subcomment, message that says "Successful!" is shown in div #result.

This is JS

 $(function(){
    //reply comment hide>show
    $('.reply-comment').on('click', function(e){
        e.preventDefault();
        $(this).next('.reply-form').show();
    });

    //ajax to comment.php
           $('form').on('submit', function (e) {
           $.ajax({
            type: 'post',
            url: 'comment.php',
            data: $(this).serialize(),
            success: function () {
                $("#result").addClass("alert alert-success").html("Successful");
                window.setTimeout(function(){location.reload()},3000);
            }
        });
        e.preventDefault();
    });
      });

It works but message is shown on 1st occurrence of #result, that's on 1st form at top of page.Is it possible to display message only above form that user comments on ?

This is HTML where forms are dynamically generated from DB for every Main comment

        <a href="" class="reply-comment""> Reply </a>
        <form action="comment.php" method="post" class="reply-form"> 
        <div id="result"></div>
        Name: <input type="text" name="name"><br>
        Comment: <input type="text" name="comment"><br>
        <input type="hidden" name="parrent" value="<?=$data[$id]["id"]?>">
        <input type="hidden" name="comment_post_id" value=<?=$post_id?>>
        <input type="submit">
        </form>

And comment.php that's called, (SQL Injection not important)

$name = $_POST['name'];
$comment = $_POST['comment'];
$parrent = $_POST['parrent'];// Hiden!
$post_id = $_POST['comment_post_id']; // Hiden!


if ($parrent==="zero"){ //main comment
    $sql = "INSERT INTO ...";
    }
if ($parrent>0){ //sub comment
    $sql = "INSERT INTO ...)";
    }
$conn->query($sql)

Main goal is to show successful msg for example if user commented on Main comment 2

Main Comment 1
    Sub Comment nr1
    Sub Comment nr2
Main Comment 2
    Successful! //hides on reload
    Sub Comment nr1
    Sub Comment nr2

This work like that because it will always use the first id = result which is always on top ! You have to use different id for each div on top of each form ! and use same id in ur JS code ! so basically, you need to generate dynamic id's and also send them to ur JS ! — , Feb 28 '17 at 15:06

Fabian N. · Accepted Answer · 2017-02-28T16:29:00.730

Note: You should know what is the difference between an id attribute and a class attribute in HTML.

A id must be present in the whole document exactly once. So if you have it more then once, the HTML parser is generous enough to ignore that, but when adding content/class/... will be performed only on the first one.

A class can be present in you document more then once.

So what you want is first change <div id="result"></div> to <div class="result"></div> (when I understand you correctly, this will be there for every comment)

Next replace the js submit part part with:

$('form').on('submit', function (e) {

    var form = $(this);
    $.ajax({
        type: 'post',
        url: 'comment.php',
        data: $(this).serialize(),
        success: function () {
            form.find('.result').addClass("alert alert-success").html("Successful");
            window.setTimeout(function(){location.reload()},3000);
        }
    });
    e.preventDefault();
});

OK very nice explanation. Thank you for that. But find('.result') isn't working, comments get processed but there is no message. $('.result').addClass("alert alert-success").html("Successful"); works but it adds on every result class as expected. — Energizem, Feb 28 '17 at 16:19
I have corrected my answer, of course this can not work ;) because of http://stackoverflow.com/questions/6394812/this-inside-of-ajax-success-not-working — Fabian N., Feb 28 '17 at 16:29

JQuery Ajax dynamic forms, how to show success message in div above form

1 Answers1