How do I transfer data from JavaScript to PHP? - php

Question

How can I use the clicked element's inner HTML in PHP as described below?
$(function () {
$(".topic-list-items").click(function () {
// document.getElementById("content-of-the-topic").innerHTML= $(this).context.innerHTML;
<?php
$dbhost = '127.0.0.1';
$dbuser = 'root';
$dbpass = '';
$conn = mysql_connect($dbhost, $dbuser, $dbpass);
if (!$conn) {
die('Could not connect: '.mysql_error());
}
// here I want to table name dynamically, that is, "SELECT id FROM table". $variable
$sql = "SELECT id FROM ";
//$ variable is the clicked element's innerHTML
mysql_select_db('entries_database');
$retval = mysql_query($sql, $conn);
if (!$retval) {
die('Could not get data: '.mysql_error());
}
?>
});
});

Answer 1

You need to make an AJAX call to your PHP script and have the contents of your element as a data parameter.
data: {my_data: $(".topic-list-items").html()}
Or, if you have more of them, you can grab the contents from the click function using $(this):
$(".topic-list-items").click(function () {
data: {my_data: $(this).html()}
...
})
Then you can access it from the PHP using something like $_POST['my_data'].
Here's an example:
$.ajax({
type: "POST",
url: "my_php_script.php",
data: {my_data: $(".topic-list-items").html()}
}).done(function( msg ) {
alert( "PHP says: " + msg ); // you can do whatever you want here
});
EDIT
And please stop using mysql_* functions as they are deprecated. See here: http://www.php.net/manual/en/function.mysql-query.php
Also, pay attention to SQL injection by filtering any inputs (although the input comes from the DOM element, it's easily converted into a database attack).

Answer 2

Your php is running server side, javascript is running client side. If you want to get those values to you php, you will need to submit them back to the server.
Check out ajax for that.

Answer 3

You can't just put server side php code into your client side JScript code and expect it to be executed. It can be done, though this is usually not the way it is implemented.
If you're already using JQuery, please start with using AJAX functions like jQuery.get(). It might be easier to begin with shorthand functions like jQuery.load() in order to get a first impression how these functions works. They have some good examples in the manual, too.

Answer 4

You could use the jquery ajax functions
//the get method
$.get('file.php', function(data) {
$('.result').html(data);
alert('Load was performed.');
});
http://api.jquery.com/jQuery.get/
//the load function
$('#result').load('file.php');
http://api.jquery.com/load/

Answer 5

Add a hidden form element with #hiddenElementId in your HTML then assign the value to whatever you like, and submit the form. This will post the parameter to your php target.
var myInnerHTML;
$(".topic-list-items").click(function() {
myInnerHTML= $(this).context.innerHTML;
$("#hiddenElementId").val(myInnerHTML);
$("#formId").submit();
}