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
– Marc B, Commented Dec 2, 2014 at 21:15

Sampath Liyanage · Accepted Answer · 2014-12-02 21:35:47Z

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 2, 2014 at 21:35

answered Dec 2, 2014 at 21:10

Sampath Liyanage

4,8962 gold badges32 silver badges42 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Felipe Over a year ago

Now, I need to pass a second parameter using onclick="trackIt(\'' . $name . '\')" , should I create a different post for that question?

Popnoodles Over a year ago

@Felipe see if you can figure out how to pass another parameter first.

Felipe Over a year ago

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! =]

Sampath Liyanage Over a year ago

Great.. Better you not to ask question without trying.. Otherwise you will not survive when stackoverflow is dead.. :)

Ohgodwhy · Accepted Answer · 2014-12-02 21:42:17Z

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 2, 2014 at 21:42

answered Dec 2, 2014 at 21:15

Ohgodwhy

50.9k11 gold badges86 silver badges114 bronze badges

2 Comments

Felipe Over a year ago

Thanks for the explanation, however, "trackIt(\"' . $name . '\")" does not work!

Popnoodles Over a year ago

"trackIt(\"' . $name . '\")" won't work because you can't escape double-quotes in an attribute that's encapsulated with double-quotes.

Neels · Accepted Answer · 2017-08-21 19:55:27Z

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, 2017 at 19:55

Neels

2,5436 gold badges36 silver badges41 bronze badges

answered Aug 21, 2017 at 19:10

Mr Talha

8359 silver badges14 bronze badges

Comments

Marco Mura · Accepted Answer · 2014-12-02 21:17:45Z

-3

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 :)

answered Dec 2, 2014 at 21:17

Marco Mura

5822 silver badges13 bronze badges

1 Comment

Popnoodles Over a year ago

This doesn't solve the problem - the generated HTML will still be broken.

Collectives™ on Stack Overflow

Passing a PHP variable as a parameter using HTML onClick

4 Answers 4

4 Comments

2 Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

4 Comments

2 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related