passing variable to PHP through javascript [duplicate] - php

Question

This question already has answers here:
How do I pass variables and data from PHP to JavaScript?
(19 answers)
Closed 8 years ago.
I'm kinda new to working with JS and PHP and stumbled upon a little problem. Im trying to pass the ID of a textbox I clicked through to PHP and then query a database with that ID. I tried the following code to check if the variable gets passed on, but nothing is alerted:
<script type="text/javascript">
function Like(ID)
{
<?php
$id = ID;
print "alert('$id');";
?>
}
</script>
<input type="text" id="1" onclick="Like(this.id)" >
What I'm trying to accomplish:
I've got a database of videos with a unique ID. I have 2 buttons next to each video for either liking or disliking. The 2 buttons will have an id based on the ID of the video. For example video number 2 has 2 buttons: like(id=L2) and dislike(id=D2). When the user clicks either one of those buttons, I want to update the videos table's "likes" column without the page reloading. Would that be possible?

Answer 1

You aren't going to be able to do this the way you have written it. PHP runs once on page load. So, when you click the input, your function will already be evaluated by php as this:
<script type="text/javascript">
function Like(ID)
{
alert('ID');
}
</script>
The ID is a bareword to php, so it treats it like a constant if defined, or a string (and may generate a warning). Assuming you don't have a contant ID, then it prints the alert line with the string "ID" in the $id variable.
By the time your javascript is called, all you will ever get is alert('ID').
To query a database, you have to pass the data back to the server. This will either load a new page, or if you want it to happen without a page load, you need to make the call to the server asynchronously (in the background), and modify the page based on the result. This is called AJAX. You will need to understand how server-code (php) and client-code (php) work, and then you will better be able to understand how AJAX brings those together to do what you want.

Answer 2

Since you asked this in a comment:
Well, I've got a database of videos with a unique ID. I have 2 buttons next to each video for either liking or disliking. The 2 buttons will have an id based on the ID of the video. For example video number 2 has 2 buttons: like(id=L2) and dislike(id=D2). When the user clicks either one of those buttons, I want to update the videos table's "likes" column without the page reloading. Would that be possible?
I'll tell you a way to achieve it, and it doesn't even require Javascript! :) (at least at first).
It's an old fashioned HTML form element. Since you'll be posting data you should use action post. The code can look like this:
<form method="post" action="/requests/like-video/" class="like-video">
<div>
<input type="hidden" name="video_id" value="<?php echo $video->id ?>">
<input type="submit" value="Like">
</div>
</form>
<form method="post" action="/requests/dislike-video/" class="dislike-video">
<div>
<input type="hidden" name="video_id" value="<?php echo $video->id ?>">
<input type="submit" value="Dislike">
</div>
</form>
Once you have that in place (and working) it's just a matter of hijaxing those forms. A super easy way of doing that is to use jQuery's Form plugin and simply run:
$('form.like-video').ajaxForm(OPTIONS_GO_HERE);
$('form.dislike-video').ajaxForm(OPTIONS_GO_HERE);
Doing it this way ensures users without JS also get a fully functional site.
It's called progressive enhancement.