How make an onclick event not load at all until it is actually clicked

Question

I'm an extreme novice when it comes to javascript, I have a simple onclick button that loads text into modal box. The thing about it is that it also invokes a php function. On page load or refresh the php function is automatically triggered without clicking the button! How can I make it so that the button must be clicked before invoking the php function.

EDIT: The proposed duplication answer that was provided explains the logic behind why my question doesn't work but doesn't offer steps to take to fix it nor a path to take to learn how to render my question properly. The answer I posted addressed my issues directly.

Ive gotten some tips from the following pages but i havent been able to put it together properly I suppose:

onclick event is executed immediately without clicking
onclick event ocurring without click event actually happening - js

HTML:

<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModalCenter" onclick="buildFunction()">

Javascript:

 <script>
        function buildFunction() {
            document.getElementById("package").innerHTML = "Initializing Powershell...</br>";
            document.getElementById("package").innerHTML += "Initializing Connection to Build Server...<br>";


            document.getElementById('package').onclick = function() {
                <?php buildPackage() ?>;
            };
        }
</script>

PHP Function:

function buildPackage()
{
    $serverName = "\\\\Server";
    $msiName = '"""""""""ARG1"""""""""';
    $installDir = '"""""""""ARG2"""""""""';

    $runCMD2 = "start powershell.exe psexec -accepteula -s -i 2 " . 
    $serverName . " cmd /c D:\path\to\app.hta " . $msiName . " " . 
    $installDir;

    $execCMD = shell_exec("$runCMD2");

    echo "Starting Build...<br>";
    echo $execCMD;
    echo "Build Complete";
}

*"How can I make it so that the button must be clicked before invoking the php function."* php is executed on the **server**, **then** the page is rendered on the **client** — Cid, Sep 20 '19 at 13:51
Possible duplicate of [What is the difference between client-side and server-side programming?](https://stackoverflow.com/questions/13840429/what-is-the-difference-between-client-side-and-server-side-programming) — Cid, Sep 20 '19 at 13:53
Try `addEventListener("click", () => { ;})` instead of `onclick` — Nabeel Mehmood, Sep 20 '19 at 13:54
@NabeelMehmood that will change nothing in the order of execution. PHP will still be executed first — Cid, Sep 20 '19 at 13:56
@NabeelMehmood much appreciated but ```document.getElementById("package").addEventListener("click", function(){;})``` still invoked without the event — demo7up, Sep 20 '19 at 13:57
You should create a endpoint to call buildPackage function, example: "http://yourdomain.com/buildPackage". In code javascript you call above endpoint to proccess in server when user click button. — Au Nguyen, Sep 20 '19 at 14:07

score 0 · Accepted Answer · answered Sep 20 '19 at 14:30

0

Solution was found using the answer to this method which relies on using ajax to call the php function from an external file:

How to call a php script/function on a html button click

answered Sep 20 '19 at 14:30

demo7up

530
5
27

How make an onclick event not load at all until it is actually clicked

1 Answers1