Jump to content

different data in the modal


Klarez
 Share

Recommended Posts

Hi ,

please i need help
I created a php upload function to upload some photos to the database. Created a form
<form action="upload.php" enctype="multipart/form-data" method="POST">
            <input class="pl-2 input" type="file" name="image" id="image"><br>
            <input class="send" type="submit" value="upload picture" name="upload">
    </form>
and in another file called upload.php
<?php
if (isset($_POST['upload'])){
    $filename=$_FILES['image']['name'];
    $tempname=$_FILES['image']['tmp_name'];
    $filesize=$_FILES['image']['size'];
    $filetype=$_FILES['image']['type'];
    
        $folder="images/" . $filename;

    $conn=mysqli_connect("localhost","root","","mojeslike");
    mysqli_query($conn,"INSERT INTO photos(image) VALUES ('{$filename}')");
    if(move_uploaded_file($tempname,$folder)){
        echo "image uploaded successfully";
    }else{
        echo "failed to upload";
    }
}
?>
 in a body tag
    <section class="container first">
<h1>PICTURE GALLERY</h1>

    <article>
        <?php
            $rez=mysqli_query($conn,"SELECT * FROM photos");
            while($row=mysqli_fetch_array($rez)){
        ?>
                <div class="photo">
                    <img src="<?php echo $row['image']; ?>" >
                    <div>
  
  <!-- Button to Open the Modal -->
  <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
    <h4>about picture</h4>
  </button>

  <!-- The Modal -->
  <div class="modal fade" id="myModal">
    <div class="modal-dialog modal-sm">
      <div class="modal-content">
      
        <!-- Modal Header -->
        <div class="modal-header">
          <h4 class="modal-title">Image details</h4>
          <button type="button" class="close" data-dismiss="modal">&times;</button>
        </div>
        
        <!-- Modal body -->
            
        <!-- Modal footer -->
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        </div>
        
      </div>
    </div>
  </div>
</div>
                </div>
        <?php
}
        ?>
    </article>
<div class="clearfix"></div>
</section>

there is also a css file with styling, which is why this clearfix was included


means, in one div tag I have an image and a bootstap modal. Another image is always displayed, and when I click on the button below the image, I would like them to show me data about the image. if I put echo $filesize and echo $filetype in the body of the modal, I get data about the last upload picture. I want to always have another data, each picture to display its own data, but I don't know that, so please help me with this problem. Thank you.

Edited by Klarez
Link to comment
Share on other sites

The trouble is you are creating multiple modals with the same id, the id should be unique within the document. When click the button the last modal with id "myModal" is shown.

IF you want a modal for every image use a counter variable $modalCount and increment using $modalCount++; within the while loop and add variable to anything referring to modal id.

Example

<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal<?php echo $modalCount;?>">
  
  //and
  
  <div class="modal fade" id="myModal<?php echo $modalCount;?>">

The modal id will now be unique and related to the button with matching target id.

#myModal1 to id="myModal1"

#myModal2 to id="myModal2"

#myModal3 to id="myModal3"... and so on.

IF you want a single modal,  take modal out of while loop, then you need to store the data and one way is to use custom data- attributes to store this data in a element itself. The button itself already uses this with data-target="#myModal", so just expand on this for filesize and filetype with data-filesize="<?php echo $filesize; ?>" and data-filetype="<?php echo $filetype; ?>" you can then read these custom data- values within the modal.

Edited by dsonesuk
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...