To show the image along with the .titleclass, .subtitleclass, and .description when clicking on it, what steps do I

<?php while($galleryrec = mysqli_fetch_array($getresultgallery)){ ?>
  <div class="col-lg-2 col-md-2 mb-4 mb-lg-0" id="imageidback">
       
        <img
          data-id ="<?php echo $galleryrec['publishid']; ?>"
          src="<?php echo $folder.$galleryrec['publishimage']; ?>"
          class="w-100 shadow-1-strong rounded mb-4"
          alt=""
          style="cursor:pointer;"
          
          name="imagequery"
      
        />
        <input type="hidden" class="titleclass" name="titlename" id="titlenameid" value="<?php echo $galleryrec['title'] ?>">
        <input type="hidden" class="subtitleclass" name="subtitlename" id="subtitlenameid" value="<?php echo $galleryrec['subtitle'] ?>">
        <input type="hidden" class="descriptionclass" name="descriptionname" id="descriptionnameid" value="<?php echo $galleryrec['description'] ?>">
      
       
      </div>
    <?php } ?>

NOTE: This loop function in a PHP script displays images. I have been struggling with this for three days and still cannot find a solution :(

javascriptphpjqueryajaxbootstrap-4

Answer №1

If you are looking to transform the hidden text elements into editable text elements, you can achieve that using the following JavaScript code:

$(document).ready(function() {
  $('img.imgquery').click(function() {
    $(this).closest('div').find('input[type=hidden]').attr('type', 'text');
  })
})
div input {
  display: block;
  margin-top: 5px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-lg-2 col-md-2 mb-4 mb-lg-0" id="imageidback">

  <img data-id="<?php echo $galleryvalidate['publishid']; ?>" src="https://picsum.photos/200/300" class="w-100 shadow-1-strong rounded mb-4 imgquery" alt="" style="cursor:pointer;" name="imagequery" />

  <input type="hidden" class="titleclass" name="titlename" id="titlenameid" value="<?php echo $galleryvalidate['title'] ?>">
  <input type="hidden" class="subtitleclass" name="subtitlename" id="subtitlenameid" value="<?php echo $galleryvalidate['subtitle'] ?>">
  <input type="hidden" class="descriptionclass" name="descriptionname" id="descriptionnameid" value="<?php echo $galleryvalidate['description'] ?>">


</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Guidelines for accessing a specific object or index from a dropdown list filled with objects stored in an array

Here is a question for beginners. Please be kind. I have created a select field in an HTML component using Angular, populated from an array of objects. My goal is to retrieve the selection using a method. However, I am facing an issue where I cannot use ...

javascripthtmlangular

I am encountering an issue where I am unable to successfully fetch a cookie from the Express backend to the React

const express = require("express"); // const storiesRouter = require("./routes/storiesRouter") // const postsRouter = require("./routes/postsRouter"); // const usersRouter = require("./routes/usersRouter"); const cors = require("cors"); const cookieParser ...

javascriptnode.jsexpressaxios

Is there a way for me to identify the scrolling height and dynamically adjust the title using jQuery?

I am in the process of creating a list of shops from different countries for my website. I want to implement a feature that detects when the user has scrolled to a specific area so I can update the title at the top accordingly. My idea is to assign classe ...

jqueryhtmlcssscrollhtml-lists

I'm intrigued: what type of syntax is Facebook's polling service utilizing in the callback?

While monitoring the Network Monitor on Chrome's developer tool, I observed how Facebook updates content on their news feed. All AJAX responses start with the following: for (;;);{"__ar":1,"payload":[]} I'm curious about what the for(;;); piec ...

javascriptajaxfacebookpollingfeed

Obtaining the current value with each keystroke

While working with vue.js, I'm building a table that contains an input field called quantity. However, when I start typing the first word, it shows 'empty' on the console. If I type 3, it displays empty; and if I type 44, it prints 4. I am ...

javascriptvue.js

The hide and show buttons seem to be missing when utilizing the datatable API

For my current project, I referenced this example: https://datatables.net/extensions/responsive/examples/styling/bootstrap.html Despite trying various datatable API examples, I'm still unable to display the expand/collapse buttons. The required CSS a ...

jqueryhtmlcssdatatable

Error: Attempting to access the 'body' property of an undefined object following a POST request in a MEAN application

Currently, I am attempting to send POST data from AngularJS to Express. My approach involves using curl to transmit the POST content. After sending the data and receiving a 200 response, I encounter an issue when trying to access the data through body-par ...

javascriptnode.jsexpress

What is the best way to incorporate multiple variables in a MySQL query when using Node.js?

I'm facing a challenge where I need to input student data into a table using the parent key as a foreign key. The parent information is included in the same JSON object, with an array of students inside it. My goal is to retrieve the parent Id from th ...

javascriptmysqljsonnode.jsserver-side

Mastering div manipulation with jQuery: A step-by-step guide

I have three divs with the classes "col-md-2," "col-md-8," and "col-md-2." What I want is that when a button in the "col-md-8" div is clicked, both of the other divs should be hidden and the "col-md-8" div should expand to occupy the full width of "col-md ...

javascriptphpjquerycodeigniter

What is the best way for Flask to host the React public files?

When working with React, I created a folder called ./public/assets, and placed an image inside it. Running npm start worked perfectly fine for me. However, after running npm run build in React, I ended up with a ./build folder. To solve this issue, I moved ...

javascriptpythonreactjsflask

It is not possible to submit two forms at once with only one button click without relying on JQuery

I need to figure out a way to submit two forms using a single button in next.js without relying on document.getElementById. The approach I've taken involves having two form tags and then capturing their data in two separate objects. My goal is to hav ...

javascriptreactjsnext.js

Click-triggered CSS animations

Trying to achieve an effect with regular JS (not jQuery) by making images shake after they are clicked, but running into issues. HTML: <img id='s1_imgB' class="fragment"... onClick="wrongAnswer()"... JS: function wrongAnswer(){ docume ...

javascriptcsshtmlreveal.js

The controller in my template is not being passed by the $routeProvider

I attempted to dynamically load a template in Angular using ngRoute... However, I encountered an issue with the following code: (app.js route configuration) app.config(function($routeProvider) { $routeProvider.when("/password", { templateUrl ...

javascriptangularjs

What is the most efficient method to import multiple MaterialUI components using a shared namespace without requiring the entire library to be imported

In order to prevent name mixing with other libraries, I want my MaterialUI components to be under the same namespace. For example, ensuring that <Box> references <MaterialUI.Box> and not <SomeOtherLibrary.Box>. Although it seems like a si ...

javascriptreactjswebpackmaterial-ui

Tips for utilizing Material UI's Tooltip feature alongside a TableRow

I'm currently facing an issue where I'm trying to include a MUI TableRow inside a Tooltip component in order to display a long uuid when hovering over the row. However, I noticed that all the columns of the row are being compressed into the first ...

javascriptreactjsuser-interfacematerial-ui

Tips for refreshing the page without losing the values of variables

In my simulation.jsp file, I have the following code that retrieves simulation data from a struts2 action: $(document).ready(function() { var data='<s:property escape="false" value="simInfos" />'; } Once I perform the simulation with this ...

javascriptjqueryhtmljspstruts2

Creating the dynamic Google Ad AJAX impact with JavaScript

My task is to develop a convenient script that can be shared with others for embedding on their websites. This script needs to dynamically display content sourced from my MySQL database. I am aware of the cross-site issues associated with AJAX, however, i ...

ajaxxss

Once the post has been saved to the database, how can I redirect to a different EJS page?

Is there a way to load another page after submitting a post in node.js with ejs? //router function router() { ticketRouter.route("/create/submit") // connected to submit from specific ejs file .post(dataControllerThatHandlesSubmission) // functio ...

node.jsajaxexpressredirectejs

Evaluating the performance of a web application on a sluggish network

Uncertain if this is the appropriate place to inquire, but I'll proceed with my question. I've developed a web application with Ajax and have noticed that some bugs only appear when using slow networks (or at least have a higher probability in s ...

ajaxtestingweb-applications

Error encountered in vue.js due to a ReferenceError when the resize event is used

I'm having trouble obtaining the window height when resizing, and I keep encountering the error ReferenceError: calcOfSliderHeight is not defined. Can someone explain what's happening? Here is my code: let example = new Vue({ el: '#exam ...

javascriptvue.js