JQuery - Tomar valor de un elemento con JavaScript

   
Vista:

Tomar valor de un elemento con JavaScript

Publicado por Juan Manuel jmanuel.arguello@gmail.com (6 intervenciones) el 13/10/2015 16:40:30
Buenas, soy nuevo en el foro espero me puedan ayudar.
Estoy desarrollando una aplicación donde se puedan mostrar todos los productos que se comercializan, para mostralos no tengo ningún problema lo hago con json así.
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
<script>
	function broches() {
		$.getJSON('http://miserver/archivo.php',function(data){
			console.log(JSON.stringify(data));
			var datos;
			for (var i = 0; i < data.length; i++) {
				//document.getElementById('tile-collapse-8').innerHTML += '<p>' + data[i].descripcion + '</p>';
				document.getElementById('broches').innerHTML += '<div class="tile-wrap" id="tile-parent-1">'+
				'<div class="tile tile-collapse">'+
				'<div class="tile-toggle" data-parent="#tile-parent-1" data-target="#'+data[i].codigo_anterior+'" data-toggle="tile">'+
				'<div class="pull-left tile-side">'+
				'<div class="avatar avatar-blue avatar-sm">'+
				'<span class="icon icon-alarm"></span>'+
				'</div>'+
				'</div>'+
				'<div class="tile-inner">'+
				'<div class="text-overflow">'+data[i].descripcion+'</div>'+
				'</div>'+
				'</div>';
				document.getElementById('broches').innerHTML += '<div style="" aria-expanded="false" class="tile-active-show collapse" id="'+data[i].codigo_anterior+'">'+
				'<form id="formulario" action="JavaScript:enviarform();">'+
				'<input type="text" name="codimgesa" id="codimgesa" value="'+data[i].codigo_anterior+'">'+
				'<input type="submit" value="enviar" id="enviar" name="enviar">'+
				'</form>'+
				'</div>'+
				'</div>'+
				'</div>';
			}
		});
	}
</script>

Mi problemas esta al tomar los datos de los formularios, al enviar cualquier formulario que se creo con el for en mi primer codigo, toma solo los datos del primer 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
<script>
	function enviarform() {
		document.getElementById('mnsj').innerHTML = "";
		var codi = $('#codimgesa').val();
		var cantidad = $('#cantidad').val();
		var codbarra = $('#codbarra').val();
		$.ajax({
			type: 'GET',//tipo de petición
			data: "codig="+codi+ "&cantidad="+cantidad+ "&codbarra="+codbarra,
			dataType: 'jsonp',//tipo de datos
			jsonp: 'callback',//nombre de la variable get para reconocer la petición
			url:  'http://miserver/archivo.php',
				error: function(xhr, status, error) {
				alert("error");
			},
			success: function(jsonp) {
			$(".data").html(jsonp.codig);
			}
		});
		document.getElementById('mnsj').innerHTML += '<div class="toast toast-show">'+
		'<div style="top: -218px; left: 248px; display: block; position: relative;" id="tooltip970957" class="tooltip bottom in">'+
		'<div class="toast-inner tooltip-inner">'+
		'<div class="data">'+
		'</div>'+
		'</div>'+
		'</div>'+
		'</div>';
	}
</script>

Ojala me puedan ayudar, muchas gracias.
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

Tomar valor de un elemento con JavaScript

Publicado por xve (557 intervenciones) el 13/10/2015 20:06:59
Hola Juan Manuel, el problema en tu código, es que repites por cada formulario, los mismos id's, y los id's no se deberían de repetir en una misma pagina, por eso siempre te coge el primero.

La solución, pasa por coger el valor utilizando el this... mira este ejemplo:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<form id="formulario" onsubmit="return enviarform(this);">
	<input type="text" name="codimgesa" id="codimgesa" value="1">
	<input type="submit" value="enviar" id="enviar" name="enviar">
</form>
 
<form id="formulario" onsubmit="return enviarform(this);">
	<input type="text" name="codimgesa" id="codimgesa" value="2">
	<input type="submit" value="enviar" id="enviar" name="enviar">
</form>
 
<script>
function enviarform(e) {
	console.log($(e).find("input[name=codimgesa]").val());
	return false;
}
</script>

Fíjate, que en vez de utilizar action="", hemos utilizar onsubmit=""
Y enviamos el apuntador al objeto.

En la función enviarform(), buscamos el nombre a partir del this que pasamos como parámetro, por lo que ya no son necesarios los id's

También, fíjate que en la función enviarform(), devolvemos un false, esto es para que no se envié el formulario... si deseas que se envie, simplemente quítalo, o ponle un return true.

Espero que te sirva... coméntanos, ok?
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

Tomar valor de un elemento con JavaScript

Publicado por Juan Manuel jmanuel.arguello@gmail.com (6 intervenciones) el 13/10/2015 21:10:54
Que tal xve, muchas gracias por responderme, mi problema es que yo esto lo intento enviar el formulario sin recargar la pagina en la que estoy, solo que envie el form, y si utilizo onsubmit me recarga la pagina. Se puede utilizar en el action el this que mecionas? y luego de eso capturar el valor del elemneto?
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

Tomar valor de un elemento con JavaScript

Publicado por Juan Manuel jmanuel.arguello@gmail.com (6 intervenciones) el 13/10/2015 22:03:56
O sera que no hay un modo de recuperar el indice del formulario al cual doy enviar en su action algo como

1
<form action="JavaScrit:enviarform(index(this))"
y luego recuperar en la funcion enviarform el valor del cuadro de texto con
1
2
3
function enviarform(e) {
var codi = document.forms[e].codimgesa.value
}
solo es una duda no se si puede enviar el index del formulario atra vez de su action.
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 xve

Tomar valor de un elemento con JavaScript

Publicado por xve (557 intervenciones) el 14/10/2015 07:57:38
El action del form, no es un evento javascript... por lo que no te pasa el apuntador this!!!

Yo no te aconsejo poner código javascript en el action!!!
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 xve

Tomar valor de un elemento con JavaScript

Publicado por xve (557 intervenciones) el 14/10/2015 07:55:37
Hola Juan Manuel, como te comente, si la función devuelve false (si pruebas mi ejemplo veras que no se recarga la pagina) no se ejecuta el submit!!!
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

Tomar valor de un elemento con JavaScript

Publicado por Juan Manuel jmanuel.arguello@gmail.com (6 intervenciones) el 14/10/2015 13:14:17
Muchas gracias XVE. Seguire probando.
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

Tomar valor de un elemento con JavaScript

Publicado por Juan Manuel jmanuel.arguello@gmail.com (6 intervenciones) el 14/10/2015 14:06:59
Que tal XVE nuevamente una consulta mas como hago para guardar el valor que envia a una variable?
1
console.log($(e).find("input[name=codimgesa]").val());
este codigo como log guardo a una variable probe ya muchas cosas como por ejemplo
1
var codi= console.log($(e).find("input[name=codimgesa]").val());
pero se nota que es la manera, te agradeceria mucho si me puedes ayudar.
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

Tomar valor de un elemento con JavaScript

Publicado por Juan Manuel jmanuel.arguello@gmail.com (6 intervenciones) el 14/10/2015 15:48:14
Ya esta solucionado XVE, te comento como lo hice, coloque todo como tu ejemplo y para tomar el valor puse eso
1
var codi = $(e).find("input[name=codimgesa]").val();

muchas gracias por la ayuda.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
1
Comentar
Imágen de perfil de xve

Tomar valor de un elemento con JavaScript

Publicado por xve (557 intervenciones) el 14/10/2015 19:42:59
Me alegro que te funcione!!!
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