Home Ask Login Register

Developers Planet

Your answer is one click away!

zigzag162 February 2016

Transfering javascript array to php

On my website the user will choose an array of boxes, then when they click submit the array will be sent to the database, so you can see on this jsfiddle: https://jsfiddle.net/2peL8qg8/

However, in the php file I get the error: Invalid index and invalid argument for foreach(). Please could someone tell me why? Thanks

HTML and Javascript:

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

</body>


<script type="text/javascript">


var points = [];

window.onload = window.onresize = function() {
var canvas = document.getElementById('canvas');
canvas.width = window.innerWidth * 0.8;
canvas.height = window.innerHeight * 0.8;
}


function getSquare(canvas, evt) {
var rect = canvas.getBoundingClientRect();
return {
    x: 1 + (evt.clientX - rect.left) - (evt.clientX - rect.left)%10,
    y: 1 + (evt.clientY - rect.top) - (evt.clientY - rect.top)%10
};
}

function drawGrid(context) {
for (var x = 0.5; x < 10001; x += 10) {
  context.moveTo(x, 0);
  context.lineTo(x, 10000);
}

for (var y = 0.5; y < 10001; y += 10) {
  context.moveTo(0, y);
  context.lineTo(10000, y);
}

context.strokeStyle = "#ddd";
context.stroke();
}

function fillSquare(context, x, y){
context.fillStyle = "black"
context.fillRect(x,y,9,9);
points.push(x+","+y);
for (var i=points.length;i--;){

}
}

var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');

drawGrid(context);

canvas.addEventListener('click', function(evt) {
 var mousePos = getSquare(canvas, evt);
fillSquare(context, mousePos.x, mousePos.y)
}, false);


var myDataObj = new Object();
myDataObj.points = points;

$.ajax({  
type: "POST",
url: "localhost/website/addtodatabase.php",
data: JSON.stringify(myDataObj),
contentType: "application/json"
});

ph

Answers


PHPDave February 2016

This Function should be called by your submit button. Currently you have that javascript executing right away.

function PostDataToServer()
{
  var myDataObj = new Object();
  myDataObj.points = points;

  $.ajax({  
    type: "POST",
    url: "localhost/website/addtodatabase.php",
    data: JSON.stringify(myDataObj),
    contentType: "application/json"
  });
}

and your save button should be like:

<input id="saveBtn" type="button" value="Save" onclick="PostDataToServer();" />

then you should do this in your addtodatabase.php

<?php
//Lets dump the post data back to the screen to make
//sure we are actually getting the data
//::TODO:: comment the var_dump($_POST); after verifying your getting data
var_dump($_POST);

$myPoints = json_decode($_POST['points']);
$sql = "Insert into MYTABLE (Point,UserName) VALUES (?,?)";
$db =new PDO("mysql:host=localhost;dbname=box;","root","");
$sth = $db->prepare($sql);
if(count($myPoints)>0)
{
   foreach($myPoints as $point)
   {
     $sth->execute(array($point,$username));
   }
}
else
{
   echo 'No Points were set in the array $myPoints';
}

Also add jquery to your js

<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
</head>

Post Status

Asked in February 2016
Viewed 3,951 times
Voted 11
Answered 1 times

Search




Leave an answer


Quote of the day: live life