Foros del Web » Programación web » Javascript »

[SOLUCIONADO] procesar formulario con ajax sin recargar la pagina

Estas en el tema de procesar formulario con ajax sin recargar la pagina en el foro de Javascript en Foros del Web. Buenas foro. Alguien sabe como procesar un formulario en la misma pagina sin tener que recargar la pagina. Lo que necesito hacer es agregar datos ...
  #1 (permalink)  
Antiguo 08/04/2013, 08:54
Avatar de jandrogdz  
Fecha de Ingreso: julio-2012
Ubicación: public $Guadalajara
Mensajes: 362
Antigüedad: 1 año, 9 meses
Puntos: 12
Pregunta procesar formulario con ajax sin recargar la pagina

Buenas foro.

Alguien sabe como procesar un formulario en la misma pagina sin tener que recargar la pagina.

Lo que necesito hacer es agregar datos a un arreglo y mostrarlos en un div pero no he encontrado ningún código de referencia para hacerlo.


Espero me puedan ayudar.
__________________
Lo imposible solo cuesta un poco mas
  #2 (permalink)  
Antiguo 08/04/2013, 09:04
Avatar de caricatos
Moderador
 
Fecha de Ingreso: abril-2002
Ubicación: Torremolinos (Málaga)
Mensajes: 18.950
Antigüedad: 12 años
Puntos: 1106
Respuesta: procesar formulario con ajax sin recargar la pagina

Hola:

Lo de la misma página no sé de donde lo has sacado, ya que las llamadas ajax hacen una llamada a otra página... esa página puede ser php. Necesitaríamos más datos.

Lo de agregar datos a un div, tal vez no necesite de php...

Saludos
__________________
Por favor:
No hagan preguntas de temas de foros en mensajes privados... no las respondo
  #3 (permalink)  
Antiguo 08/04/2013, 09:08
 
Fecha de Ingreso: abril-2008
Ubicación: El Salvador
Mensajes: 735
Antigüedad: 6 años
Puntos: 47
Respuesta: procesar formulario con ajax sin recargar la pagina

Da mas datos de lo que quieres hacer para hacernos una idea y poder ayudarte.
  #4 (permalink)  
Antiguo 08/04/2013, 09:12
Avatar de jandrogdz  
Fecha de Ingreso: julio-2012
Ubicación: public $Guadalajara
Mensajes: 362
Antigüedad: 1 año, 9 meses
Puntos: 12
Respuesta: procesar formulario con ajax sin recargar la pagina

Si tal ves no me explique bien.

Por ejemplo tengo este formulario:
Código HTML:
Ver original
  1. <form action="procesos_pedido.php" method="GET" name="agregar" id="agregar" >
  2.                     <fieldset>
  3.                         <legend>Agregar producto | servicio</legend>
  4.                     <label for="cantidad">Cantidad</label>
  5.                     <input type="text" name="cantidad" id="cantidad" size="15" /><br />
  6.                     <label for="servicio">Producto | Servicio</label>
  7.                     <input type="text" name="servicio" id="servicio" size="45" autocomplete="off" /><br /><br />
  8.                     <input type="hidden" name="productoID" id="productoID" />
  9.                     <label for="produccion"><input type="checkbox" name="produccion" id="produccion" value="1" /> Producci&oacute;n </label>
  10.                     <label for="diseno"><input type="checkbox" name="diseno" id="diseno" value="1" /> Dise&ntilde;o </label>
  11.                     <label for="inventario"><input type="checkbox" name="inventario" id="inventario" value="1" onClick="disableOthers(this)" /> Inventario </label><br />
  12.                     <label for="comentario_adicional">Comentario adicional</label>
  13.                     <textarea name="comentario_adicional" cols="45" rows="5"></textarea>
  14.                     <div id="mostrarDiv"><a href="javascript:mostrardiv();">+ almac&eacute;n</a></div>
  15.                         <div id="flotante" style="display:none;">
  16.                         <a href="javascript:cerrar();"> - almac&eacute;n</a><br />
  17.                             <div class="izquierda">
  18.                                 <label for="existencias">Existencias</label>
  19.                                 <input type="text" name="existencias" id="existencias" size="7" /><br />
  20.                                 <label for="inventariado">Inventariado</label>
  21.                                 <input type="text" name="inventariado" id="inventariado" size="7" />
  22.                             </div>
  23.                             <div class="derecha">
  24.                                 <label for="minimo_stock">Minimo stock</label>
  25.                                 <input type="text" name="minimo_stock" id="minimo_stock" size="7" /><br />
  26.                                 <label for="estado">Estado</label>
  27.                                 <input type="text" name="estado" id="estado" size="10" />
  28.                             </div>
  29.                         </div>
  30.                     <input type="submit" name="nuevo" value="Agregar" />
  31.                     </fieldset>
  32.                     </form>

