How can I pass Javascript array to a PHP array on button click?

Question

I am having trouble passing a Javascript array to a PHP array on the same page when the submit button is pressed. I have seen discussion of JSON.stringify and json_encode on other posts, but I am not sure how to use those functions with my code.

JS:

    <script>
        var kegs = [];
        var textarea = document.getElementById("your_textarea");
        $("#kegId").on('keyup', function (e) {
            if (e.keyCode == 13) {
                kegs.push($(this).val());
                $("#kegId").val("");
                textarea.value = kegs.join("\n");

                };
            });
    </script>

PHP:

if (!isset($_POST['btn-addkegs'])) {
//I want to set the Javascript array 'kegs' to a php variable here

Possible duplicate of [Serializing to JSON in jQuery](http://stackoverflow.com/questions/191881/serializing-to-json-in-jquery) — Jayme Brereton, Nov 23 '16 at 04:10
You need to read some introductory materials about AJAX. That said, it's hard to know how to help you unless we know what you actually want to do with the data. Just adding it to an array is pointless. What are you actually trying to accomplish? — elixenide, Nov 23 '16 at 04:14
@EdCottrell I want to have access to the data so that I can loop through it and add it to a database. — jh95, Nov 23 '16 at 04:17
@jh95 Then you definitely need to use AJAX. Because JS is client-side and PHP is server-side, you need to make a request in the background using AJAX to send the data to the server. — elixenide, Nov 23 '16 at 04:20
@EdCottrell Is it possible to use AJAX "on submit"? The array has the potential to change (add or remove items) until the submit button is clicked. — jh95, Nov 23 '16 at 04:23
@jh95 Sure. Just intercept the submit event, `preventDefault()` it, and then send all the data to the server at once. — elixenide, Nov 23 '16 at 04:24

HenryDev · Accepted Answer · 2016-11-23T05:43:03.007

Using Ajax will do it for you! I wrote this code that sends an array to PHP on the same page. Once you get the array in PHP you can do whatever you want with it :).Just copy and paste this file and called it index.php to see the result. This will totally help you!

<?php

  $data = array();
   if(isset($_POST['myArray']) && !empty($_SERVER['HTTP_X_REQUESTED_WITH'])){
   $data = 'You array is: ' . $_POST['myArray'];       
   echo json_encode($data);  
   die();      
   }
?>
 <html>
 <head>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</head>

<body>
<div id = "random"></div>

<script type = "text/javascript">

$(document).ready(function() {

var arr = [2,4,5,6,7];
var myArray =  JSON.stringify(arr);

$.ajax({
    url: "index.php",
    method: "POST",
    dataType: "json",
    data: {myArray: myArray},
    success: function (result) {
    alert("result: " + result);
    console.log(result);
  $("#random").html(result);
 }
});

});

</script>

</body>
</html>

score 1 · Answer 2 · answered Nov 23 '16 at 04:25

This can be achieved by using ajax(), its syntax is:

$.ajax({
        url: 'process.php',     // file where data processing is done                   
        type: 'POST',                                  
        data: {
            var1  :val1,
            var2  :val2
            // parameter set
        },
        success: function(response){    // response from process.php
            // do your stuff here
        }
    });

How can I pass Javascript array to a PHP array on button click?

3 Answers3