jQuery Meetups

jquery.form

Hola a todos no se si es el grupo correcto, estoy haciendo un sitio web y tengo problemas para enviar un formulario sin recargar la pagina completa, el resultado del formulario quiero ponerlo dentro un div en particular.
He buscado en google y en diferentes foros sin tener exito.
la estructura es la siguiente:
pagina de inicio:
<div> banner</div>
<div> menu </div>
<div> contenido.
<div> formulario</div>
<div> respuesta </div>
</div>

al seleccionar una opcion del menu, este me trae mediante ajax un formulario y lo carga en el div correspondiente.
al hacer click sobre el boton submit del formulario quiero modificar el contenido de este div y el resultado del .php q procesa el formulario volcarlo en el div respuesta.
alguien puede darme una mano?

este es el contenido que se carga en el div formulario y es la manera en que trato el formulario.
<script type="text/javascript">
$(function() {
$("#tabs").tabs();
$("#fechaing").datepicker();
$("#fechafin").datepicker();
$("#myForm").submit(function(event) {
   event.preventDefault();
   var url = $(this).attr('action');
   var datos = $(this).serialize();
   $.get(url, datos, function(resultado) {
     $('#resultado').html(resultado);
   });
});
});
</script>
<div id="tabs">
<ul>
<li><a href="#tabs-1">Nuevo empleado</a></li>
<li><a href="#tabs-2">Consultas</a></li>
<li><a href="#tabs-3">Listados</a></li>
</ul>
<div id="tabs-1">
<FORM id="myForm" method="POST" ACTION="addempleado.php">
   Nombre :<INPUT type="text" name="nombre" size="30" maxlength="50"><br>
   Apellido :<INPUT type="text" name="apellido" size="30" maxlength="50"><br>
   DNI :<INPUT type="text" name="documento" size="8" maxlength="8"><br>
   Telefono :<INPUT type="text" name="telefono" size="10" maxlength="12"><br>
   Domicilio :<INPUT type="text" name="domicilio" size="40" maxlength="100"><br>
   Email :<INPUT type="text" name="telefono" size="10" maxlength="12"><br>
   Fecha Ingreso :<input id="fechaing" name="fechaing" type="text" size="8"><br>
   Fecha Egreso :<input id="fechafin" name="fechafin" type="text" size="8"><br>
   <INPUT type="submit" name="grabar" value="Grabar" size="30">
</FORM>
<p id="#resultado"></p>
</div>
<div id="tabs-2">
        <p>Morbi tincidunt, dui sit amet facilisis feugiat, odio metus gravida ante, ut </p>
</div>
<div id="tabs-3">
        <p>Mauris eleifend est et turpis. Duis id erat. Suspendisse potenti. Aliquam vulputate, </p>
</div>
</div>

Tags: ajax, formularios, jquery

Replies to This Discussion

Permalink Reply by Héctor Guedea on October 25, 2010 at 12:47pm

Echale un vistazo a http://www.jensbits.com/2009/10/04/jquery-ajax-and-jquery-post-form...

En ese post, te explica paso por paso.

Saludos, cualquier duda de eso, posteala aqui.

Permalink Reply by Daniel Esteban Arias on October 28, 2010 at 7:18am

el problema lo solucione como una persona en otro grupo, con el comando .live(), debido a que cargo en forma dinamica un div con tabs y dentro de cada tabs un formulario, logre solucionarlo, solo q que al recibir los datos en el script que procesa cada uno de los formularios el contenido de los campos x ejemplo

" + data.nombre + ", " + data.email_post + data.mensaje + "

"); }, "json");
return false;
}));
$("#btnnuevocargo").live("click",(function(){
$.post("addtipoemp.php", $("#frmtipoemp").serialize(),
function(data){
$("#resultado").html("

" + data.mensaje + "

"); }, "json");
return false;
}));

estas son las funciones que utilizo para enviar los datos del formulario sin recargar la pagina.

Permalink Reply by pavel on February 10, 2011 at 7:13am

Muy bueno este post

gracias

Héctor Guedea said:

Echale un vistazo a http://www.jensbits.com/2009/10/04/jquery-ajax-and-jquery-post-form...

En ese post, te explica paso por paso.

Saludos, cualquier duda de eso, posteala aqui.

Permalink Reply by pavel on February 10, 2011 at 4:24pm

Excelente ...

pavel said:

Muy bueno este post

gracias

Héctor Guedea said:

Echale un vistazo a http://www.jensbits.com/2009/10/04/jquery-ajax-and-jquery-post-form...

En ese post, te explica paso por paso.

Saludos, cualquier duda de eso, posteala aqui.

Permalink Reply by Aldo Moran Marquez on April 8, 2011 at 11:53am

hola a todos creo que con este codigo seria mas sensillo

$.ajax({
   type: "POST",
   url: "tuPagina.php",
   data: ""+$("#tuForm").serialize(), //las variables se estarian en un string como este a=1&b=2...
   success: function(data){
     $("#tuDiv").html(data);
   }
 });

jquery.form

Replies to This Discussion

Badge