How to trigger an HTML element inside a PHP file from an external JS file

Question

I would like to trigger an HTML element within a PHP file from a JS file with an event listener. This is my PHP file:

<?php echo password : is <div style='visibility:visible' id='password'> ".$pass."</div>  
          <button id='togglePassword'>See</button>";  ?>

and this is my JS file. Obviously I'm using an event listener which pointing on my password and toggle! Here is my JS file:

const toggle = document.getElementById('togglePassword');
const password = document.getElementById('password');

toggle.addEventListener("click", function () {
    console.log("test")
    if(password.style.visibility==="visible"){
        password.style.visibility=  "hidden"
    }else {
        password.style.visibility = "visible"
    }   
});

PHP solely exists on the server - once a browser has it, it's HTML, no PHP — Bravo, Jun 24 '22 at 04:42
oh, I don't know, just making the point that a broswer can't do anything inside PHP — Bravo, Jun 24 '22 at 04:46
Your JS must be in a script that is loaded *after* (meaning, below) the `togglePassword` and `password` elements, or in such a way that it [executes after the page has loaded](https://stackoverflow.com/questions/807878/how-to-make-javascript-execute-after-page-load). — kmoser, Jun 24 '22 at 05:02

score 0 · Answer 1 · answered Jun 24 '22 at 05:00

0

If I understand your question correctly it looks like you're trying to get information from the server with such request being triggered from a javascript event. You can try to achieve that with AJAX. With AJAX you can

Read data from a web server - after the page has loaded Update a web page without reloading the page Send data to a web server - in the background

https://www.w3schools.com/js/js_ajax_intro.asp

answered Jun 24 '22 at 05:00

Richard

1

Hi and welcome to Stack Overflow! While this answer might be correct and useful, it's better to include the main steps of your solution in your answer, and link to an external source for reference only. That way, your solution will still be available even if the external link doesn't work anymore. Please consider editing your answer accordingly. – Camelopardalus Jun 25 '22 at 07:15

score 0 · Answer 2 · answered Jun 24 '22 at 06:13

Just echo a script tag with src and the rest of the work is as usual.

<?php
    echo "password : is <div style='visibility:visible' id='password'> " . $pass . "</div> 
    <button id='togglePassword'>See</button>";
    
    echo "<script src='./app.js'></script>"; // you can echo normal html

And in your app.js do your TOGGLE thing.

How to trigger an HTML element inside a PHP file from an external JS file

2 Answers2