JavaScript - hacer aparecer los valores de inputs en otro div de forma ordenada

   
Vista:

hacer aparecer los valores de inputs en otro div de forma ordenada

Publicado por Benny (1 intervención) el 22/01/2016 13:26:21
Hola a todos ese es mi codigo, he estado intentando hacer que al rellenar los campos y hacer click en el submit, todos los valores aparezcan como una lista en el div2. Lo he conseguido de varias maneras pero aun no he logrado hacerlo a tra vez del bucle for. gracias



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
<body>
	<div id="div1">
	<h3>Rellene los campos de este formulario</h3><br>
		<input type="text" placeholder="Nombre" id="x"><br>
		<input type="text" placeholder="Apellidos" id="apellidos"><br>
		<input type="text" placeholder="Edad" id="edad"><br>
		<input type="text" placeholder="Domicilio" id="domicilio"><br>
		<input type="text" placeholder="Telf" id="telf"><br>
		<input type="button" value="ENVIAR" id="boton" onclick="resultado()"><br>
	</div>
 
	<div id="div2">
	<h4>Gracias por ingresar tus datos</h4>
 
	</div>
 
 
<script>
	function resultado() {
		var nmbr = document.getElementById('x').value;
		var apld = document.getElementById('apellidos').value;
		var edd = document.getElementById('edad').value;
		var domi = document.getElementById('domicilio').value;
		var tlf = document.getElementById('telf').value;
 
		var div2 = document.getElementById("div2");
 
		var arr = [];
		arr[0]="Nombre: " + nmbr;
		arr[1]="Apellidos: " + apld;
		arr[2]="Edad: " + edd;
		arr[3]="Domicilio: " + domi;
		arr[4]="Telf: " + tlf;
 
 
 
 
	for (var i=0; i < arr.length; i++) {
		document.write(arr[i] + "<br>");
 
		}
 
    div2.appendChild();
 
	}
</script>
</body>
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder
Imágen de perfil de xve

hacer aparecer los valores de inputs en otro div de forma ordenada

Publicado por xve (1596 intervenciones) el 22/01/2016 21:50:16
Hola Benny, te he realizado una paqueña modificación para que veas como obtener el valor de todos los input utilizando jquery...
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
<!doctype html>
<html>
<head>
	<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
 
<body>
	<div id="div1">
	<h3>Rellene los campos de este formulario</h3><br>
		<input type="text" placeholder="Nombre" id="x"><br>
		<input type="text" placeholder="Apellidos" id="apellidos"><br>
		<input type="text" placeholder="Edad" id="edad"><br>
		<input type="text" placeholder="Domicilio" id="domicilio"><br>
		<input type="text" placeholder="Telf" id="telf"><br>
		<input type="button" value="ENVIAR" id="boton" onclick="resultado()"><br>
	</div>
 
	<div id="div2">
	<h4>Gracias por ingresar tus datos</h4>
 
	</div>
 
 
<script>
	function resultado() {
		var result=""
		$("#div1").find("input[type=text]").each(function(){
			result+=$(this).attr("placeholder")+" - "+$(this).val()+"<br>";
		});
		$("#div2").html(result);
	}
</script>
</body>

Si tienes cualquier duda...
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de Vainas

hacer aparecer los valores de inputs en otro div de forma ordenada

Publicado por Vainas (239 intervenciones) el 23/01/2016 12:38:17
Buenas:

Puedes probar con algo asi:

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
function resultado() {
		var nmbr = document.getElementById('x').value;
		var apld = document.getElementById('apellidos').value;
		var edd = document.getElementById('edad').value;
		var domi = document.getElementById('domicilio').value;
		var tlf = document.getElementById('telf').value;
 
		var div2 = document.getElementById("div2");
 
		var arr = [];
		arr[0]="Nombre: " + nmbr;
		arr[1]="Apellidos: " + apld;
		arr[2]="Edad: " + edd;
		arr[3]="Domicilio: " + domi;
		arr[4]="Telf: " + tlf;
 
 
 
 
	for (var i=0; i < arr.length; i++) {
		var div = document.createElement("div");
		//div.innerHtml = arr[i];
		o
		//var t = document.createTextNode(arr[i]);
		// div.appndChild(t);
		//puedes agregarle informacion extra para tener un orden:
		div.setAttribute("id","'arr"+arr[i]+"'");
		div2.appendChild(div);
 
	}
	return false;
	}

Aqui la demo: https://jsfiddle.net/gnj9hs8m/ No me ha salido muy alla pero creo que para una idea esta bien.

Saludos.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar