0

Tengo un código que adapté con PHP incorporándole una variable $id que es única para que funcione por separado en los submit, pero se ve en todos los resultados y yo quiero que se vea solo en donde estoy haciendo el submit del post con diferente $id.

<html>
<head>
<title>Título</title>
</head>
<body>
    <?php
         $conexion=mysqli_connect('host','usuario','contraseña','basededatos');
            mysqli_set_charset($conexion,"utf8");
                 $consulta=mysqli_query($conexion,"select * from `informacion`");
                     while($columna=mysqli_fetch_array($consulta)){
                       $id=$columna['id'];
     ?>
<script type="text/javascript">
    $(document).ready(function(){
    $("#loading<?php echo $id; ?>").hide();
    $("form").submit(function() {
    $("#loading<?php echo $id; ?>").show();
    return true;
    });
});
</script>

<form action="modifica.php" method="POST" enctype="multipart/form-data">
    <img id="loading<?php echo $id; ?>" src="../cargando.gif" alt="Cargando..." />
    <input class="btn btn-success" type="file" name="images" id="images" accept="image/*">
    <button type="submit" class="btn btn-danger" name="boton" value="eliminar" onClick="return confirm('&iquest;Est&aacute; usted seguro de querer ELIMINAR esta búsqueda?')"><i class="bi bi-x-circle"></i> Eliminar</button>
    <button type="submit" class="btn btn-warning" name="boton" value="actualizar" onClick="return confirm('&iquest;Est&aacute; usted seguro de querer ACTUALIZAR DATOS de esta búsqueda?')"><i class="bi bi-arrow-clockwise"></i> Actualizar</button>
</form>

<?php

    }

?>
</body>
</html>
9
  • Por favor edita la pregunta para agregar el código del formulario. Por ahora solo puedo suponer que tienes ese script en un ciclo y no es necesario, solo hay que ver la forma de que cada formulario pueda obtener ID de la imagen para mostrar solo esa.
    – Triby
    Commented el 8 mar. 2022 a las 18:39
  • No es necesario editar dice $("form").submit(function() y ese es el problema, con cualquier submit se ejecutan todos los id="loadingX"... X=id Commented el 8 mar. 2022 a las 18:45
  • Ahí lo edité y puse los 2 submit y uno de los input.... lo que pasa es que no hay un solo FORM por página... Commented el 8 mar. 2022 a las 19:08
  • Ayuda a que podamos ayudarte proporcionando código relevante. Si estás haciendo eso dentro de un ciclo, agrega el código del ciclo, incluyendo etiquetas del formulario. El adivino renunció el mes pasado y ya no podemos recurrir a él para que nos de un poco de luz en preguntas incompletas.
    – Triby
    Commented el 8 mar. 2022 a las 21:01
  • Haga de cuenta que no publiqué ningún código. ¿como hago que aparezca una imagen de cargando mientras se hace un post de una imagen de 10 Mbytes en una página con bucles de formularios identicos en código pero diferentes en resultados PHP/MySQL? Commented el 8 mar. 2022 a las 21:19

2 respuestas 2

1

No es necesario que haya una función para detectar envío de formulario dentro del ciclo y, de hecho, con $("form"), jQuery va a buscar todos los formularios y no solo el que estás creando en cada iteración, por lo que el comportamiento puede ser inesperado.

Te recomiendo usar clase para las imágenes en lugar de IDs dinámicos, es fácil encontrarlas si están dentro de <form ...> y </form>.

<?php
$con = mysqli_connect('localhost', 'usuario', 'contraseña', 'basededatos');
mysqli_set_charset($con,"utf8");
$nquery = mysqli_query($con,"select * from `informacion`");
while($crow = mysqli_fetch_array($nquery)) {
    $id=$crow['id'];
?>
    <form action="modifica.php" method="POST" enctype="multipart/form-data">
        <!-- La imagen va solo con clase -->
        <img class="loading" src="../cargando.gif" alt="Cargando..." />
        <input class="btn btn-success" type="file" name="images" id="images" accept="image/*">
        <button type="submit" class="btn btn-danger" name="boton" value="eliminar" onClick="return confirm('&iquest;Est&aacute; usted seguro de querer ELIMINAR esta búsqueda?')"><i class="bi bi-x-circle"></i> Eliminar</button>
        <button type="submit" class="btn btn-warning" name="boton" value="actualizar" onClick="return confirm('&iquest;Est&aacute; usted seguro de querer ACTUALIZAR DATOS de esta búsqueda?')"><i class="bi bi-arrow-clockwise"></i> Actualizar</button>
    </form>
<?php
}
?>

Al final del ciclo agregas solo un script para manejar todos los formularios. Dentro de la función del evento usas $(this) para hacer referencia al formulario actual y .find('.loading') para encontrar la imagen correspondiente:

<script type="text/javascript">
$(document).ready(function() {
    // Ocultar todas las imágenes con clase loading
    // Puedes evitar este paso si creas una regla CSS
    $(".loading").hide();
    // Evento submit de todos los formularios
    $("form").on('submit', function() {
        // Buscar imagen desde el formulario y mostrar
        $(this).find('.loading').show();
        return true;
    });
});
</script>

Con una sencilla regla en CSS puedes hacer que todas las imágenes con clase loading estén ocultas y evitar hacerlo desde Javascript:

.loading {
    display: none;
}
5
  • ¿Pero dentro de un bucle while de php que viene de una base de datos mysql voy a tener que usar el $id para identificar cada uno de los .loading ? Commented el 8 mar. 2022 a las 22:33
  • @UsandoMumuki, ¿leíste el texto de la respuesta y los comentarios? Creo que no, porque claramente menciono que NO se necesita ID, la imagen está dentro del formulario y se puede seleccionar fácilmente.
    – Triby
    Commented el 8 mar. 2022 a las 22:35
  • Me refiero a $id por una variable del PHP no un id="algo" en un html, igual lo voy a probar creo que usted se enoja fácil. Commented el 8 mar. 2022 a las 22:47
  • @UsandoMumuki, te equivocas, tengo mucha paciencia, pero también espero dos cosas cuando trato de ayudar: 1. Lectura del texto 2. Probar código y, después de eso, comentar si algo falló. Sin embargo, te brincas directo a comentar posibilidades, demostrando que no leíste ni probaste :-(
    – Triby
    Commented el 8 mar. 2022 a las 22:53
  • Funciona perfectamente! muchas gracias! :D Commented el 8 mar. 2022 a las 22:56
0

Lo solucioné como me explicó Triby nada más que no usé el CSS.

<html>
<head>
<title>Título</title>
</head>
<body>
    <?php
         $conexion=mysqli_connect('host','usuario','contraseña','basededatos');
            mysqli_set_charset($conexion,"utf8");
                 $consulta=mysqli_query($conexion,"select * from `informacion`");
                     while($columna=mysqli_fetch_array($consulta)){
                       $id=$columna['id'];
     ?>
<form action="modifica.php" method="POST" enctype="multipart/form-data">
    <img class="loading" src="../cargando.gif" alt="Cargando..." />
    <input class="btn btn-success" type="file" name="images" id="images" accept="image/*">
    <button type="submit" class="btn btn-danger" name="boton" value="eliminar" onClick="return confirm('&iquest;Est&aacute; usted seguro de querer ELIMINAR esta búsqueda?')"><i class="bi bi-x-circle"></i> Eliminar</button>
    <button type="submit" class="btn btn-warning" name="boton" value="actualizar" onClick="return confirm('&iquest;Est&aacute; usted seguro de querer ACTUALIZAR DATOS de esta búsqueda?')"><i class="bi bi-arrow-clockwise"></i> Actualizar</button>
</form>

<?php

    }

?>
<script type="text/javascript">
$(document).ready(function() {
    // Ocultar todas las imágenes con clase loading
    // Puedes evitar este paso si creas una regla CSS
    $(".loading").hide();
    // Evento submit de todos los formularios
    $("form").on('submit', function() {
        // Buscar imagen desde el formulario y mostrar
        $(this).find('.loading').show();
        return true;
    });
});
</script>
</body>
</html>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.