How to pass the table cell value via ajax to php

Question

I want to when i click table that cell value pass to php via ajax show that value in alert box. I wrote code but its show alert box value like [object HTMLTableCellElement]..

Anyone help,

Here my code:

function found(row) {
     
     var table=document.getElementById("table");
     var rows = table.getElementsByTagName("tr");
     for (var i = 0; i < rows.length; i++) {
  rows[i].onclick = (function() {
            
            return function() {
             var result = this.cells[1];
             var plate  = this.cells[6];
             var km  =  this.cells[7];
             var dataString = 'plate=' + plate + '&km='+km;
             $.ajax({
                type: 'POST',
                url: 'km.php',
                async: true,
                data: dataString,
                cache: false,
                global: false,
                success: function(result) {
                 alert("succ : " + result);
                   
                }
            });
             
            }    
        })(i);
    }
 }

My php:

<?php
$plate = $_POST['plate'];
$km = $_POST['km'];
echo $plate;
echo $km;

?>

Barmar · Answer 1 · 2015-04-25T10:11:33.347

1

You're setting the variables to the table cell elements, not the text in them.

var result = this.cells[1].textContent;
var plate = this.cells[6].textContent;
var km = this.cells[7].textContent;

BTW, there doesn't seem to be a need to use the IIFE pattern around your onclick function. That's only needed if the function refers to i, but it doesn't.

BTW, you can write the whole thing more succinctly using jQuery:

$("#table tr").click(function() {
    var cells = $(this).find('td');
    var result = cells.eq(1).text(); // This isn't used?
    var plate = cells.eq(6).text();
    var km = cells.eq(7).text();
    $.ajax({
        type: 'POST',
        url: 'km.php',
        async: true,
        data: {plate: plate, km: km},
        cache: false,
        global: false,
        success: function(result) {
            alert("succ : " + result);

        }
    });
});

edited Apr 25 '15 at 10:11

answered Apr 25 '15 at 09:50

Barmar

741,623
53
500
612

Then how.. Can you tell – appu Apr 25 '15 at 09:51
1

What are you trying to ask? – Barmar Apr 25 '15 at 09:52
@appu It's right there in the answer... And you should not bind an event handler for every row, you only need one. – jeroen Apr 25 '15 at 09:53
@jeroen There's nothing wrong with binding an event handler for each row. – Barmar Apr 25 '15 at 09:58
There doesn't seem any reason to do that here (the loop), `this` will be the clicked row either way. – jeroen Apr 25 '15 at 10:02
What should he bind the handler to instead of the row? If he binds it to the table, `this` will be the table, not the current row. – Barmar Apr 25 '15 at 10:03
Sorry, you're right, it's the mix of plain js and jQuery that got me confused. I would have used something like `$('table').on('click', 'tr', ...` instead: All jQuery or none at all, for the values too. – jeroen Apr 25 '15 at 10:05
I need replace alert box to confirm box.. If i click OK means call another function... How to do – appu Apr 28 '15 at 07:40
`if (confirm("succ: " + result)) { anotherFunction(result)); }` – Barmar Apr 28 '15 at 13:54

How to pass the table cell value via ajax to php

1 Answers1