How to link this javascript and php? -
i wondering if point me in right direction on how this.
as can see here: https://jsfiddle.net/caute6y0/ have grid can select squares , highlighted. now, want user able submit selection , gets sent database.
so give pointers on how can know know boxes have been selected, , how have information sent database via php?
thanks
<body> <canvas id="mycanvas" width="800" height="800" style="position: absolute; top:0; bottom: 0; left: 0; right: 0; margin:auto;border: 1px solid grey;"></canvas> 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) { (var x = 0.5; x < 10001; x += 10) { context.moveto(x, 0); context.lineto(x, 10000); } (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); } 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);
create array of points user has selected. have done in example: https://jsfiddle.net/caute6y0/2/
then post data server in json format use following jquery:
var mydataobj = new object(); mydataobj.points = points; $.ajax({ type: "post", url: "www.example.com/test.php", data: json.stringify(mydataobj), contenttype: "application/json" }); then on php side need parse post data , save database
<?php $mypoints = json_decode($_post['points']); //save database $sql = "insert mytable (point,username) values (?,?)"; $db =new pdo("mysql:host=localhost;dbname=database;","root",""); $sth = $db->prepare($sql); foreach($mypoints $point) { $sth->execute(array($point,$username)); } 
Comments
Post a Comment