passing variable to PHP through javascript

Question

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?

http://tinsology.net/2009/06/client-side-vs-server-side-code/ — Paul, Mar 27 '12 at 20:29
I am not going to try to answer this myself and no doubt somebody will be able to point you to some good resources which show you how to achieve what you want (ajax and get requests), but I really would advise you to read into the basic theory of php (a server language which 'prepares' your code) and javascript (which runs in the browser). — David Mulder, Mar 27 '12 at 20:30
The first link explains why it doesn't work. The second explains (with examples) how you can query your database in a server side script and trigger that script to execute from the client side using Ajax. Here is a link to more explanation on what Ajax is: http://www.tizag.com/ajaxTutorial/index.php — Paul, Mar 27 '12 at 20:32
IDs cannot start with a number. This code should work otherwise. — j08691, Mar 27 '12 at 20:34
@j08691, correct, ID's cannot start with a number. However, this code will not work at all because he is mixing and matching server and client code. There are some definite temporal issues with this. — Jeff B, Mar 27 '12 at 20:36
@JeffB - It works 100%. I just tested it on my server. He just has the quotes wrong in his print statement. Should be `alert($id)`. — j08691, Mar 27 '12 at 20:40
@j08691 He wants the ID passed to the function to be fed to the server php. What is happening here is that the php is simply creating a local script that echos values. Nothing is ever sent to the server. — Jeff B, Mar 27 '12 at 20:42

Jeff B · Accepted Answer · 2012-03-27T20:45:57.627

2

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.

edited Mar 27 '12 at 20:45

answered Mar 27 '12 at 20:32

Jeff B

29,943
7
61
90

+1 Although it will treat ID as a constant first, if there is no constant it will treat it as a string and may also output a warning. – Paul Mar 27 '12 at 20:35
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? – Glenn Mar 27 '12 at 20:37
Thanks Paul. I am more familiar with how Perl treats barewords, and that depends on the script settings. I wasn't sure if php was similar in that regard. Good to know. – Jeff B Mar 27 '12 at 20:37
@Glenn, this is not trivial. It is not difficult, per se, but you need to understand the difference between server and client code. That is more than I can type here. However, look up AJAX in wikipedia or other resources. There are lots of tutorials as well on how to do such things. – Jeff B Mar 27 '12 at 20:40
@ Jeff B: Thanks, I'll look into that. For now the code does work when I use: < $id = "ID"; print "alert($id);"; >. But like you said I don't think it will be possible to query the database. – Glenn Mar 27 '12 at 20:47
2

@Glenn: yes, you will get a correct alert in that case, because your function is simply doing `alert(ID)`. You could skip the php altogether in that case. The server is not ever seeing the javascript variable, just the string `ID` which it sticks in the alert to become the name of a variable. I'm sorry if I am having difficulty articulating this, but it's not doing what you think it is. – Jeff B Mar 27 '12 at 20:51

score 1 · Answer 2 · answered Mar 27 '12 at 20:47

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.

Without JS (and ajax) it's impossible to submit data to the server without refreshing the page, that's what the last two lines of jQuery code are for. The nice thing about doing it this way is that it works regardless if the user has JS or not and you don't have to invent your own method for data submission but instead use what has worked for years (a simple HTML
) — powerbuoy, Mar 28 '12 at 00:06

passing variable to PHP through javascript

2 Answers2