En esta misma pagina tengo un div que se llama detalle, donde todo lo que agregar el formulario debe de aparecer en este div.

lo que quisiera es que al presionar agregar solo se haga la petición en AJAX a un archivo PHP y asi no recargar la pagina.

Espero haberme dado a entender.
__________________
Lo imposible solo cuesta un poco mas
  #5 (permalink)  
Antiguo 08/04/2013, 09:37
 
Fecha de Ingreso: abril-2008
Ubicación: El Salvador
Mensajes: 735
Antigüedad: 6 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.       <title></title>
  2.       <script>
  3.             $("#nuevo").click(function(e){
  4.                 e.preventDefault();
  5.                 if ($("#frmActivaUsuario").validationEngine("validate")) {
  6.                 var form_data = {      
  7.                     //Recuperar los valores de los campos del formulario
  8.                     productoID:$("#productoID").val(),  //para acceder al valor de los campos input                
  9.  
  10.                 };
  11.                 $.ajax({
  12.                     type: "POST",
  13.                     url: "escriptphp.php",
  14.                     data: form_data,
  15.                     beforeSend: function(){
  16.                         $("#nuevo").attr("value","Agregando..");
  17.                         $("#nuevo").attr("disabled",true);
  18.                     },
  19.                     success: function(response){
  20.                             $("#el_div_").html(response);
  21.                             $("#nuevo").attr("value","Agregar");
  22.                             $("#nuevo").attr("disabled",false);
  23.  
  24.                     }
  25.                 });
  26.                 }
  27.       </script>
  28. </head>
  29. <form action="procesos_pedido.php" method="GET" name="agregar" id="agregar" >
  30.     <fieldset>
  31.         <legend>Agregar producto | servicio</legend>
  32.     <label for="cantidad">Cantidad</label>
  33.     <input type="text" name="cantidad" id="cantidad" size="15" /><br />
  34.     <label for="servicio">Producto | Servicio</label>
  35.     <input type="text" name="servicio" id="servicio" size="45" autocomplete="off" /><br /><br />
  36.     <input type="hidden" name="productoID" id="productoID" />
  37.     <label for="produccion"><input type="checkbox" name="produccion" id="produccion" value="1" /> Producci&oacute;n </label>
  38.     <label for="diseno"><input type="checkbox" name="diseno" id="diseno" value="1" /> Dise&ntilde;o </label>
  39.     <label for="inventario"><input type="checkbox" name="inventario" id="inventario" value="1" onClick="disableOthers(this)" /> Inventario </label><br />
  40.     <label for="comentario_adicional">Comentario adicional</label>
  41.     <textarea name="comentario_adicional" cols="45" rows="5"></textarea>
  42.     <div id="mostrarDiv"><a href="javascript:mostrardiv();">+ almac&eacute;n</a></div>
  43.         <div id="flotante" style="display:none;">
  44.         <a href="javascript:cerrar();"> - almac&eacute;n</a><br />
  45.             <div class="izquierda">
  46.                 <label for="existencias">Existencias</label>
  47.                 <input type="text" name="existencias" id="existencias" size="7" /><br />
  48.                 <label for="inventariado">Inventariado</label>
  49.                 <input type="text" name="inventariado" id="inventariado" size="7" />
  50.             </div>
  51.             <div class="derecha">
  52.                 <label for="minimo_stock">Minimo stock</label>
  53.                 <input type="text" name="minimo_stock" id="minimo_stock" size="7" /><br />
  54.                 <label for="estado">Estado</label>
  55.                 <input type="text" name="estado" id="estado" size="10" />
  56.             </div>
  57.         </div>
  58.     <input type="submit" name="nuevo" id="nuevo" value="Agregar" />
  59.     </fieldset>
  60. </form>
  #6 (permalink)  
Antiguo 08/04/2013, 09:37
 
Fecha de Ingreso: abril-2008
Ubicación: El Salvador
Mensajes: 735
Antigüedad: 6 años
Puntos: 47
Respuesta: procesar formulario con ajax sin recargar la pagina

nada mas debes construir el script php donde vas a procesar la información
  #7 (permalink)  
Antiguo 08/04/2013, 09:42
Avatar de jandrogdz  
Fecha de Ingreso: julio-2012
Ubicación: public $Guadalajara
Mensajes: 362
Antigüedad: 1 año, 9 meses
Puntos: 12
Respuesta: procesar formulario con ajax sin recargar la pagina

Ok muchas gracias lo pruebo y te comento...
__________________
Lo imposible solo cuesta un poco mas
  #8 (permalink)  
Antiguo 08/04/2013, 09:56
Avatar de jandrogdz  
Fecha de Ingreso: julio-2012
Ubicación: public $Guadalajara
Mensajes: 362
Antigüedad: 1 año, 9 meses
Puntos: 12
Pregunta Respuesta: procesar formulario con ajax sin recargar la pagina

Intente lo que me comentaste pero me manda al archivo y ahi se queda, segun yo deberia de mostrar los datos en el div que yo le mando. ¿Necesito alguna libreria para que funcione?

Código Javascript:
Ver original
  1. <script>
  2.             $("#nuevo").click(function(e){
  3.                 e.preventDefault();
  4.                 if ($("#agregar").validationEngine("validate")) {
  5.                 var form_data = {      
  6.                     //Recuperar los valores de los campos del formulario
  7.                     productoID:$("#productoID").val(),  //para acceder al valor de los campos input      
  8.                     cantidad:$("#cantidad").val(),
  9.                     servicio:$("servicio").val()          
  10.  
  11.                 };
  12.                 $.ajax({
  13.                     type: "POST",
  14.                     url: "procesos_pedido.php",
  15.                     data: form_data,
  16.                     beforeSend: function(){
  17.                         $("#nuevo").attr("value","Agregando...");
  18.                         $("#nuevo").attr("disabled",true);
  19.                     },
  20.                     success: function(response){
  21.                             $("#response").html(response);
  22.                             $("#nuevo").attr("value","Agregar");
  23.                             $("#nuevo").attr("disabled",false);
  24.  
  25.                     }
  26.                 });
  27.                 }
  28.             }
  29.       </script>

Y este es el archivo PHP:
Código PHP:
Ver original
  1. echo $_POST['productoID']."<br />";
  2.         echo $_POST['servicio']."<br />";
  3.         echo $_POST['cantidad']."<br />";

Estoy haciendo algo mal?
__________________
Lo imposible solo cuesta un poco mas
  #9 (permalink)  
Antiguo 08/04/2013, 10:00
 
Fecha de Ingreso: abril-2008
Ubicación: El Salvador
Mensajes: 735
Antigüedad: 6 años
Puntos: 47
Respuesta: procesar formulario con ajax sin recargar la pagina

Claro que si necesitas la libreria jquery... pense que tenias conocimiento de ello pero mejor lee un poco primero, no es nada dificil eso si tenes que tomar el tiempo de leer para comprender como funciona...



http://www.javascriptya.com.ar/jquery/

http://daronwolff.wordpress.com/2011...-jquery-y-php/
  #10 (permalink)  
Antiguo 08/04/2013, 10:09
Avatar de caricatos
Moderador
 
Fecha de Ingreso: abril-2002
Ubicación: Torremolinos (Málaga)
Mensajes: 18.950
Antigüedad: 12 años
Puntos: 1106
Respuesta: procesar formulario con ajax sin recargar la pagina

Hola:

No entiendo porqué cargar una librería para muy pocas líneas de código javascript normalito...

De todos modos, antes de ponerte de lleno a depender de javascript (con o sin librerías) deberías conseguir que todo funcione con javascript desactivado. Infórmate sobre accesibilidad.

Saludos
__________________
Por favor:
No hagan preguntas de temas de foros en mensajes privados... no las respondo
  #11 (permalink)  
Antiguo 08/04/2013, 13:56
Avatar de jandrogdz  
Fecha de Ingreso: julio-2012
Ubicación: public $Guadalajara
Mensajes: 362
Antigüedad: 1 año, 9 meses
Puntos: 12
Pregunta Respuesta: procesar formulario con ajax sin recargar la pagina

caricatos ya he logrado que funcione mi formulario en la misma pagina ahora tengo otro problema quiero mandar un valor de un input al momento de modificarlo pero no me resulta sabes como hacerlo.

Código HTML:
Ver original
  1. <input class="input-simple" type="text" name="nuevaCantidad" id="nuevaCantidad" value="<?php echo $item['cantidad']; ?>" size="7" onchange="nueva_cantidad(4,<?php echo $item['codigo']; ?>)" />

y esta es la funcion de ajax:

Código Javascript:
Ver original
  1. function nueva_cantidad(accion,codigo){
  2.         var contenedor;
  3.         contenedor = document.getElementById('response');
  4.         var nvaCantidad = document.getElementById('nuevaCantidad').value;
  5.  
  6.         ajax=nuevoAjax();
  7.         ajax.open("GET", "procesos_pedido.php?accion="+accion+"&codigo="+codigo+"&nvaCantidad"+nvaCantidad,true);
  8.         ajax.onreadystatechange=function() {
  9.             if (ajax.readyState==4) {
  10.                 contenedor.innerHTML = ajax.responseText
  11.             }
  12.         }
  13.         ajax.send(null)
  14.     }

pero no obtiene el valor del input.
__________________
Lo imposible solo cuesta un poco mas

Última edición por jandrogdz; 08/04/2013 a las 14:01
  #12 (permalink)  
Antiguo 08/04/2013, 14:33
Avatar de jandrogdz  
Fecha de Ingreso: julio-2012
Ubicación: public $Guadalajara
Mensajes: 362
Antigüedad: 1 año, 9 meses
Puntos: 12
Pregunta Respuesta: procesar formulario con ajax sin recargar la pagina

Ok ya lo he solucionado:

Código Javascript:
Ver original
  1. // funcion se utiliza en almacen.php
  2.     function nueva_cantidad(accion,codigo,nuevaCantidad){
  3.         var contenedor;
  4.         contenedor = document.getElementById('response');
  5.         var nvaCantidad;
  6.         nvaCantidad = document.getElementById(nuevaCantidad).value;
  7.  
  8.         ajax=nuevoAjax();
  9.         ajax.open("GET", "procesos_pedido.php?accion="+accion+"&codigo="+codigo+"&nvaCantidad="+nvaCantidad,true);
  10.         ajax.onreadystatechange=function() {
  11.             if (ajax.readyState==4) {
  12.                 contenedor.innerHTML = ajax.responseText
  13.                 //alert(ajax.responseText);
  14.             }
  15.         }
  16.         ajax.send(null)
  17.     }

y en el input queda asi:

Código HTML:
Ver original
  1. <input class="input-simple" type="text" name="nuevaCantidad" id="nuevaCantidad" value="<?php echo $item['cantidad']; ?>" size="7" onchange="nueva_cantidad(4,<?php echo $item['codigo']; ?>,'nuevaCantidad')" />

Gracias a todos.
__________________
Lo imposible solo cuesta un poco mas

Etiquetas: ajax, formulario, php, procesar
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 21:38.
SEO by vBSEO 3.3.2