How to get value from php variable into our javascript file?

Question

Actually, I have created a user profile page in which I have added a button to "update info" as for example:

<span id="username"> Username: <?php echo $username; ?>
<span id="password"> Password: <?php echo $password; ?>

In this page initially I have taken value of username and password using php/mysql commands from database.

Now, I have created a JavaScript file to change innerHTML of id username/password whenever I click "update info", I wanted to add something like as shown bellow:

function update()
{
document.getElementById('username').innerHTML=' Username: <input type="text" id="uname" name="uname" value="<?php echo $username; ?>">';
 }

But I am not getting value of username, I am just getting same php script within input text field.

How to do this in order to get value of "$username" which I was getting directly in main page?

• Raptor: You echo the password on screen?! Security problem.
• Yoav Kadosh: This should work. Is the variable defined when you are using it?
• Samuel: Even worse: You store your password as plaintext?!
• HamZa: If you have put that snippet in a JS file, then your server won't interpret it as a PHP file. Also the whole concept is wrong ...
• Mevin Babu: Yeah this should work.But i wonder if this actually satisfies your purpose of updating ? shouldn't you be using ajax or something ?

Answer 1

change it to like.

document.getElementById('username').innerHTML=' Username: <input type="text" id="uname" name="uname" value="'+<?php echo $username; ?>+'">';

• Mevin Babu: Like @Hamza said, this wont work if the snippet is in a .js file.
• user2050308: @Mevin Babu you are write this is not working in .js file thank you Mevin.

Answer 2

You can not wrote <?php ..... ?> in to your .js file. It won't be executed.

It must be in .PHP file only or else you can include script file in to your PHP file by include, require

Answer 3

It can't work, you can't write PHP code in JavaScript files.

You have to print the values inside the php page (.php extension), you can do something like:

<script>
 var username = "<?php print $username ?>";
 var password = "<?php print $password ?>";
</script>

but be sure you sanitize the PHP values or you expose your users to XSS attacks. Consider also avoiding to print the password, as rule. Usually when a user wants to change password he/she must provide the old one before the new.

• Darko Romanov: Because the scope is window, that is global. Files organization doesn't matter at all.

Answer 4

<span id="username"> Username: <?php echo $username; ?>
<input type="hidden" name="usernameHidden" id="usernameHidden" value="<?php echo $username; ?>"/>
<span id="password"> Password: <?php echo $password; ?>
function update()
{
alert(document.getElementById("usernameHidden").value);
}

• Vivek Kumar: My code is already working if I am just putting JavaScript function in same file. So, doing all these stuffs would be worthless.
• user2663434: ohh..why dont u add that value into session?
• Vivek Kumar: I have lot of things to add that is why I thought using session won't be good. My last option was Ajax.
• Parixit: @VivekKumar You can not use PHP tags in .js file. Please check my answer.