Passing a PHP variable as a parameter using HTML onClick

Question

I looked through many similar examples, but I could not make this work.

So, I have this:

echo('<td colspan="3" style="background-color:#005673; text-align:right; padding: 4px 0px;">
      <button class="btnTrack" onClick="trackIt(' . $name . ')" >Track It!</button></td>');

That code is inside a for, so the variable $name will be different depending where I am at.

I am not trying to make things complicates, so first, I am just trying to pass that parameter to the function trackIt (I actually need to pass 2 of them.)

Then, I have a simple script (just to see if it will work):

<script>
//After you click on Track It

function trackIt(param) 
{
   alert("Hi!");
   alert(param);
}

</script>

However, it does not work.

If my onClick function is just onClick="trackIt()", then it works fine and I can alert "Hi!" by removing the parameter.

Thanks for the help! =]

You forgot to put quotes around your inserted variable. e.g. you're doing `foo(bar)`, making bar an undefined variable, instead of `foo('bar')`, making bar a string. — Marc B, Dec 02 '14 at 21:15

Sampath Liyanage · Accepted Answer · 2014-12-02T21:35:47.747

10

Try this..

echo('<td colspan="3" style="background-color:#005673; text-align:right; padding: 4px 0px;">
  <button class="btnTrack" onclick="trackIt(\'' . $name . '\')" >Track It!</button></td>');

Note: you have to use your way if the input parameter is a numeric value..

You are printing HTML as,

<td colspan="3" style="background-color:#005673; text-align:right; padding: 4px 0px;">
<button class="btnTrack" onclick="trackIt(test)" >Track It!</button></td>

But because the function trackIt needs a string as the input parameter, you have to print this..

<td colspan="3" style="background-color:#005673; text-align:right; padding: 4px 0px;">
<button class="btnTrack" onclick="trackIt('test')" >Track It!</button></td>

As you are using ' as boundaries to define strings in PHP, you have to escape it using \' in order to make ' character part of the string.

edited Dec 02 '14 at 21:35

answered Dec 02 '14 at 21:10

Sampath Liyanage

4,776
2
28
40

Now, I need to pass a second parameter using `onclick="trackIt(\'' . $name . '\')" `, should I create a different post for that question? – Felipe Dec 02 '14 at 21:31
1

@Felipe see if you can figure out how to pass another parameter first. – Popnoodles Dec 02 '14 at 21:32
1

I tried a few different things, but it did not work. Then, I read all of the comments again to better understand how it works, and thanks to @plbsam's new explanation, I was able to achieve it. Thanks guys! =] – Felipe Dec 02 '14 at 21:42
Great.. Better you not to ask question without trying.. Otherwise you will not survive when stackoverflow is dead.. :) – Sampath Liyanage Dec 02 '14 at 21:44

Ohgodwhy · Answer 2 · 2014-12-02T21:42:17.947

2

The reason this doesn't work is due to the fact that you're passing an unencapsulated string as an argument in your HTML, however, it's being interpreted as a javascript variable, such as:

Uncaught ReferenceError: ValueOf$name is not defined

' Or if the variable contains spaces or special characters:

 Uncaught SyntaxError: Unexpected identifier

To resolve this, you should encapsulate your string with quotations.

"trackIt(\'' . $name . '\')"

If you're using an integer, string encapsulation is not required.

jsFiddle examples

edited Dec 02 '14 at 21:42

answered Dec 02 '14 at 21:15

Ohgodwhy

49,779
11
80
110

Thanks for the explanation, however, `"trackIt(\"' . $name . '\")"` does not work! – Felipe Dec 02 '14 at 21:25
`"trackIt(\"' . $name . '\")"` won't work because you can't escape double-quotes in an attribute that's encapsulated with double-quotes. – Popnoodles Dec 02 '14 at 21:29

score 1 · Answer 3 · edited Aug 21 '17 at 19:55

1

For passing multiple parameters you can cast the string by concatenating it with the ASCII value like, for single quotes we can use &#39

var str= "&#39;"+ str+ "&#39;";

This works for me.

edited Aug 21 '17 at 19:55

Neels

2,547
6
33
40

answered Aug 21 '17 at 19:10

Mr Talha

705
7
13

score -3 · Answer 4 · answered Dec 02 '14 at 21:17

Even if other answers are true... If you do not need to really print all that html use php differently

echo('<td colspan="3" style="background-color:#005673; text-align:right; padding: 4px 0px;">
      <button class="btnTrack" onClick="trackIt(' . $name . ')" >Track It!</button></td>');

it can become:

<td colspan="3" style="background-color:#005673; text-align:right; padding: 4px 0px;">
          <button class="btnTrack" onClick="trackIt(<?php print $name;?>)" >Track It!</button></td>

Use php only when needed :)

This doesn't solve the problem - the generated HTML will still be broken. — Popnoodles, Dec 02 '14 at 21:31

Passing a PHP variable as a parameter using HTML onClick

4 Answers4