Determine an array submit button using javascript then outputs data using Ajax

Question

I have a list of fetched data, and to every data has a form below it, like a comment box form, where other users can leave a message to the specific data.

What I've tried so far is putting the submit button into an array to distinguish it from one to another (don't know if I'm doing this right as this is one of my first attempt in using Javascript/jQuery library and AJAX).

I can submit the data and insert it into the SQL database just by using PHP/MySQL but I wanted to achieve at least the comment-like system of this community, Stackoverflow, wherein once a comment is posted, it would show up right after hitting the button (not by reloading the whole page in order to submit the data into the database).

This is the dynamically post data:

<?php while($loopquery){ ?>
   <div>
      <?php echo $row['data']; ?>
      <div id="flash[]"></div> <!-- NEW POSTED COMMENT SHOULD BE SHOWN HERE -->
      <form action="#" method="POST">
      <input type="text" name="comment[]" id="comment[]">
      <input type="submit" id="submit[]">
      </form>
   </div>
<?php } /* END OF LOOP */ ?>

And once the submit is clicked:

$(function () {
    var submit = document.getElementById('submit');
    for (var a = 0; a < submit.length; a++) {
        submit[a].click(function () {
            var comment = document.getElementById('comment');
            var hiddentaskid = document.getElementById('hiddentaskid');
            var dataString = '&comment='+comment[a]+'&hiddentaskid='+hiddentaskid[a];
            if (comment[a] == '' || hiddentaskid[a] == '') {
                alert('Please Give Valid Details');
            } else {
                var flash = document.getElementById('flash');
                flash[a].show();
                flash[a].fadeIn(400).html('Loading message');
                $.ajax({
                    type: "POST",
                    url: "commentajax.php",
                    data: dataString,
                    cache: false,
                    success: function (html) {
                        $("ol#update").append(html);
                        $("ol#update li:last").fadeIn("slow");
                        flash[a].hide();
                    }
                });
            }
            return false;
        });
    }
});

I've tried using array to distinguish the data from one to another, but it's not working when I try to tweak the script. New posted message/comment should pop-out in the <div ="flash"></div> area (by using AJAX). Can anyone help me how I can achieve my wanted output?

Answer 1

Check out this fiddle. http://jsfiddle.net/7xjqzmqz/

Updated fiddle Note I'm using Jquery

It isn't using your code specifically, but hopefully it gets the point across.

Replace the url field with where you plan to POST to.

//message is just an object to keep the comment
var message = {name: 'Gabs00'};


$('form').on('submit', function(e){
    //stop page reload
    e.preventDefault();

    //Using $(this), target this specific form
    message.comment = $(this).find('.message').val();
    var json = JSON.stringify(message);

    //Finding the parent div, to make sure I append only to this forms comment list
    var $parent = $(this).closest('.item-to-comment');

    $.ajax({
        type: 'POST',
        url: '/echo/json/',
        data:{json: json},
        success: function(resp){

            //Traversing back down the dom
            var $ul = $parent.find('.comments');

            $ul.find('li').removeClass('special');
            $ul.append('<li class="special">' + resp.name + ': ' +
                       resp.comment + '</li>');
        }

    })

});