Geek asks and answers

Passing a Javascript array to a PHP file

So, I know that Javascript is on the client side and PHP is server-side, which complicates, but I am wondering how to do this.

I have an array in my javascript code (in an HTML file), and when the user clicks on the submit button, I want the page to pass this array to my PHP page, which will then accept this date and put it into the SQL database.

Is there an easy way to do this? My array is declared as var markers = [];, it's just a variable in the javascript code part.

I looked at a bunch of other posts regarding this, but all the solutions do not match what I need to do, or require too many changes for what I can do right now. I am not very familiar with AJAX or JSON (not sure what it is).

My Javascript:

var markers = [];

function placeMarker(location) {
        var clickedLocation = new google.maps.LatLng(location);
        var name = document.getElementById("checkname").value;
        var description = document.getElementById("description").value;


        var marker = new google.maps.Marker({
            position: location,
            map: map,
            title: name,
            // This may cause a problem when reloading and editing an existing tour
            // url was found at: http://biostall.com/adding-number-or-letters-to-google-maps-api-markers
            icon: 'http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=' + markerId + '|FE6256|000000'
        });

        marker.setMap(map);
        markers.push([markerId, name, marker.getPosition().lat(), marker.getPosition().lng(), description]);
        //alert("" + markers);
        markerId = markerId + 1;
    }

    google.maps.event.addListener(map, 'click', function(event) {
        placeMarker(event.latLng);
    });

    google.maps.event.addListener(marker, "click", function() {
        map.removeOverlay(marker);
        marker.setMap(map);
    });
} 

window.onload = function() {
    var form = document.getElementById('theform');
    form.addEventListener('submit', function(){
        var markersField = document.getElementById('markers');
        markersField.value = JSON.stringify(markers);
    });
}

HTML:

<form action="portal.php" method="post" id="theform">
    <input type="hidden" id="markers" name="markers">
    <button>Submit</button>
</form>

portal.php :

$markers = json_decode($_POST['markers']);
echo $markers;

php-, , , , .

+5
4

, , , . , :

<form method="post" id="theform">
    <!-- your existing form fields -->

    <input type="hidden" id="markers" name="markers">

    <button>Submit</button>
</form>

JavaScript

window.onload = function() {
    var form = document.getElementById('myform');
    form.addEventListener('submit', function(){
        var markersField = document.getElementById('markers');
        var markers = [1,2,3];
        markersField.value = JSON.stringify(markers);
    });
}

PHP, :

$markers = json_decode($_POST['markers']);
+9

, , . jQuery, . markers POST AJAX.

// Javascript / jQuery
$.ajax({
    type: 'POST',
    data: markers,
    dataType: 'json',
    url: 'yourPHPFile.php'
});

PHP, JSON PHP.

// PHP in 'yourPHPFile.php'
// Santizing the string this way is a little safer than using $_POST['markers']
$markersFromPost = filter_input(INPUT_POST, 'markers', FILTER_SANITIZE_STRING);

// Turn the sanitized JSON string into a PHP object
$markers = json_decode($markersFromPost);
+4

You will need to learn the basics of AJAX and JSON. jQuery can help you with this, and I would recommend it as a good starting point.

Send JSON using AJAX, then use $phpArray = json_decode($submittedJson);viola too, you will have a nice PHP array from the presented javascript object.

+3
source

send json object and convert it to array with json_decode($obj)

+1
source

More articles:


All Articles