passing javascript variable in php file to html

Question

I am just wondering on one thing that I cannot solve until now.

I have one php file, with the following code.

doInit.php

<?
    include 'connect.php';
    session_start();
    if(isset($_SESSION['detailid'])){
        $detailid = $_SESSION['detailid'];
        $resutlinit=mysql_query("select Nama,Kelas,Ranking,Level,Exp,Sekolah from MsDetail where DetailID='$detailid'");

        if(mysql_num_rows($resutlinit)!='0'){ 
            $row = mysql_fetch_array($resutlinit);
            $nama = $row['Nama'];
            $kelas = $row['Kelas'];
            $ranking = $row['Ranking'];
            $level = $row['Level'];
            $exps = $row['Exp'];
            $sekolah = $row['Sekolah'];
        }else echo("Nothing here, try to more detail on your code");
    }else {header("location:index.html");}

?>
<script type="text/javascript">
    var nama = "<?= $nama ?>";
    var kelas = "<?= $kelas ?>";
    var ranking = "<?= $ranking ?>";
    var level = "<?= $level ?>";
    var exps = "<?= $exps ?>";
    var sekolah = "<?= $sekolah ?>";
    //document.writeln(nama);
    //document.writeln(kelas);
    //document.writeln(ranking);
    //document.writeln(level);
    //document.writeln(exps);
    //document.writeln(sekolah);
</script>

and I want to write the javascript file on my inside div.

This is what I wrote in my div HTML Editor.

<script type="text/javascript">
    document.writeln(nama);
</script>

and this doesn't work.

I tried to add some src things on PHP File like

<script type="text/javascript" src="target.html"></script>

but it has no luck.

and I tried to add that src into the target html like

<script type="text/javascript" src="doInit.php"></script>

and this too is not working for me.

Any suggestion how to solve this? Thanks for attention :)

Sorry for editing after 2 answers are here.

nope, it is just blank. in target.html nothing shows on it. The things is I want I can put the var nama on php files into a text field that i place it in target.html. Is that possible? Sorry if my language is hars or something like it, my main language is not english though. — Lazuardy Kamil, Jan 15 '14 at 07:00
try `var nama = "";` instead then `console.log(nama)` instead of `writeln() see what you get. have you checked to see if you are getting results from mysql? don't use mysql_* in php. use mysqli or PDO instead. — adamS, Jan 15 '14 at 07:01
note : if you ask about that document.writeln(nama) in the php file, yes it success print value that i want. — Lazuardy Kamil, Jan 15 '14 at 07:03

oxfn · Accepted Answer · 2014-01-15T08:59:03.977

First, to set textbox value document.writeln is not what you need. You should do it like this:

<input id="myInput" type="text"/>
<script type="text/javascript">
document.getElementById('myInput').value = myInputValue;
</script>

Also, you must be sure, that all needed JS loaded in appropriate order.

NOTE: I see, you're not using any PHP framework. This way, one possible approach I might suggest here to optimize your code is to use standard PHP function json_encode. But then you should compound all your JS vars into one object:

PHP:

<?php
// Database work
if(mysql_num_rows($resutlinit)!='0'){ 
    $row = mysql_fetch_array($resutlinit);
}
// ...
?>
<html>
<head>
<script type="text/javascript">
var data = <?php echo json_encode($row); ?>;
</script>
</head>
<body>
    <form>
        <input id="myInput" type="text"/>
    </form>
    <!-- Here your form is already loaded -->

    <!-- Perform any JS activity on page at end of body -->
    <script type="text/javascript">
        document.getElementById('myInput').value = myInputValue; // As it goes in database row
    </script>
</body>
</html>

UPD: If you need to assign input value on page load only, you can do it in very simple way:

<input id="namaInput" type="text" value="<?php echo $row['Nama']"/>

do i need to wrote the src thing in my target.html to make this works? — Lazuardy Kamil, Jan 15 '14 at 07:23
it doesn't work. the problem is i need to stay the target.html in form of html file, i can't change it into php file extension. any idea? — Lazuardy Kamil, Jan 15 '14 at 11:12
OK, please show content of `target.html` and describe it's role in your project — oxfn, Jan 15 '14 at 11:20

user1853181 · Answer 2 · 2014-01-15T07:07:29.137

document.writeline() replaces the contents of the whole page with the argument provided to it.

For the purpose of previewing the variable value use console.log() or, in more extreme use cases, alert().

As for using those values in your HTML document, you can use:

<input type="text" id="myNamaInputField" />

And in your javascript code:

var nama = "<?= $nama ?>";
document.getElementById("myNamaInputField").value = nama;

Which will populate your input field with the value of the javascript variable.

Pay attention to either put your javascript code after your HTML elements in your document, or delay it's execution until the DOM is ready for use.

Edit: To add the javascript text to the page, create a div, p or span element with the variable text and append it to the DOM.

In your javascript code:

var nama = "<?= $nama ?>";
var myNamaDiv = document.createElement('div');
myNamaDiv.innerHTML = nama;
document.body.appendChild(myNamaDiv);

what if i want it wrote like normal text? i mean without text box just like write random text in ? — Lazuardy Kamil, Jan 15 '14 at 07:02
In that case, it is very recommended to create a new div, p or span element with your value and append it to the DOM. I have edited my answer to include the way in which you can do that. — user1853181, Jan 15 '14 at 07:06

passing javascript variable in php file to html

2 Answers2