Necesitas hacerlo a través de AJAX, por:
- Indicas en la zona de comentarios requerir hacer uso de PHP
- Los valores que mandas llegan al servidor lo cual va a provocar que la página del form se recargue
- Como no estás persistiendo los datos en ningún lugar, es decir alguna base de datos entonces cada vez que se recarga la página los valores tecleados se pierden
- Quieres mostrar los datos uno tras otro a medida que el usuario los ingresa en el formulario
- Con AJAX evitarás que la página se recargue
Entonces nuestro proceder debería ser de este modo:
- Obten los valores del formulario, por medio de su
id
a través de la clase FormData
- Hacemos uso de la API
fetch
para enviar vía AJAX los datos a un segundo archivo que los procese y retorne los datos como una respuesta
- Asignamos la acción de la llamada AJAX por medio de un botón al cual le impedimos su comportamiento por defecto y evitar que se recargue el contenido
- Los valores de los inputs los pasamos a la clave
body
por medio de la clase ya mencionada (FormData
)
- Indicamos que el método a usar será
POST
- Con el método
appendChild()
agregamos el nuevo contenido que se va generando (los nombres tecleados) al elemento lu
que ya fue declarado mas arriba en la estructura HTML
- Desde el segundo archivo .php retornamos con un
echo
el valor de la variable que recibimos por POST
con una estructura JSON (esto es opcional) del modo siguiente: echo json_encode(["dato" => $usuario]);
- Accedemos desde JS al valor que nos esta mandando el backend así:
data.dato
donde dato
es la clave del vector asociativo que esta declarado en el punto anterior
El códifo pudiera quedar así:
Formulario HTML y código JS para la llamada AJAX
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<form id="frm" method="POST">
<input type="text" name="usuario">
<button id="btn">Enviar data</button>
</form>
<ul id="contenedor">
</ul>
<script>
let button = document.getElementById("btn")
let data = document.getElementById("frm")
button.addEventListener("click", (event) => {
event.preventDefault()
fetch("data.php", {
method: 'POST',
body: new FormData(data)
}).then(response => response.json())
.then((data) => {
let lista = document.createElement("li");
let contenido = document.createTextNode(data.dato);
lista.appendChild(contenido)
document.getElementById("contenedor").appendChild(lista);
})
})
</script>
</body>
</html>
Archivo data.php
<?php
$usuario = $_POST["usuario"];
echo json_encode(["dato" => $usuario]);
Dando un resultado en el uso como este:
Referencias consultadas