How to pass data from a JS function to PHP

Question

This function enables every object's display needed to display an image and it's title, caption, etc in a modal. I need the argument directory in order to make an mysqli request to display the title, caption, etc.

function imageModal(directory)
{
 document.getElementById("modal").style.display = "block";
 document.getElementById("imageImg").src = directory;
 document.getElementById("image").style.display = "flex";
 document.getElementById("imageDirectory") = directory;
}

So, with this container I have I want to pass the src given to imageImg to a php variable that I can use to make this mysqli request using the image's directory.

<!-- Picture Container -->
<article id="image" method="post" name="form">
 <section id="imageContainer">
 <img id="imageImg">
 </section>
 <section id="imageInformationContainer">
 <p style="color: white;"> <?php echo $imageDirectory; ?> </p>
 </section>
</article>

• Lakshaya U.: Your php code will render/handle server-sided operations. It got nothing to do with client-side JS. Probably you can use forms or fetch to do that for you. Possible duplicate of https://stackoverflow.com/questions/1917576/how-do-i-pass-javascript-variables-to-php?noredirect=1&lq=1
• ADyson: Use Ajax or make the data part of a form.
• mercury: fetch or axios .

Answer 1

this question asked many times. you can search your problem in google and solve your problem. here this is a solution

How do I pass JavaScript variables to PHP?

in short

JS is running on Client Side so JS variables are accessible in Client Side.

PHP is running on Server Side so PHP variables are accessible in Server Side.

if you want to send data from JS to PHP , use AJAX

for functions data, you can initialize variable out of the function scope then use references parameters to change it value inside the function. then use AJAX for send this variable(s) to PHP

Suggest: use array for store variables and send this array to PHP script file.

Answer 2

As I know there is no direct way to pass the Javascript variable or a HTML element value to php variable, as php is server side script and Javascript is client side.

The easiest way to pass the value of directory to php variable would be to submit it to php file or if wanna say it as posting the value to php file.

So my idea is to have a hidden form to store the directory or src value in the hidden field and submit the form then handle the request in php

The HTML elements

<article id="image" method="post" name="form">
 <section id="imageContainer">
 <img id="imageImg">
 </section>
 <form name="myform" action="" method="post">
 <input type="hidden" name="directory" value="" id="directoryVal">
 </form>
 <section id="imageInformationContainer">
 <p style="color: white;"> <?php echo $imageDirectory; ?> </p>
 </section>
</article>

The Javascript function

function imageModal(directory)
{
 document.getElementById("modal").style.display = "block";
 document.getElementById("imageImg").src = directory;
 document.getElementById("image").style.display = "flex";
 document.getElementById("imageDirectory") = directory;
 document.getElementById("directoryVal").value = directory;
 document.forms['myform'].submit();//I am submitting the form here you can do it wherever you want.
}

Now the php

<?php 
if(isset($_POST['directory']) $imageDirectory = $_POST['directory'];
//now you can use this $imageDirectory wherever you want and for querying DB aswell
?>

• antonkoetzler: The problem with this is that a form always needs to reload the page to submit. This is displaying an image to a modal, thus this doesn't work. But I appreciate this solution, as it's the most pragmatic
• Mohammed Khurram: @antonkoetzler if u don't want the page to reload and still you want the image src as php variable u can use Ajax send data to php return it from there or store in on DB. You have to use different php file for processing.

Answer 3

Use hidden textboxes. Save your data to a hidden textbox and you can access it server side via $_POST vars