How to pass the value of more then one 1 elements in an array from ajax to PHP?

Question

Actually I am getting the value of buttons with same id through a loop and an array and i want to pass these values from ajax to php but the problem comes it showing only value of last element?

function remove() {
            var elms = document.querySelectorAll("[id='botn']");

            for (var i = 0; i < elms.length; i++)
            var datastring=elms[i].value;
            console.log(datastring);

            $.ajax({
               url: 'php/del_beacon.php',
                type: 'post',
                data: {data:datastring},
                success: function(response) {

                }

        });
        }

When i use alert(elms[i].vlaue) then it shows the value of all selected buttons This my php file

<?php
$servername="localhost";
    $username="root";
    $password="";
    $dbname="beelist";

$conn=mysqli_connect($servername,$username,$password,$dbname);
error_reporting(0);
$connDB= mysqli_select_db($conn,'beelist');
$myArray = $_POST['data'];
echo $myArray;



?>

Answer 1

You're only storing one value in the datastring variable because it's a string variable.

for (var i = 0; i < elms.length; i++)
    var datastring = elms[i].value;

For each element of this loop, you rewrite the variable, that's why only the last value is saved.

Change it to an array, and feed values to it via push() . Then you should be getting the whole array to play with in PHP:

var datastring = [];
for (var i = 0; i < elms.length; i++)
    datastring.push(elms[i].value);

Answer 2

You are getting only the last element because you are reassigning the value every time the loop is executing.

you need to use the push method.

var data.push(elms[i].value);

Answer 3

Since you are getting all the values of a selected data via ajax. The php is where you are having issue. In your php code, you did not specify what you want to do with the posted data like Insert, update or delete actions.

Anyway at php, you will need to loop through the posted data as per code below

foreach($myArray as $pid){

echo $pid;
}

The code below assumes that you want to loop through the posted data to delete records from posts table based on posts_id

<?php
$servername="localhost";
    $username="root";
    $password="";
    $dbname="beelist";

$conn=mysqli_connect($servername,$username,$password,$dbname);
error_reporting(0);
$connDB= mysqli_select_db($conn,'beelist');
$myArray = $_POST['data'];


//loop through your post and then insert or delete or update records
foreach($myArray as $pid){

// Delete record
    $query = "DELETE FROM posts WHERE id=".$pid;
    mysqli_query($con,$query);


echo $pid;
}


?>

Let me know if you still face any issue..

Answer 4

In your code what you are trying to do is

var datastring = elms[i].value; // Your problem is here

Here you are declaring datastring everyting and because of this you are getting last value in data. instead you can push values in array and then convert array to JSON and then send it over ajax call to php like this.

function remove(){
 var elms = document.querySelectorAll("[id='botn']");
 var datastring = [];
 for (var i = 0; i < elms.length; i++)
 {
   datastring.push(elms[i].value);
   console.log(datastring);
 }
var myData = JSON.stringify(datastring);

$.ajax({
   url: 'php/del_beacon.php',
   type: 'post',
   data: {data:myData},
   success: function(response) {
    }
  });
}

then in your php code you can again convert json to array by json_decode() function in php json_decode