jQuery Meetups

jQuery Meetups

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

Views: 289

Replies to This Discussion

Daniel, los forms los traes mediante AJAX o ya los tenes embebidos en la pagina y los ocultas con CSS??
para el manejo de formularios yo siempre uso el plugin "jquery.form.js". Siempre me dio buenos resultados.
te dejo la URL
http://jquery.malsup.com/form/
Daniel,
¿Especificamente dónde estás teniendo el problema? ¿En traer los resultados del PHP?

Slds
el problema lo solucione como dijo Gregorio 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.

RSS

Badge

Loading…

© 2013   Created by jqueryadmin.

Badges  |  Report an Issue  |  Terms of Service