How to parse php input array into json then back to php - php

Question

So I am making a checkbox for each row in my table so I can delete multiple rows at once.
I am trying to do this for each row inside my table:
<td><input id="checkItem" name="delete[]" type="checkbox" value="<?=$product->id;?>"></td>
Then delete[] is holding the array.
My issue is, I am using json (ajax) to parse my data.
It is only recognizing the last delete[] checkbox I have on my page.
If I check the last checkbox and hit delete all (my button to execute multi-selected rows), it shows the product id, this is good.
If I try any other checkbox, it returns nothing.
Here is the checkbox line that creates checkbox array for each row:
enter image description here
Here is the post function:
enter image description here
Here is my delete function:
enter image description here
Here is my json ajax code to process the requests:
$("body").on("submit", ".ajax-form", function (e) {
e.preventDefault();
form = $(this);
url = form.attr("action");
method = form.attr("method");
data = {};
form.find("[name]").each(function (key, value) {
type = $(this).attr("type");
name = $(this).attr("name");
if (type == "radio" || type == "checkbox") {
value = "";
if ($(this).prop("checked")) value = $(this).val();
} else value = $(this).val();
data[name] = value;
});
button_lang = $("[type=submit]", form).html();
var saveData = $.ajax({
type: method,
crossDomain: true,
headers: {
'Content-Type': 'application/x-www-form-urlencoded'
},
url: url,
data: data,
dataType: "json",
success: function(response) {
messages = "";
if(response.success === true)
{
if(response.redirect)
{
$('.ajax-form').trigger("reset");
window.location.href = response.redirect;
}
else if(response.success)
{
for (var message in response.messages) {
messages += response.messages[message] + "<br>";
}
if(response.timer) {
const Toast = Swal.mixin({
toast: true,
position: 'top-end',
showConfirmButton: false,
timer: 3000,
timerProgressBar: true,
onOpen: (toast) => {
toast.addEventListener('mouseenter', Swal.stopTimer)
toast.addEventListener('mouseleave', Swal.resumeTimer)
}
});
Toast.fire({
icon: 'success',
title: "<h6 style='text-align: left!important;'>" + messages + "</h6>"
});
$('.ajax-form').trigger("reset");
window.setTimeout(function(){window.location.href = response.sendTo;},response.timer);
} else {
const Toast = Swal.mixin({
toast: true,
position: 'top-end',
showConfirmButton: false,
timer: 3000,
timerProgressBar: true,
onOpen: (toast) => {
toast.addEventListener('mouseenter', Swal.stopTimer)
toast.addEventListener('mouseleave', Swal.resumeTimer)
}
});
Toast.fire({
icon: 'success',
title: "<h6 style='text-align: left!important;'>" + messages + "</h6>"
});
$('.ajax-form').trigger("reset");
}
}
else
{
location.reload();
}
}
else
{
for (var message in response.messages) {
messages += response.messages[message] + "<br>";
}
const Toast = Swal.mixin({
toast: true,
position: 'top-end',
showConfirmButton: false,
timer: 3000,
timerProgressBar: true,
onOpen: (toast) => {
toast.addEventListener('mouseenter', Swal.stopTimer)
toast.addEventListener('mouseleave', Swal.resumeTimer)
}
});
Toast.fire({
icon: 'error',
title: "<h6 style='text-align: left!important;'>" + messages + "</h6>"
});
}
}
});
saveData.fail(function() {
const Toast = Swal.mixin({
toast: true,
position: 'top-end',
showConfirmButton: false,
timer: 3000,
timerProgressBar: true,
onOpen: (toast) => {
toast.addEventListener('mouseenter', Swal.stopTimer)
toast.addEventListener('mouseleave', Swal.resumeTimer)
}
});
Toast.fire({
icon: 'error',
title: "<h6 style='text-align: left!important;'>A system error occured</h6>"
});
});
});

Answer 1

Try this. But #El_Vanja is right. Your code is highly room for improvement
form.find('input:checkbox').each(function (key, value) {
type = $(this).attr("type");
name = $(this).attr("name");
if (type == "radio" || type == "checkbox") {
value = "";
if ($(this).prop("checked")) value = $(this).val();
} else value = $(this).val();
data.push({name:value});
});