2

necesitaría ayuda para crear un formulario dentro de una pagina web y que se muestren los datos en es misma pagina, la idea es que al introducir el nombre y teléfono en el formulario, aparezca una lista con todos los nombres que se vayan metiendo, pero todo desarrollado en una sola pagina.

yo tengo desarrollado el formulario, y con un echo muestro el valor de las variables, pero al escribir la siguiente linea me sobre escribe la anterior.

<form action="<?php echo htmlspecialchars($_SERVER['PHP_SELF'])?>" method="post" name="frm">

    <input type="text" name="nombre" placeholder="Inserta tu nombre" id="nombre"/>
    <input type="text" name="matricula" placeholder="Inserta la matricula" id="matricula"/>
    <input type="submit" value="Guardar" name="submit">

</form>
0

4 respuestas 4

2

Al mandar los parámetros con post, los guarda en un array y luego lo insertar en otro array para obtener la lista

$lista = [];

$nombre = isset($_POST['nombre']) ? $_POST['nombre']: '';
$matricula= isset($_POST['matricula']) ? $_POST['matricula']: '';

$dato = [
 'nombre' => $nombre,
 'matricula' => $matricula
];

if(sizeof($lista) == 0)
 $lista[] = $dato;
else{
  array_push($lista, $dato);
}
var_dump($lista);

En el action mandas a la misma pagina, así se recarga y te presenta los datos, ya si deseas que no recargue la página sería un poquito mas avanzado usando ajax y que se te haga sencillo lo harías usando Jquery para las peticiones ajax

1

Por ahí lo que podrías hacer es mantener en un arreglo javascript y actualizar la vista de la siguiente manera:

    <script>
var arreglo = [];

function agregarLista(){
     var nombre = document.getElementById("nombre").value;
     var matricula = document.getElementById("matricula").value;
     arreglo.push({"nombre": nombre, "matricula":matricula});
     var lista = document.getElementById("list");
     if (lista == null){
        lista = '';
     }
     lista.innerHTML += '<p>Nombre:</p>'+nombre+'<p>Matricula</p>'+matricula;            
}

</script>
<div id="list">
    Lista
</div>

<input type="text" name="nombre" placeholder="Inserta tu nombre" id="nombre"/>
<input type="text" name="matricula" placeholder="Inserta la matricula" id="matricula"/>
<button onclick='agregarLista()'> Guardar </button>
1
  • hola, esta respuesta es escelente, siempre y cuando pudiera usar javascript, pero me piden que solo sea con php, gracias Commented el 27 oct. 2019 a las 16:57
0

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:

introducir la descripción de la imagen aquí

Referencias consultadas

0

Si solo tienes que hacerlo con PHP una solucion seria usar una variable de sesion para que no pierdas los datos, no proble el codigo pero esta es la idea

array_push($_SESSION['nombre'], $_POST['nombre']);
array_push($_SESSION['matricula'], $_POST['matricula']);

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.