0

Tengo un problema ya que en un script que estoy haciendo hay una parte en la que sale un desplegado de resultados después de una consulta y cada resultado tiene a su derecha el botón para eliminarlo. Hasta ahí todo bien.

Lo que pasa es que quiero que cuando el usuario presione el botón "Eliminar" me salga una alerta de JavaScript que le pida confirmar si desea hacerlo, sin embargo, esa alerta me sale tantas veces como registros haya (por ejemplo si en la consulta me salen cinco resultados, esa alerta la debo presionar cinco veces, si me salen tres entonces la debo presionar tres veces, etcétera).

Supongo que es porque está dentro del while que extrae los registros del array pero si saco el código de javascript del while ya no me funciona.

Ayuda ¿qué hago? Acá dejo el código (mi problema está en las últimas líneas):

while($reg=mysqli_fetch_array($resultados)){
            $fecha3 = date("d-m", strtotime($reg['FECHA']));
            $hora=substr($reg['HORA'], 0,5);
            if ($reg['BANDERA']==1)
            {
                $color="#FCE760";
            }
            else
            {
                $color="#FFFFFF";
            };
            echo "
                <tr>";
            echo
            "
                    <form action='$_SERVER[PHP_SELF]' method='post'>
                        <td bgcolor='$color'>
                            <input type='hidden' name='fecha' value='$reg[FECHA]' />
                            <input type='submit' value='$fecha3' style='background-color:#3296F5;'/>
                        </td>
                    </form>
                    <td bgcolor='$color'><p class='centrado'>$hora</p></td>
                    <th bgcolor='$color'><p class='centrado'>$reg[NOMBRE]</p></a></th>
                    <td bgcolor='$color'><p class='centrado'>$reg[LUGAR]</p></td>
                    <td bgcolor='$color'><p class='justificado'>$reg[TEMA]</p></td>
                    <td bgcolor='$color'><p class='justificado'>$reg[OBSERVACIONES]</p></td>
                    <td bgcolor='$color'><p class='justificado'>$reg[RESPONSABLE]</p></td>
            ";
            if ($reg['CUMPLE']<>NULL)
            {
                echo
                "
                    <form action='procesocumples2.php' method='post'>
                        <td align='center'>
                            <input type='hidden' name='id' value='$reg[CUMPLE]' />
                            <input type='hidden' name='bandera3' value=true />
                            <input type='submit' name='accion' value='Cambiar' style='background-color:green;'/>
                        </td>
                        <td align='center'>
                        <input type='hidden' name='id' value='$reg[CUMPLE]' />
                        <input type='hidden' name='bandera3' value=true />
                        <input type='submit' name='accion' value='Eliminar' style='background-color:red;'/>
                        </td>
                    </form>
                    </tr>
                ";
            }
            else
            {
                echo
                "
                    <form action='procesocalendario.php' method='post' id='confirmacion'>
                        <td align='center'>
                            <input type='hidden' name='id' value='$reg[ID]' />
                            <input type='submit' name='accion' value='Cambiar' style='background-color:green;'/>
                        </td>
                        <td align='center'>
                            <input type='hidden' name='id' value='$reg[ID]' />
                            <input type='submit' name='accion' value='Eliminar' style='background-color:red;' />
                        </td>
                    </form>
                    </tr>
                    <script type='text/javascript'>
                        (function()
                        {
                            var form = document.getElementById('confirmacion');
                            form.addEventListener('submit', function(event)
                            {
                                // si es false entonces que no haga el submit
                                if (!confirm('Confirme si Desea Eliminar'))
                                {
                                    event.preventDefault();
                                }
                            }, false);
                        })();
                    </script>
                ";
            };
1
  • Deberías agregar un id a tu botón para poder diferenciarlos uno de otros, y asignar una función eliminar al botón en sí donde sólo le pasas el id Commented el 17 may. 2019 a las 16:30

2 respuestas 2

0

El problema está en que todos los elementos formulario los creas con una misma ID "confirmación" entonces tú script se aplica para todos los formularios ya que todos tienen el mismo identificador. Lo que deberías hacer más bien, es trabajar con clases y el iterador "forEach" de Javascript de esta manera podrás aplicarle eventos a cada elemento que tenga esa clase, si le colocas la clase "confirmación" al formulario podrías hacerlo de esta manera:

    const formularios = document.querySelectorAll(".confirmacion");
    formularios.forEach(form => {
            form.addEventListener("submit", (e) => { 
                     if (!confirm('Confirme si Desea Eliminar')){
                                e.preventDefault()
                       }
            }, false);
    });
0

Debes usar un id distinto para cada formulario.

Cambia esta línea

<form action='procesocalendario.php' method='post' id='confirmacion'>

por esta

<form action='procesocalendario.php' method='post' id='confirmacion'$reg[ID]>

y además debes cambiar

esta

var form = document.getElementById('confirmacion');

por esta

var form = document.getElementById('confirmacion'$reg[ID]);

de esta forma lograr generar un id distinto para cada formulario. Espero te ayude esta propuesta. Saludos

3
  • Seguro que 'confirmacion'$reg[ID] no es un error de sintaxis? Commented el 22 may. 2019 a las 19:12
  • la idea es cambiarlo dentro de las comillas dobles que tiene la pregunta "var form = document.getElementById('confirmacion' + $reg[ID]) " Commented el 22 may. 2019 a las 19:17
  • 1
    Entiendo lo que quieres hacer, la duda que me surgió es que cierras la comilla y no concatenas (+) $reg[ID] por lo que eso debería ser un error; también podrías utilizar comillas invertidas para hacer el código más limpio de la siguiente forma ` confirmacion${variable} ` Commented el 22 may. 2019 a las 19:23

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.