Passing arrays js variable to php

Question

Currently I have stored variables in a Javascript array. The goal here is to turn them into PHP variables so that I can use these variables and insert them into my database.

The problem with this code is that the AJAX part doesn't work. Please get me in the right direction as I am extremely new to AJAX. I did try to read about them but still do not understand much. Doing it without refreshing the page is not necessary. Methods other than AJAX are welcomed.

Here is my current code:

<button onclick="Bookings()">Book</button>
<script>
    function Bookings() {
        var t2Cells = document.getElementsByClassName("t2");
        for (var i = 0; i < t2Cells.length; i++) {
            var t2CellsIndex [i] = t2Cells[i].cellIndex
            var t2CellsRow [i] = t2Cells[i].parentNode.rowIndex
            //alert('Coordinates are: '+t2Cells [i].cellIndex+'x'+t2Cells [i].parentNode.rowIndex);
            var tbl = document.getElementById("tblMain");
            //alert (tbl.rows[0].cells[t2CellsIndex].innerHTML);
            var studioSelected = tbl.rows[0].cells[t2CellsIndex].innerHTML
            var Timeselected = tbl.rows[t2CellsRow].cells[0].innerHTML

            $.ajax({
                type: "POST",
                url: 'bookingconfirm.php',
                data: "studioSelected=" + studioSelect,
                success: function(data) {
                    alert("success!");
                }
            });
        }
    }
</script>

<?php 
    //bookingconfirmed.php
    if (isset($_POST['studioSelect'])) {
        $uid = $_POST['studioSelect'];
        //steps to insert into database.

Well what doesn't work? Do you get any errors? is the data not being sent to the ajax file? — Naruto, Nov 06 '15 at 08:59
So, do I understand it right? You set data key-value pair `studioSelected`, but check if `t2CellsIndex` is set? — Yeldar Kurmangaliyev, Nov 06 '15 at 09:00
What does `print_r($_POST)` return in the ajax target file `bookingconfirm.php`? — Thaillie, Nov 06 '15 at 09:00
One more thing here you are calling $.ajax in side a loop that means there will be multiple request to the sever depending on your loop iteration. Please check with Chrome Developer tool (Press F12 at chrome) and check network tabe for all XHR request, you will get some idea how data is being passed for AJAX. — Partha Sarathi Ghosh, Nov 06 '15 at 09:02
@YeldarKurmangaliyev Mistake on my part, the PHP part was the wrong one. I revised it already. — Lchai, Nov 06 '15 at 09:34
@Naruto Data is not being sent to the ajax file, the `alert("success!")` is not being runned — Lchai, Nov 06 '15 at 09:35

score 1 · Answer 1 · answered Nov 06 '15 at 09:02

1

First, you should move ajax call outside of foreach

var usefulData = [];
var t2Cells = document.getElementsByClassName("t2");
for (var i = 0; i < t2Cells.length; i++) {
    var t2CellsIndex [i] = t2Cells[i].cellIndex
    var t2CellsRow [i] = t2Cells[i].parentNode.rowIndex
    //alert('Coordinates are: '+t2Cells [i].cellIndex+'x'+t2Cells [i].parentNode.rowIndex);
    var tbl = document.getElementById("tblMain");
    //alert (tbl.rows[0].cells[t2CellsIndex].innerHTML);
    var studioSelected = tbl.rows[0].cells[t2CellsIndex].innerHTML

    // add data to array
    usefulData.push(studioSelected);

    var Timeselected = tbl.rows[t2CellsRow].cells[0].innerHTML
}

        $.ajax({
            type: "POST",
            url: 'bookingconfirm.php',
            data: {'usefuldata': usefulData},
            success: function(data) {
                alert("success!");
            }
        });

Then in your php file:

if (isset($_POST['usefuldata'])) {
    var_dump($_POST['usefuldata']);
}

answered Nov 06 '15 at 09:02

Anton F

328
1
8

The codes stop running till `usefulData.push(studioSelected);` . Any idea why? – Lchai Nov 06 '15 at 09:26
any errors in console? can you set up a jsFiddle with your example? – Anton F Nov 06 '15 at 09:35
I am not knowledgeable in using console on jsFiddle. Instead i duplicated my codes into the jsfiddle for your better understanding. The `success: function(data) { alert("success!");` doesn't trigger. https://jsfiddle.net/rn7uqhtw/4/ – Lchai Nov 06 '15 at 09:49
add var usefulData = []; to start of your function. – Anton F Nov 06 '15 at 10:09
The array code does work now but the ajax part is still not running. Sorry for the late reply, was down with a fever. – Lchai Nov 09 '15 at 05:19

Passing arrays js variable to php

1 Answers1