plugin para jquery para enviar n formularios con n campos ajax

hanscruz · #1 (**permalink**) 23/05/2009, 09:45

Bueno amigos estoy intentando utilizar jquery, primero con ajax y mi pregunta es la siguiente:

En mi diseño tengo muchos formularios con diferentes numeros de campos, ya consegui enviarlos por ajax correctamnente usando jquery (encontre muchos tutoriales para hacer esto), pero el problema me viene despues de enviar un formulario, se carga otro formulario, luego otro y asi hasta unos cinco mas, ahora tambien funcionan bien haciendo su javascript correspondiente para cada uno de ellos en el head, pero resulta que como son ajax osea cada formulario esta dentro de un div y al enviar el formulario se carga en el mismo div y aparece el nuevo formulario, ya es mucho codigo se imaginaran al tener como 4 campos de formularios al principio y luego cada formulario tiene 5 sub formularios mas el codigo es muy grande.

Pues se ma ha ocurrido hacer lo siguiente para evitar tanto codigo:

Quiero poner unos campos ocultos dentro de cada formulario con los datos para mandar por ajax usando jquery, osea metodo(get o post), url()direcccion a donde mandarlos, y crear un codigo javascript para ajax que al presionar el boton submit de un formulario automaticamente reconosca el id del formulario presionado y de forma automatica tome todos los campos de ese formulario, luego usaria los campos metodo, url y destino para generar los datos de envio respectivos para ajax, algo asi:

Código html:

Ver original<form id="form1">
nombre: <input type="text" name="nombre" id="nombre">
<input type="hidden" name="url" id="url" value="formulario2.php">
<input type="hidden" name="metodo" id="metodo" value="post">
<input type="hidden" name="destino" id="destino" value="capa1">
<input type="submit" name="enviar" id="enviar" value="Enviar Formulario">
</form>

El javascript no se como hacerlo pero les pongo una idea de lo que quisiera que haga:

Código javascript:

Ver original$(document).ready(function (){
$(&#8221;#formx&#8221;).click(function (){//que el valor formx lo detecte automaticamente al presionar cualquier boton submit i que devuelva el valor del id del formulario al que el boton submit presionado pertenece
$.ajax({
beforeSend: function(objeto) {
$(&#8221;#Id_Div_Status&#8221;).html(&#8221;Cargando&#8230;&#8217;); },
type: metodox,// que la avriable metodox tambien lo tome del campo metodo del formulario deleccionado
url: urlx,//que este valor lo tome tambien del campo url del formulario
data: datos,// los datos que los tome automaticamente todos los datos del formulario
success: function(datos){alert(datos);
});
});
});
</script>

Buscando encontre un vago ejemplo de esto pero solo se limita los campo creando un array pero luego hay que usar un explode en php para recuperarlos y yo quisiera que se manden de forma tradicional utilizando jquery.

Y de no ser posible esto como puedo mandar los datos de cada formulario al javascript con JQuery como se hace tradicionalmente con javascript usando el onclick?

Les repito que recien estoy empezando esto de Jquery cualquier idea o referencia a un ejempolo asi reia de mucha ayuda.

Espero su ayuda gracias.

DaronWolff · #2 (**permalink**) 24/02/2011, 16:22

Hola
Fíjate que tuve el mismo problema que tu! Apuesto a que ya resolviste el problema pero por si alguien tiene el mismo problema ahi te va

En la siguiente Web encontrarás una libreria
http://jquery.malsup.com/form/
con la cual podrás hacer envuio de todos los elementos del formulario sin necesidad de concatenar nada!!

Simple HTML

<form id="formulario" action="prueba.php" method="post">
Name: <input type="text" name="nombredealgo" />
Comment: <textarea name="descripciondealgo"></textarea>
<input type="submit" value="Submit Comment" />
</form>

Trabajando con la libreria

<html>
<head>
<script type="text/javascript" src="jquery-1.3.2.js"></script>
<script type="text/javascript" src="jquery.form.js"></script>

<script type="text/javascript">
$(document).ready(function() {
$('#formulario').ajaxForm(function() {
alert("Envio hecho");
});
});
</script>
</head>

Ojo en el action es donde vas a recibir todas las variables
Si usas PHP puedes utilizar para hacer un foreach para todos los $_POST;

Saludos