How to get the value from GRID using JQuery?

Question

just want to ask if you can help me with my problem,

I have a grid in my form created using JQuery, and I want to get the value inputted by the user on that grid and save it into my DB.

the flow goes like this,

first, they will select the no. of sites (no. of cell to be shade), then they will click the right cell they want. then after that my problem starts, how can I get the value they inputted then save it.

here's the working demo of my code:

http://jsfiddle.net/reymartinaruta/qnm96/

var CMAP = function() {

    // animation
    var blink = function(id)
    {
        $(id).animate({opacity: 0.2}, 300).delay(400)
                .animate({opacity: 1}, 300,
                function()
                {
                    blink();
                }
        );
    };

    return {
        //create map function to initiate the module
        initCreateMAP: function()
        {
            var html = '<table>';
            for (i = 0; i < 15; i++)
            {
                html += "<tr>";
                for (j = 0; j < 15; j++)
                {
                    html += '<td><div id="p' + ((i * 15) + j)  + '" class="mappoint" style="width:20px; height:20px;"></div></td>';
                }
                html += "</tr>";
            }

            html += "</table>";            
            $('#layout').html(html);

        },

        // main function to initiate        
        initCMAP: function()
        {            
            var Point = new Array();

            $('#select5').change(function(){
                Point.length =  0;
                $(".mappoint-change").each(function () {
                        $(this).removeClass('mappoint-change');
                        $(this).html('');
                });

                for(i=0; i < parseInt($('#select5').val()); i++) Point.push(i);

            });

              $('.mappoint').click(function() {

                  var text = $(this).text();

                  if(text != '')
                  {
                      Point.unshift(parseInt(text));
                      $(this).html('');
                      $(this).removeClass('mappoint-change');
                  }
                  else
                  {
                        Point.sort(function(a,b){
                            return a-b;
                        });

                        if(Point.length == 0) return false;

                        for(var i in Point)
                        {
                              $(this).addClass('mappoint-change');
                              blink(this);
                              $(this).html(Point[i]);
                              Point.shift();
                              break;
                        }
                  }
              });              

           var data = new Array();
           //var data = [ "p0", "p1", "p2", "p33", "p49", "p65", "p127", "p140", "p141", "p142"];

           $('#submit').click(function() {
//                $.post('cmap.action.php', $('#requestfrm').serialize(),
//                        function(data) {
//                            $('#rq-info').html(data);
//                        }
//                );

//                for(i=0; i<data.length; i++)
//                {
//                    $('#' + data[i]).addClass('mappoint-change');
//                    $('#' + data[i]).html(i);
//                }

                $(".mappoint-change").each(function () {                    
                     data.push(this.id);
                });

            });

            $('#reset-cmap').click(function() {
                if(confirm("Do you want to reset your map?"))
                {    
                    $(".mappoint-change").each(function () {
                        Point.unshift(parseInt($(this).text()));
                        $(this).removeClass('mappoint-change');
                        $(this).html('');
                    });
                }
            });
        }       
    };

}();

Thank you very much.

Answer 1

Try this code. It reads the ID and convert it to coordinates X and Y

Demo: jsFiddle

        var pointOrder=$(this).attr("id").replace("p","");
        pointOrder=parseInt(pointOrder);

        var corX=parseInt(pointOrder/15);
        var corY=pointOrder%15;