CODEWITHSUNDEEP
javascriptphphtml
antonkoetzler
antonkoetzler

Reputation: 9

How to pass data from a JS function to PHP

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>

Upvotes: -1

Views: 339

Answers (3)

Bodhi Mantra
Bodhi Mantra

Reputation: 1

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

Upvotes: -1

Mohammed Khurram
Mohammed Khurram

Reputation: 628

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

Upvotes: 0

Daniyal Sedighpour
Daniyal Sedighpour

Reputation: 129

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.

Upvotes: 1

Related Questions