How to pass a PHP string variable through a hidden input element to a Javascript function

I'm using solr solarium for a multilingual corpus. Everything works as expected with regard to the retrieval of information in every language. In the following code I have two hidden input elements where I pass two php variables and then I'm trying to post the values of those elements to a javascript function in order to add a row to an existing table and display the values of my variables in its cells.

My php code is this: ...

if ($highlightedDoc) {              
    foreach ($highlightedDoc as $field => $highlight) {
      $hlight = implode(' (...) ', $highlight);                         
      echo '<table id="lngData" text-align:left; border:none;  cellpadding="02" cellspacing="02">';                     
    echo '<tr><td><b>' . $counter . '</b></td><td>' . $subj_en. '</td><td>' . $hlight . '</td></tr>';
    echo '<tr><td>' ."" . '</td><td>' . $subj_el . '</td><td>' .$con_el. '</td></tr>';
    echo '<tr><td><input id="q" name="q" type="hidden" value=' . $subj_fr . '/></td></tr>';
    echo '<tr><td><input id="s" name="s" type="hidden" value='. $con_fr . '/></td></tr>';
    echo '<tr><td>' ."" . '</td><td><button onclick="showLng(q, s);">Create row</button></td><td><button onclick="myDeleteFunction()">Delete row</button></td></tr>';
    echo '</table>';                    

    }

This is my javascript function showLng:

       function showLng(x, y) {
        var table = document.getElementById("lngData");
        x = document.getElementById("q").value; 
        y = document.getElementById("s").value; 
        var row = table.insertRow(0); 
        var cell1 = row.insertCell(0);
        var cell2 = row.insertCell(1);
        var cell3 = row.insertCell(2);
        cell1.innerHTML = "";
   cell2.innerHTML = x;
cell3.innerHTML = y;
}

The above onclick event adds the table row but it truncates the result sentence. It outputs the first word only of each sentence. Could someone help me with this? I read quite a few posts on how to pass php string variables to javascript but no good. Any help would be greatly appreciated. Thank you in advance.

Solution

Your main question is how to "pass" PHP data to Javascript... I remember this was confusing to me at first so let me explain step by step:

Let's say you output Javascript with PHP like this:

echo '<script> console.log("Hello"); </script>';

That will output string that is a script tag, and inside it we call console.log function passing as parameter the string "Hello". It all is just a string.

Now let's put the "Hello" string inside a variable in PHP:

$log = 'Hello';

echo '<script> console.log("' . $log . '"); </script>';

Now we've "passed" PHP data to Javascript. It's the same string as above.

Another example:

echo '<script>';
echo 'var hello = "";';
echo 'var world = "World";';
echo 'console.log(hello + " " + world);';
echo '<script>';

We want to fill the hello variable with PHP. So we just add it:

$helloString = 'Hello';

echo '<script>';
echo 'var hello = "' . echo $helloString . '";';
echo 'var world = "World";';
echo 'console.log(hello + " " + world);';
echo '<script>';

Notice that the PHP output is surrounded by " in Javascript, because even though we're outputing a string with PHP, if we ommit the " like this:

echo 'var hello = ' . echo $helloString . ';';

PHP won't add them neither, therefore the output in the browser will look like this:

var hello = Hello;

which is invalid, it must be:

var hello = "Hello";

You made this mistake in your code, in the HTML:

echo '<tr><td><input id="q" name="q" type="hidden" value=' . $subj_fr . '/></td></tr>';

So your output would be (assuming $subj_fr is a string "Hello World"):

<input ... value=Hello World />

Which is incorrect.

I notice that you're creating many tables with the same id (lngData), and your hidden inputs all have the same id too. I doubt that's intended is it?

In the following code a unique id is created for each table. I've also removed the hidden elements, and instead, the values are directly passed to the showLng function, along with the id of the table. I've also changed the way you build your HTML with PHP, I did this only to show you a different way (I'd say it looks cleaner) to output HTML with PHP, instead of using echo.

I don't know if fixing the duplicated ids is the answer to your question, but try it.

if ($highlightedDoc) {
    $i = 0;

    foreach ($highlightedDoc as $field => $highlight) {
        $hlight = implode(' (...) ', $highlight);
        $tableId = 'lngData' . $i;
?>
    <table id="<?= $tableId ?>" style="text-align:left; border:none;"  cellpadding="02" cellspacing="02">
        <tr><td><b><?= $counter ?></b></td><td><?= $subj_en ?></td><td><?= $hlight ?></td></tr>
        <tr><td><?= "" ?></td><td><?= $subj_el ?></td><td><?= $con_el ?></td></tr>
        <tr><td><!-- removed unneeded hidden input --></td></tr>
        <tr><td><!-- removed unneeded hidden input --></td></tr>
        <tr><td><?= "" ?></td><td><button onclick="showLng('<?= $tableId ?>', '<?= $subj_fr ?>', '<?= $con_fr ?>');">Create row</button></td><td><button onclick="myDeleteFunction()">Delete row</button></td></tr>
    </table>
<?php
        $i++;
    }
}

The showLng function:

function showLng(tableId, x, y) {
    var table = document.getElementById(tableId);
    var row = table.insertRow(0);
    var cell1 = row.insertCell(0);
    var cell2 = row.insertCell(1);
    var cell3 = row.insertCell(2);
    cell1.innerHTML = "";
    cell2.innerHTML = x;
    cell3.innerHTML = y;
}