How to pass a JavaScript array into an inline function call generated by PHP

Question

I have build a dynamic list from an array and must print the onclick event inline, I don't know of anyway other way to do this.

<?php

$dataArray = $_POST['dataArray']; // This is a valid array

ECHO '<div id="colorSelectorBox">';

for ($btn = 0; $btn < sizeof($dataArray); $btn++){
    ECHO '<div class="btn-group">
              <button onclick="buildGroupList("'.$dataArray.'")">' .$dataArray[$btn].'</button>
              <button><div ..Stuff..></div></button>
          </div><br>'; 
}
ECHO '</div>';

?>

The problem is that the JavaScript function buildGroupList() does not receive an array from this instead the line looks like this in my developer tool:

onclick="buildGroupList(Array)"

How can I pass in an array of values through to JavaScript?

OR

How can I re-write this so that the call is not inline?

I don't understand. Where would that go?

Nate May
– Nate May

2015-08-20 21:42:51 +00:00
Commented Aug 20, 2015 at 21:42 — Nate May
– Nate May, Commented Aug 20, 2015 at 21:42

Nik Chankov · Accepted Answer · 2015-08-20 21:48:50Z

3

The shortest answer is: use json_encode() which will convert the array to a json string, but it's not good practice anyway.

answered Aug 20, 2015 at 21:48

Nik Chankov

6,0371 gold badge22 silver badges30 bronze badges

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

1 Comment

Nate May Over a year ago

I'm having a hard time converting the result into an array once it's in JS

Community · Accepted Answer · 2020-06-20 09:12:55Z

2

Because you are trying to print the array as if automagically transforms itself into javascript array, that is, a string of its values separated by a comma (that is what it needs to output to the html, something the browser understands).

For that you need implode:

string implode ( string $glue , array $pieces )

Join array elements with a $glue string.

ECHO "<div class=\"btn-group\">
    <button onclick=\"buildGroupList(['".implode("','",$dataArray)."'])\">" .$dataArray[$btn]."</button>
         <button><div ..Stuff..></div></button>
    </div><br>";

It takes every element in the array and puts $glue string between every one of them. The end result looks like this:

//let's assume this is your array in PHP
<?php
    $dataArray = array('one','two','three');
?>

<!-- then your HTML looks like this -->
<button onclick="buildGroupList(['one','two','three'])">...</button>

Remember that PHP and Javascript don't know each other.

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Aug 20, 2015 at 21:50

Z-WolF

4092 silver badges8 bronze badges

3 Comments

Nate May Over a year ago

Didn't work. The JavaScript function takes an array as its parameter, not a list of comma separated strings.

Nate May Over a year ago

Thanks, I'm still having trouble but this might be an issue with the single and double quotes

Z-WolF Over a year ago

use double quotes in PHP so you can escape the ones needed in the HTML with a "\" as i did above, the "\" won't show in the HTML.

Collectives™ on Stack Overflow

How to pass a JavaScript array into an inline function call generated by PHP

2 Answers 2

1 Comment

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related