Código de JQuery - Enviar formularios independientes en jquery

Imágen de perfil

Enviar formularios independientes en jquerygráfica de visualizaciones


JQuery

estrellaestrellaestrellaestrellaestrella(1)
Publicado el 06 de Agosto del 2016 por Vainas
602 visualizaciones desde el 06 de Agosto del 2016. Una media de 35 por semana
Si tienes varios formularios en una web y quieres subir cada uno independientemente. Es solo agregar una clase a todos los formularios y utilizar dentro del submit el elemento this para obtener el formulario y despues usar serialize o serializeArray para obtener los valores de inputs dentro de mismo.

Dejo el codigo funciona aqui: https://jsfiddle.net/p8ch3uka/

Requerimientos

Es necesario tener jquery. https://jquery.com/download/
He agregado esta libreria para poder visualizar los resultados de console.log dentro de la propia web https://github.com/bahmutov/console-log-div

1.0
estrellaestrellaestrellaestrellaestrella(1)

Actualizado el 08 de Agosto del 2016 (Creado el 06 de Agosto del 2016)gráfica de visualizaciones de la versión: 1.0
603 visualizaciones desde el 06 de Agosto del 2016. Una media de 35 por semana
estrellaestrellaestrellaestrellaestrella
estrellaestrellaestrellaestrella
estrellaestrellaestrella
estrellaestrella
estrella

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
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
        <!-- incluir aqui libreria jquery -->
<script>
$( document ).ready(function() {
    $('.formularios').submit(function(event){
    	event.preventDefault();
      var serializado = $(this).serialize();
      var objeto = $(this).serializeArray();
      console.log(serializado);
      console.log(objeto);
      $(this).css("background-color", "#ECF8E0");
    });
});
</script>
</head>
<body>
<form action="" method="post" class="formularios" id="listado1">
		<input type="hidden" name="oculto1" value="nombre-apellido-1"/>
        <div>Nombre 1</div>
        <div>Apellido 1</div>
		<input type="radio" value="1" name="radio1" id="i1" />
		<input type="radio" value="0.25" name="radio1" id="i2" />
		<input type="radio" value="0.5" name="radio1" id="i3"/>
		<input type="radio" value="0.25" name="radio1" id="i4"/>
		<input type="radio" value="0.5" name="radio1" id="i5"/>
        <input type="submit" name="Actualizar"/>
	</form>
<form action="" method="post" class="formularios" id="listado2">
	<input type="hidden" name="oculto2" value="nombre-apellido-2"/>
    <div>Nombre 2</div>
    <div>Apellido 2</div>
		<input type="radio" value="1" name="radio2" id="i1" />
		<input type="radio" value="0.25" name="radio2" id="i2" />
		<input type="radio" value="0.5" name="radio2" id="i3"/>
		<input type="radio" value="0.25" name="radio2" id="i4"/>
		<input type="radio" value="0.5" name="radio2" id="i5"/>
    <input type="submit" name="Actualizar"/>
</form>
 
<fieldset id="console-log-div"></fieldset>
<script src="https://rawgit.com/bahmutov/console-log-div/master/console-log-div.js"></script>
</body>
</html>



Comentarios sobre la versión: 1.0 (1)

Imágen de perfil
xve
06 de Agosto del 2016
estrellaestrellaestrellaestrellaestrella
Muy bueno Vainas!!!
Responder

Comentar la versión: 1.0

Nombre
Correo (no se visualiza en la web)
Valoración
Comentarios

http://lwp-l.com/s3622