0

I have an external javascript file(myscript.js) and a php file (myfile.inc). In my inc i have html code where i have a button constructed like the below

<button onclick='getvariable()'>Get Variable</button>

My functin get variable looks something like this

function getvariable(){
   myVariable = 'test'
   return myVariable
}

I want to be able to access myVariable in the inc file in php so i can use a function to write the results to a database. For this context writing to a db in javascript wont be allowed. I need to generate the variable from a button click in javascript and save the variable in php so i can use a function to save the result to a databse.

How can i accomplish passing this javascript variable to the inc file in php?

jumpman8947
  • 571
  • 1
  • 11
  • 34
  • 5
    1) don't use inline JS, it's bad practice that leads to hard-to-maintain code. 2) research AJAX – treyBake Jul 10 '19 at 14:30
  • you should post your variable to a php script, which will handle it and store in DB – GrafiCode Jul 10 '19 at 14:30
  • 3
    Possible duplicate of [How to pass JavaScript variables to PHP?](https://stackoverflow.com/questions/1917576/how-to-pass-javascript-variables-to-php) – Patrick Q Jul 10 '19 at 14:33
  • @treyBake the JS is found in a seperate file – jumpman8947 Jul 10 '19 at 14:38
  • @jumpman8947 so the button *html* is in a .js file? – treyBake Jul 10 '19 at 14:42
  • _"the JS is found in a seperate file"_ - Good. That's how it should be. However, I think @treyBake was referring to `onclick='getvariable()'` which is inline JS. You should create an event listener in JS for the button, instead of having an `onclick` attribute with inline JS in it. – M. Eriksson Jul 10 '19 at 14:49

1 Answers1

0

I think what you are missing is the idea of order of execution of things.Below might help you understand it.

  1. A person goes to the address/url for myfile.inc.
  2. This initates a request on a server which hosts your myfile.inc file. A php interpreter will read the php file and generate an html response (which may contain inline css and javascript as well)
  3. The generated (html, css, js) response is returned to the person, which is then loaded in the browser for them.
  4. That person now can see the button that was generated in step 2 and upon clicking it activate the function getvariable.
  5. Now if you want to do some thing inside myfile.inc when the user clicks on the button, you must call the server again when a person clicks the button (just like it was called the first time using a url which hosts myfile.inc).
  6. In your case you will probably want to do some thing like below in your getvariable function.

function getvariable() {
    var myVariable = 'test'; // make it a local variable
    var xmlHttp = new XMLHttpRequest(); // initialize an ajax request
    xmlHttp.onreadystatechange = function() { // define how to deal with server response
        if (xmlHttp.readyState == 4 && xmlHttp.status == 200) { // if every thing goes fine
            console.log(xmlHttp.responseText); // just show the result on console
        }
    }
    xmlHttp.open("post", "save_to_database.php"); // Perform a POST call to "save_to_database.php" or the url which you use to access it
    var formData = new FormData(); // initialize the variable which will hold the data you want to send to server
    formData.append("myVariable", myVariable); // you can access the value inside the php file with the name you pass as first argument here.
    xmlHttp.send(formData); // perform the request
}

Ofcourse, you will also need to write the code for "save_to_database.php" in which you will handle the call, extract value for myVariable and store it in database and depending on its success or faliure return the appropriate result.

I hope this helps you understand.

Thanks

Ahsun Ali
  • 314
  • 1
  • 6