Tengo un desafío a continuación con javascipt en combinación con php, incluidos los formularios html.
Al hacer clic en el enlace, envía solo un valor del bucle. es decir, el primer valor del ciclo while.
una captura de pantalla del resultado se proporciona aquí enlace a la imagen .
de lo anterior, cuando hago clic en cualquier otro enlace, simplemente vuelve al primero.
lo que necesito es que el enlace publique valores en función de cada enlace en el que se haga clic. mi código está aquí.
if ($result = $conn->query($query)) { while ($row = $result->fetch_assoc()) { $client_name = $row["client_name"]; echo "<form id='form_submit' action='index.php' method='post'> <input type='hidden' name='name' value='$client_name'/> <a href='#' onclick='submitForm(name)'>$client_name</a> </form> <script> function submitForm(name) { let form = document.getElementById('form_submit') form.submit() } </script><br>"; } $result->free(); } else echo "no records found";el formulario está diseñado para enviarse a la misma página donde es capturado por otro archivo php que verifica si se publica un valor y continúa con alguna ejecución desde allí,
el archivo php receptor consulta los datos de la base de datos en función de los valores enviados por el enlace en el que se hizo clic,
que en este caso, el enlace en el que se hizo clic solo envía el valor del primer elemento.
Podría hacerlo de una manera más limpia con un solo form en lugar de un número potencialmente grande. No es necesario usar atributos de ID para cada elemento que estaba causando el problema original; confíe en el destino del evento para indicar en qué elemento/enlace se hizo clic o, como this , utilícelo desde la devolución de llamada.
<form name='clients' method='post' action='index.php'> <input type='hidden' name='name' /> <?php if( $result = $conn->query($query) ) { while( $row = $result->fetch_assoc() ) { printf( '<a href="#">%s</a>', $row["client_name"] ); } $result->free(); } else { echo "no records found"; } ?> </form> <script> const oForm=document.forms.clients; const oInput=oForm.name; oForm.querySelectorAll('a').forEach(a=>{ a.addEventListener('click',function(e){ oInput.value=this.textContent; oForm.submit(); }) }) </script> En aras de la exhaustividad a la luz del comentario sobre un detector de eventos único en lugar de uno vinculado a cada hipervínculo. Con este evento burbujeante es lo que hace que funcione. Un ancestro común tiene el detector de eventos vinculado a él (el formulario) y se inspecciona event.target para encontrar qué elemento realmente activó el evento. Esto evita múltiples detectores de eventos duplicados.
const oForm=document.forms.clients; const oInput=oForm.name; oForm.addEventListener('click',(e)=>{ if( e.target!=e.currentTarget && e.target instanceof HTMLAnchorElement ){ oInput.value=e.target.textContent; oForm.submit(); } })Más lecturas sobre eventos y delegación de eventos