Pass HTML table row to PHP via AJAX using POST

Question

I have a page with an HTML table containing results from a query. Next to each row, I have a button that, when clicked, make a lightbox appears with a small HTML form where the user can enter a comment.

When the user clicks the submit button on this form, it should then send the data contained in the row (ie, each cell value as an array if that's possible) as well as the comment to a script, which will insert them in a database.

After it is done, a small message saying so appears, and the user can go back to the table as the lightbox disappears.

My problem is transmitting the data to the PHP script that will process it. The AJAX JavaScript works alright, except that I don't know how to send the data.

Here is the code :

function getOutput() {
  //Get number of selected table row
  var i = document.getElementById('rowclicked').value;
  //Get the table
  var table = document.getElementById('table');
  //Get the comment
  var comm = document.getElementById('comment').value;
  var ajax = getRequest();
  ajax.onreadystatechange = function(){
      if(ajax.readyState == 4){
          alert(ajax.responseText);
      }
  }
  ajax.open("POST", "functions_comm.php", true);
  ajax.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
  //Only try to send the table row for now
  ajax.send(table.rows[i]);
}

If I put "php echo "test"; " in "functions_comm.php", "alert(ajax.responseText);" displays "test", so that part is working. However, if I try to "print_r($_POST)", it returns an empty array, which I assume means that no data was passed by "ajax.send(table.rows[i]);".

How can I pass the data from the row i of the table to the php script ?

Thanks.

Try alerting/printing to console the value of table.rows[i]. This will let you see if it's actually empty or not. — General_Twyckenham
– General_Twyckenham, Commented Jul 25, 2013 at 14:45

VaclavSir · Accepted Answer · 2013-07-25 14:57:06Z

3

You can't send an instance of DOMElement. You can send only a string, so if you want to send text of that element, use its innerHtml property.
The message body should be URL-encoded (when sending as application/x-www-form-urlencoded).

ajax.send("tableData=" + encodeURI(table.rows[i].innerHtml));

answered Jul 25, 2013 at 14:57

VaclavSir

6251 gold badge5 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Jake N · Accepted Answer · 2013-07-25 14:59:07Z

0

Try

ajax.send("tableData=" + table.rows[i]);

Instead of

ajax.send(table.rows[i]);

EDIT

I think user1031794 might be right, encoding is required

ajax.send("tableData=" + encodeURI(table.rows[i].innerHtml));

edited Jul 25, 2013 at 14:59

answered Jul 25, 2013 at 14:47

Jake N

10.6k12 gold badges69 silver badges114 bronze badges

3 Comments

user2618988 Over a year ago

It seems to be working, thanks. But how can I get the value in the PHP ? The following doesn't seem to work. foreach ($_POST as $value) { echo $value; }

Jake N Over a year ago

Try var_dump($_POST) - whats that show? Remember that you will need to do this via AJAX with the post data, entering the URL in your browser won't show anything for post as it will be doing a get request.

user2618988 Over a year ago

Encoding seems to do the trick. At least a var_dump has the data, even though it's mingled with a lot of other caracters. I guess I have to decode it, or something like that.

Collectives™ on Stack Overflow

Pass HTML table row to PHP via AJAX using POST

2 Answers 2

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related