N Rahman N Rahman - 3 months ago 14
Ajax Question

ajax multiple form submission on enter press

I want to make a commenting system by ajax and php. This code only submit first post comment. Others post comment not worked. When other comment post and enter its reload the page. Only first post comment worked perfectly. Please help me solved this problem.

My HTML:

$data = $con->query($sql);
if($data->num_rows>0){
while($row = $data->fetch_array(MYSQLI_ASSOC))
{
echo '<div class="box-footer">';
echo '<form id="comment_form" name="comment_form" method="post">';
echo '<img class="img-responsive img-circle img-sm" src="http://localhost/admin/dist/img/user1-128x128.jpg" alt="Alt Text">';
echo '<div class="img-push">';
echo '<input type="hidden" name="post_id" id="post_id" value="'.$id.'">';
echo '<input type="text" class="form-control input-sm" name="comment" id="comment" placeholder="Press enter to post comment">';
echo '</div>';
echo '</form>';
echo '</div>';
}
}


Submit Function is:

$(document).ready(function(){
$("#comment_form").submit(function(e){
e.preventDefault();

if (document.getElementById("comment").value == "") {
swal("ERROR", "Please write a comment first", "error");
} else {
var user_id = <?php echo $user_id; ?>;
var post_id = document.getElementById("post_id").value;
var comment = document.getElementById("comment").value;

var dataString = 'userid=' + user_id + '&post_id=' + post_id + '&comment=' + comment;
$.ajax({
type: "POST",
url: "commentupload.php",
data: dataString,
cache: false,
success: function(html) {
var status = html;
if(status == 0){
swal("Success", "Comment Added!", "success");
post_id = "";
comment = "";
document.getElementById("post_id").value = "";
document.getElementById("comment").value = "";
}
else if(status == 1) {
swal("ERROR", "Something went wrong!", "error"); location.reload();
}
else {
swal("ERROR", status, "error");
}
}
});
return false;
}
});
});

Answer

I suggest this solution
In HTML. Something like that

<form action="url" method="POST" class="my-form">
    <input type="hidden" name="post_id" value="x">
    <input type="text" name="comment">
    <input type="submit">
</form>

<form action="url" method="POST" class="my-form">
    <input type="hidden" name="post_id" value="y">
    <input type="text" name="comment">
    <input type="submit">
</form>

In JS

$(".my-form").submit(function(event){
    // Stop all form submit event
    event.preventDefault();

    $(".my-form").each(function (key, form){
        // Check not empty form
        if ($(form).find('input[name="comment"]').val() != ''){
            // Do ajax
            $.ajax({
                url: url,
                method: 'POST',
                data: $(form).serialize(),
                success: function(response){
                }
            })
        }
    });
});
Comments