Pass PHP string variable to Javascript function

Question

I have a Javascript function which changes the background color of a DIV ID. I just send it the DIV ID and the Color. changeBG(DivID, Color)

I would like the Div ID to be a variable, so I can set the variable and then call the function. It works fine if I hard code the literal string of the Div ID - 'floorData2" in the example below. I have a PHP variable ($floorDiv) which contains the Div ID and would like to replace 'floorData2' with $floorDiv in the call to the changeBG() function.

I have tried single quotes, double quotes, escaped quotes in every combination I can think of. I still can't make it work. What is the correct syntax to use the variable $floorDiv?

<?php
    $floorCount =5;
    $floorNow = 1;
    while ( $floorNow <= $floorCount) {
        $floorDiv = 'floorData1'; /* this will change based on floorNow */
    echo '<div class="FloorH">
            &nbsp;First Floor <button onclick="changeBG(\'floorData2\',\'#F0F\');">Magenta</button>
    </div>';
    echo "<div id='floorData$floorNow'>";

    echo "</div>";
    $floorNow = $floorNow + 1;
    }
    ?>

echo '<button onclick="changeBG(\'' . $floorDiv . '\',\'#F0F\');">'; — Jeff
– Jeff, Commented Jun 16, 2016 at 5:51
also have a look at HEREDOC! That syntax reduces problems like that. — Jeff
– Jeff, Commented Jun 16, 2016 at 5:52
Thanks Jeff. That worked great. I should of asked the question 4 hours ago. — Rob
– Rob, Commented Jun 16, 2016 at 6:23

Kevin Yan · Accepted Answer · 2016-06-16 06:05:38Z

2

Change your Line 5 - Line 7 code to:

echo '<div class="FloorH">
            &nbsp;First Floor <button onclick="changeBG(\'' . $floorDiv . '\',\'#F0F\');">Magenta</button>
      </div>';

because PHP will not parse variable inside single quote quoted string .

More detail of variable parsing within double quotes string you can check out this php documentation variable parsing

edited Jun 16, 2016 at 6:05

answered Jun 16, 2016 at 5:57

Kevin Yan

1,23411 silver badges20 bronze badges

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

Comments

Phil · Accepted Answer · 2016-06-16 05:58:25Z

1

PHP alternative syntax is much easier for HTML templating

<?php for ($floorNow = 1; $floorNow <= 5; $floorNow++) :
      $floorDiv = 'floorData' . $floorNow;
?>
    <div class="FloorH">
        &nbsp;First Floor
        <button value="<?= htmlspecialchars($floorDiv) ?>" 
                onclick="changeBG(this.value, '#F0F')">Magenta</button>
    </div>
    <div id="<?= $floorDiv ?>"></div>
<?php endfor ?>

edited Jun 16, 2016 at 5:58

answered Jun 16, 2016 at 5:52

Phil

166k25 gold badges265 silver badges269 bronze badges

1 Comment

Rob Over a year ago

Thank You Phil. That code is much cleaner than mine. It will take me a few more edits than Jeff's solution, but I will check out the alternative syntax.

Pavel · Accepted Answer · 2016-06-16 06:19:03Z

1

Try this one

<?php
$floorCount =5;
    $floorNow = 1;
    while ( $floorNow <= $floorCount) {
        $floorDiv = 'floorData'.$floorNow; /* this will change based on floorNow */
    echo '<div class="FloorH">
            &nbsp;First Floor <button onclick="changeBG(\''.$floorDiv.'\',\'#F0F\');">Magenta</button>
    </div>';
    echo "<div id='floorData".$floorNow."'>";

    echo "</div>";
    $floorNow = $floorNow + 1;
    }

?>

answered Jun 16, 2016 at 6:19

Pavel

613 bronze badges

Comments

Vinie · Accepted Answer · 2016-06-16 06:19:48Z

1

Try this

<?php
$floorCount =5;
$floorNow = 1;
while ( $floorNow <= $floorCount)
{
    $floorDiv = 'floorData1';
?>
    <div class="FloorH">
        &nbsp;First Floor <button onclick="changeBG('<?=$floorDiv?>','#F0F');">Magenta</button>
    </div>
    <div id='floorData<?=$floorNow?>'>

    </div>
<?php
    $floorNow = $floorNow + 1;
}
?>

edited Jun 16, 2016 at 6:19

answered Jun 16, 2016 at 5:56

Vinie

2,9931 gold badge20 silver badges30 bronze badges

2 Comments

Phil Over a year ago

Needs <div id="floorData<?= $floorNow ?>">

Vinie Over a year ago

Thanks :) @Phil i missed that.

Davinder Kumar · Accepted Answer · 2016-06-16 06:25:18Z

0

Yes you can do it easily. suppose you have function.

  <script>
  function test(param)
 {
    alert(param);
 }
 </script>

now to call function.

<script>
  test("<?php echo addslashes($a) ; ?>");
</script>

edited Jun 16, 2016 at 6:25

answered Jun 16, 2016 at 6:08

Davinder Kumar

6724 silver badges19 bronze badges

2 Comments

Phil Over a year ago

What if $a contains quote characters, eg $a = 'I have "quote" characters';?

Davinder Kumar Over a year ago

then you can use addslashes. i am updating the code.

Lordran · Accepted Answer · 2016-06-16 07:06:36Z

0

You could do it like this:

    echo "<div class=\"FloorH\">
            &nbsp;First Floor <button onclick=\"changeBG(\"{$floorDiv}\",\'#F0F\');\">Magenta</button>
    </div>";

Or use HereDoc like this:

    echo <<<HTML
    <div class="FloorH">
            &nbsp;First Floor <button       onclick="changeBG('{$floorDiv}','#F0F');">Magenta</button>
    </div>
    <div id='floorData$floorNow'></div>
HTML;

Just as you see,HereDoc is very simple. Hope these could help you and the others.

answered Jun 16, 2016 at 7:06

Lordran

6838 silver badges19 bronze badges

Collectives™ on Stack Overflow

Pass PHP string variable to Javascript function

6 Answers 6

Comments

1 Comment

Comments

2 Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

Comments

1 Comment

Comments

2 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related