Tema: procesar formulario con ajax sin recargar la pagina
Ver Mensaje Individual
  #5 (permalink)  
Antiguo 08/04/2013, 09:37
alex1084
 
Fecha de Ingreso: abril-2008
Ubicación: El Salvador
Mensajes: 736
Antigüedad: 16 años
Puntos: 47
Respuesta: procesar formulario con ajax sin recargar la pagina
seria algo mas o menos como esto...


Código HTML: 
Ver original
  1. <html>
  2. <head>
  3.       <title></title>
  4.       <script>
  5.             $("#nuevo").click(function(e){
  6.                 e.preventDefault();
  7.                 if ($("#frmActivaUsuario").validationEngine("validate")) {
  8.                 var form_data = {       
  9.                     //Recuperar los valores de los campos del formulario
  10.                     productoID:$("#productoID").val(),  //para acceder al valor de los campos input                 
  11.  
  12.                 };
  13.                 $.ajax({
  14.                     type: "POST",
  15.                     url: "escriptphp.php",
  16.                     data: form_data,
  17.                     beforeSend: function(){
  18.                         $("#nuevo").attr("value","Agregando..");
  19.                         $("#nuevo").attr("disabled",true);
  20.                     },
  21.                     success: function(response){
  22.                             $("#el_div_").html(response);
  23.                             $("#nuevo").attr("value","Agregar");
  24.                             $("#nuevo").attr("disabled",false);
  25.  
  26.                     }
  27.                 });
  28.                 }
  29.       </script>
  30. </head>
  31. <body>
  32. <form action="procesos_pedido.php" method="GET" name="agregar" id="agregar" >
  33.     <fieldset>
  34.         <legend>Agregar producto | servicio</legend>
  35.     <label for="cantidad">Cantidad</label>
  36.     <input type="text" name="cantidad" id="cantidad" size="15" /><br />
  37.     <label for="servicio">Producto | Servicio</label>
  38.     <input type="text" name="servicio" id="servicio" size="45" autocomplete="off" /><br /><br />
  39.     <input type="hidden" name="productoID" id="productoID" />
  40.     <label for="produccion"><input type="checkbox" name="produccion" id="produccion" value="1" /> Producci&oacute;n </label>
  41.     <label for="diseno"><input type="checkbox" name="diseno" id="diseno" value="1" /> Dise&ntilde;o </label>
  42.     <label for="inventario"><input type="checkbox" name="inventario" id="inventario" value="1" onClick="disableOthers(this)" /> Inventario </label><br />
  43.     <label for="comentario_adicional">Comentario adicional</label>
  44.     <textarea name="comentario_adicional" cols="45" rows="5"></textarea>
  45.     <div id="mostrarDiv"><a href="javascript:mostrardiv();">+ almac&eacute;n</a></div>
  46.         <div id="flotante" style="display:none;">
  47.         <a href="javascript:cerrar();"> - almac&eacute;n</a><br />
  48.             <div class="izquierda">
  49.                 <label for="existencias">Existencias</label>
  50.                 <input type="text" name="existencias" id="existencias" size="7" /><br />
  51.                 <label for="inventariado">Inventariado</label>
  52.                 <input type="text" name="inventariado" id="inventariado" size="7" />
  53.             </div>
  54.             <div class="derecha">
  55.                 <label for="minimo_stock">Minimo stock</label>
  56.                 <input type="text" name="minimo_stock" id="minimo_stock" size="7" /><br />
  57.                 <label for="estado">Estado</label>
  58.                 <input type="text" name="estado" id="estado" size="10" />
  59.             </div>
  60.         </div> 
  61.     <input type="submit" name="nuevo" id="nuevo" value="Agregar" />
  62.     </fieldset>
  63. </form>