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>

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 — Lakshaya U.
– Lakshaya U., Commented Jul 10, 2021 at 6:29

Daniyal Sedighpour · Accepted Answer · 2021-07-10 06:32:33Z

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.

edited Jul 10, 2021 at 6:32

answered Jul 10, 2021 at 6:27

Daniyal Sedighpour

1391 silver badge8 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Mohammed Khurram · Accepted Answer · 2021-07-10 09:39:24Z

0

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
?>

answered Jul 10, 2021 at 9:39

Mohammed Khurram

6361 gold badge8 silver badges15 bronze badges

2 Comments

antonkoetzler Over a year ago

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 Over a year ago

@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.

Bodhi Mantra · Accepted Answer · 2024-02-09 11:38:52Z

-1

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

answered Feb 9, 2024 at 11:38

Bodhi Mantra

11 bronze badge

Collectives™ on Stack Overflow

How to pass data from a JS function to PHP

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related