return highlighted cells to php

Question

So I am using the example code from this link Select Cells On A Table By Dragging to build a grid of numbers 1-192 that part works great, but I am curious how would I return the "highlighted" cells to php?

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  <title></title>
  <style type="text/css" media="screen">
    table td {
      width:50px;
      height:50px;
      text-align:center;
      vertical-align:middle;
      background-color:#ccc;
    }

    table td.highlighted {
      background-color:#999;
    }
  </style>
</head>
<body>
<form action='test.php' method='post'>
  <table cellpadding="0" cellspacing="1" id="our_table">
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
</tr>
<tr>
<td>d</td>
<td>e</td>
<td>f</td>
</tr>
<tr>
<td>g</td>
<td>h</td>
<td>i</td>
</tr>
</table>
    <table>
        <tbody>
        <tr>
            <input type='submit' name='test' value = 'test' />
        </tr>
</tbody>
  </table>
  </form>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" charset="utf-8">
$(function () {
var isMouseDown = false;
$("#our_table td")
.mousedown(function () {
isMouseDown = true;
$(this).toggleClass("highlighted");
return false; // prevent text selection
})
.mouseover(function () {
if (isMouseDown) {
$(this).toggleClass("highlighted");
}
})
.bind("selectstart", function () {
return false; // prevent text selection in IE
});

$(document)
.mouseup(function () {
isMouseDown = false;
});
});
</script>
</body>

** added in the button

First you need to define exactly what it is that you want to send to PHP (what exactly does "return the highlighted cells" mean to you?). Then you need to figure out how to get that information into a variable. _Then_ you'd use ajax to actually send the data to the server. — Patrick Q, Apr 19 '16 at 18:48
So in the example if a,d,e are selected then I hit "ok"(i know I forgot to add that button yet) then it would return an array with a,d,e in it to PHP — user2136748, Apr 19 '16 at 18:49

score 1 · Accepted Answer · answered Apr 19 '16 at 19:51

This might need some slight modification for your specific case, but it should be pretty close to what you need. I've included comments to indicate what's happening.

// bind a click handler to your button
$("input[name='test']").on("click", function() {

    var selectedValues = [];

    // iterate through each of the highlighted cells
    $(".highlighted").each(function(){
        // push the content of the current cell into the array
        selectedValues.push($(this).text()); 
    });

    // invoke ajax to send the data to your server
    $.ajax({
        url: "http://yourdomain.com/somepage.php",
        method: "GET",
        data: {
            selectedValues: selectedValues
        },
        success: function(){
            alert("It Worked!");
        },
        error: function(){
            alert("It Didn't Work :(");
        }
    });
});

Thank you! I had figured out the part for getting the values and I was just looking into the ajax more closely but that is perfect and gives me enough to dig deeper into the ajax and play with it more and learn Thanks! — user2136748, Apr 20 '16 at 14:17

return highlighted cells to php

1 Answers1