Define a send array button using javascript, then output data using Ajax

Question

I have a list of extracted data, and for each of them there is a form below, like a comment box form, where other users can leave a message for specific data.

What I have tried so far is to put the submit button in an array to distinguish it from one to the other (I don’t know if I am doing this correctly, as this is one of my first attempts to use the Javascript / jQuery library and AJAX).

I can send the data and paste it into the SQL database, simply using PHP / MySQL, but I wanted to achieve at least a comment-like system of this community, Stackoverflow, in which, after the comment was posted, it appeared immediately after the button was clicked (without restarting the whole page to send data to the database).

This is dynamically sent 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 as soon as the submit button is pressed:

 $(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 tried using an array to distinguish data from one to another, but it does not work when I try to configure a script. A new posted post / comment should appear in the <div ="flash"></div> (using AJAX ). Can someone help me how can I achieve the desired result?

Answer 1

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

Updated fiddle note. I am using jQuery

It does not use your code specifically, but hopefully it makes sense.

Replace the url field where you plan the POST.

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