He estado mirando este problema durante horas, pero mis habilidades con jQuery son bastante básicas, así que necesito ayuda aquí.
Tengo 3 entradas de formulario. Cuando hago clic en una de las entradas, se abre un modal de arranque que contiene mi galería de imágenes (que está poblada por PHP), y debajo de cada imagen hay un botón "Insertar".
Cuando hago clic en el botón Insertar, deseo volver a pasar el título de esa imagen al campo de entrada específico en el que hice clic.
Sé que esto debería hacerse con jQuery usando "esto", pero no puedo resolverlo.
Aquí está mi código hasta ahora:
Los campos del formulario
<form> <div> <input type="text" class="image_up" data-toggle="modal" data-target="#exampleModalCenter"> </div> <div> <input type="text" class="image_up" data-toggle="modal" data-target="#exampleModalCenter"> </div> <div> <input type="text" class="image_up" data-toggle="modal" data-target="#exampleModalCenter"> </div> </form>Código de mi galería de imágenes (con botón de insertar)
<?php $query = $conn->query("SELECT * FROM images ORDER BY id DESC"); if($query->num_rows > 0){ while($row = $query->fetch_assoc()){ $imageURL = '../../images/'.$row["file_name"]; $imageTitle = $row['file_name']; $imageID = $row['id']; ?> <div class="image-gallery-item"> <div class="image-gallery-img"> <img class="gallery-img" src="<?php echo $imageURL; ?>" alt="" /> </div> <p class="mt-2"><?php echo $imageTitle; ?></p> <button onclick="insert('<?= $imageTitle; ?>')" class="btn btn-primary" type="button" data-dismiss="modal">INSERT IMAGE</button> </div>Mi pieza ineficaz de jQuery
$(document).ready(function(){ $(".image_up").click(function insert(image){ $(this).val(image); }); });¡Cualquier ayuda sería muy apreciada!
$(document).ready(function(){ $(".image_up").click(function insert(image){ $(this).val(image); }); });Debería cambiarse a:
function insert(image){ document.querySelector('input[data-caller=' + document.getElementById('exampleModalCenter').dataset.caller + ']').value = image; }También agrega esto:
$('#exampleModalCenter').on('shown.bs.modal', function(e) { this.dataset.caller = e.relatedTarget.dataset.caller; });Luego, en toda la entrada de texto de su formulario, agregue data-caller="". Y darle a cada uno de ellos un valor único. Me gusta:
<form> <div> <input type="text" class="image_up" data-toggle="modal" data-target="#exampleModalCenter" data-caller="first"> </div> <div> <input type="text" class="image_up" data-toggle="modal" data-target="#exampleModalCenter" data-caller="second"> </div> <div> <input type="text" class="image_up" data-toggle="modal" data-target="#exampleModalCenter" data-caller="third"> </div> </form>