Attaching event handlers to form created inside a loop - php

Question

I have multiple forms to send data to a database. One is created inside a loop and one is outside the loop. I have used AJAX to send that data to the database.
In the form who outside the loop, the AJAX works correctly and sends data to the database without refreshing the page. However in the forms inside the loop I can only send the data once. The second time the page is refreshed.
This is the first form outside the loop:
<!-- main from for post data out the loop -->
<form id="PostFormData" method="post" enctype="multipart/form-data">
<input type="file" name="image[]">
<input type="text" name="Post">
<button>done</button>
</form>
This is the AJAX code for this form
$("form#PostFormdata").submit(function(e) {
e.preventDefault();
var formData = new FormData(this);
$.ajax({
url: 'Post/sendPost.php',
type: 'POST',
data: formData,
success: function(data) {
document.getElementById("ajaxPost").innerHTML = data;
},
cache: false,
contentType: false,
processData: false
});
});
This is the second form inside the loop
<!-- form inside the loop for comment data -->
<?php for ($i = 0; $i < 1000; $i++) { ?>
<form id="CommentFormData" method="post" enctype="multipart/form-data">
<input type="file" name="commentImage">
<input type="text" name="commentValue">
<button>done</button>
</form>
<?php } ?>
This is the AJAX code for the looped forms
$("form#CommentFormData").submit(function(e) {
e.preventDefault();
var formData = new FormData(this);
$.ajax({
url: 'Post/sendComment.php',
type: 'POST',
data: formData,
success: function(data) {
document.getElementById("InsidePost").innerHTML = data;
},
cache: false,
contentType: false,
processData: false
});
});

Answer 1

The issue with the forms you generate in the loop is that they all have the same id. This value must be unique. As such the event handler is only bound to the first one and all others do not use the AJAX logic you provide.
To fix this, use a common class on all the forms - including the form outside of your PHP loop. That way all forms in the page will use the same handler and your JS will be more succinct. Try this:
$("form.comment-form-data").submit(function(e) {
e.preventDefault();
var formData = new FormData(this);
$.ajax({
url: 'Post/sendComment.php',
type: 'POST',
data: formData,
success: function(data) {
$("#InsidePost").html(data);
},
cache: false,
contentType: false,
processData: false
});
});
<!-- form inside the loop for comment data -->
<?php for ($i = 0; $i < 1000; $i++) { ?>
<form class="comment-form-data" method="post" enctype="multipart/form-data">
<input type="file" name="commentImage">
<input type="text" name="commentValue">
<button>done</button>
</form>
<?php } ?>
Also, as an aside, I assume that you're only adding 1000 form elements to the DOM for testing, as that is really not something you should be doing, at all.