pasar datos de un formulario a otra pagina
Publicado por saira (1 intervención) el 19/04/2023 16:43:05
hola buen dia, no se si alguno de ustedes pueda ayudarme con una duda, lo que pasa es que estoy haciendo un formulario, los registros de este mismo deben guardarse en una tabla en otra pagina diferente
tengo esto que vi en un foro de aqui pero lo que quiero es que los datos vayan a otra pagina (en una tabla) no que esten en la misma que el formulario
espero puedan ayudarme, muchisimas gracias 
tengo esto que vi en un foro de aqui pero lo que quiero es que los datos vayan a otra pagina (en una tabla) no que esten en la misma que el formulario
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
* {box-sizing: border-box;font-family:arial;}
.hide {display:none;}
.right {text-align:right;}
.error {border:1px solid Red;}
.nombre {width:100%}
.formulario {text-align:center;width:400px;border:1px solid #eee;padding:10px;}
.formulario label,.formulario label~input {
width: 50%;
display: inline-block;
float:left; }.formulario label {text-align:right;padding-right:20px;}
.formulario>div {margin-top:10px;overflow:hidden;}
.agregar {
background-color:green;
border-color:green;
color:white; } #listado {border:1px solid #eee;
margin-top:20px;
width:400px; } #listado th {background-color:#eee;padding:5px 10px;} #listado input[type=button] {background-color:Red;
border-color:Red;
color:white; }</style>
</head>
<body>
<form class="formulario">
<div>
<label>Nombre del alumno</label><input type="text" name="nombre">
</div>
<div>
<label>Edad del alumno</label><input type="number" name="edad" min="3" max="100">
</div>
<div>
<br><input type="submit" value="Agregar" class="agregar">
</div>
</form>
<table id="listado" class='hide'>
<thead>
<th>Alumno</th>
<th>Edad</th>
</thead>
<tbody>
</tbody>
</table>
</body>
</html>
<script>
document.querySelector("input[class=agregar]").addEventListener("click",function(e){
// cancelamos el evento submite.preventDefault();
var nombre=document.querySelector("input[name=nombre]");
var edad=document.querySelector("input[name=edad]");
// mostramos un error si no ha recibido el nombreif(!nombre.value)
{nombre.classList.add("error");
return;
}nombre.classList.remove("error");
// mostramos un error si no ha recibido una edadif(isNaN(parseInt(edad.value)) || parseInt(edad.value)<=0)
{edad.classList.add("error");
return;
}edad.classList.remove("error");
// añadimos el alumno a la tabla crando el tr, td's y el botón para eliminarlovar tr=document.createElement("tr");
var tdNombre=document.createElement("td");
var txt=document.createTextNode(nombre.value);
tdNombre.appendChild(txt);
tdNombre.className="nombre";
var tdEdad=document.createElement("td");
txt=document.createTextNode(edad.value);
tdEdad.appendChild(txt);
tdEdad.className="right";
var tdRemove=document.createElement("td");
var buttonRemove=document.createElement("input")
buttonRemove.type="button";
buttonRemove.value="Eliminar";
buttonRemove.onclick=function () {
// elimina la columnathis.parentElement.parentElement.remove();
// Si no hay ningun alumno, escondemos la tablaif(document.getElementById("listado").querySelector("tbody").querySelectorAll("tr").length==0)
{document.getElementById("listado").classList.add("hide");
} };tdRemove.appendChild(buttonRemove);
tr.appendChild(tdNombre);
tr.appendChild(tdEdad);
tr.appendChild(tdRemove);
var tbody=document.getElementById("listado").querySelector("tbody").appendChild(tr);
// eliminamos la clase que tiene oculta la tabla cando no hay ningun alumnodocument.getElementById("listado").classList.remove("hide");
//limpiamos los valores del inputedad.value="";
nombre.value="";
nombre.focus();
});
</script>
Valora esta pregunta
0
