Pass HTML table row to PHP via AJAX using POST
ajax, javascript, php, post
Solution
- 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));`
Problem
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.