How to insert a php array with innerHTML in javascript

Question

I would like to be able to insert html code from javascript, which inserts php code that contains an array. What I do is get in the variable $ teams an array of teams. And then I go through the array with a foreach to set the values in the select options

I have done the following but it does not work.

document.getElementById('selectTeam').innerHTML = '<select class="form-control"><?php $teams = ControllerTeam::ctrTeam(); foreach ($teams as $key => $value) { echo '<option value="'.$value["id"].'">'.$value["name"].'</option>';}?></select>';

what does "does not work" mean? it does not change the content? the content it changes to is not correct? — Cornel Raiu, Jul 10 '19 at 00:16
instead of the PHP code, try to hardcode an `` and see if that works — Cornel Raiu, Jul 10 '19 at 00:18
@cornel.raiu The console throws the following error: **login.js: 78 Uncaught TypeError: Can not set property 'innerHTML' of null**. I have tried with a simpler example and it works. I think the problem is the combination of double and single quotes in the php part inside the innerHTML — , Jul 10 '19 at 00:20
does this work? `document.getElementById('selectTeam').innerHTML = '';` — Cornel Raiu, Jul 10 '19 at 00:21
@cornel.raiu Yes. Now the simplest examples work. For now the problem is in the php part inside the inner, I think I'm sure it's because of the double and single quotes — , Jul 10 '19 at 00:23
is it possible that when you do it using PHP the `selectTeam` element is not loaded BEFORE the JS part? Are you doing the JS part onLoad or smth? Check this example with the exact same error you get: https://stackoverflow.com/questions/18239430/cannot-set-property-innerhtml-of-null — Cornel Raiu, Jul 10 '19 at 00:23
Possible duplicate of [Cannot set property 'innerHTML' of null](https://stackoverflow.com/questions/18239430/cannot-set-property-innerhtml-of-null) — Cornel Raiu, Jul 10 '19 at 00:24
The error is not related to the content you are trying to add but to the fact that JS does not find this: `document.getElementById('selectTeam')` since the JS loads before the content in your case hence it is null. So, JS sees it like: `(null).innerHTML='bla bla'` which is not valid — Cornel Raiu, Jul 10 '19 at 00:27
@cornel.raiu Yes. Already that error does not appear. What happens now is that, when printing the html that I indicate in innerHTML, the php part appears in the form of a comment. — , Jul 10 '19 at 00:29

score 2 · Accepted Answer · answered Jul 10 '19 at 00:36

First problem is that, probably, the content is loaded after the JS so the selector returns null hence the error in the OP code. Cannot set property 'innerHTML' of null

That means, you should only execute the JS code on window.load or any other similar event that ensures the fact that the HTML is loaded before trying to execute.

Now, for the other issue in the comments, if you rewrite the PHP code like this :

<?php
$teams = ControllerTeam::ctrTeam();

$options_html = '';
foreach ($teams as $key => $value) { 
    $options_html .= '<option value="' . $value["id"] . '">' . $value["name"] . '</option>';
}?>

And in the JS - make sure it loads on window.load or similar -

document.getElementById('selectTeam').innerHTML = 
    '<select class="form-control"><?php echo $options_html ?></select>';

This makes the code more readable and helps you debug easier.

Glad I was able to help! – Cornel Raiu Jul 10 '19 at 00:38 — Cornel Raiu, Jul 10 '19 at 00:38

JC Hernández · Answer 2 · 2019-07-10T13:34:59.793

0

There is a typo in your code. Please change it to:

document.getElementById('selectTeam').innerHTML = '<select class="form-control"><?php
$teams = ControllerTeam::ctrTeam();
foreach ($teams as $key => $value) {
    echo '<option value="' . $value["id"] . '">' . $value["name"] . '</option>';
}
?></select>';

edited Jul 10 '19 at 13:34

answered Jul 10 '19 at 00:05

JC Hernández

777
3
13

The code you have given me also contains a typing error. I have put it in my project and it gives error – Jul 10 '19 at 00:08
I think the problem is double and single quotes – Jul 10 '19 at 00:09
2

why don't you prepare the options string outside the JS and only add a variable there. The code will be much more readable. – Cornel Raiu Jul 10 '19 at 00:15

How to insert a php array with innerHTML in javascript

2 Answers2