[SOLUCIONADO] procesar formulario con ajax sin recargar la pagina

jandrogdz · #1 (**permalink**) 08/04/2013, 08:54

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.

caricatos · #2 (**permalink**) 08/04/2013, 09:04

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

alex1084 · #3 (**permalink**) 08/04/2013, 09:08

Da mas datos de lo que quieres hacer para hacernos una idea y poder ayudarte.

jandrogdz · #4 (**permalink**) 08/04/2013, 09:12

Si tal ves no me explique bien.

Por ejemplo tengo este formulario:

Código HTML:

Ver original<form action="procesos_pedido.php" method="GET" name="agregar" id="agregar" >
                    <fieldset>
                        <legend>Agregar producto | servicio</legend>
                    <label for="cantidad">Cantidad</label>
                    <input type="text" name="cantidad" id="cantidad" size="15" /><br />
                    <label for="servicio">Producto | Servicio</label>
                    <input type="text" name="servicio" id="servicio" size="45" autocomplete="off" /><br /><br />
                    <input type="hidden" name="productoID" id="productoID" />
                    <label for="produccion"><input type="checkbox" name="produccion" id="produccion" value="1" /> Producci&oacute;n </label>
                    <label for="diseno"><input type="checkbox" name="diseno" id="diseno" value="1" /> Dise&ntilde;o </label>
                    <label for="inventario"><input type="checkbox" name="inventario" id="inventario" value="1" onClick="disableOthers(this)" /> Inventario </label><br />
                    <label for="comentario_adicional">Comentario adicional</label>
                    <textarea name="comentario_adicional" cols="45" rows="5"></textarea>
                    <div id="mostrarDiv"><a href="javascript:mostrardiv();">+ almac&eacute;n</a></div>
                        <div id="flotante" style="display:none;">
                        <a href="javascript:cerrar();"> - almac&eacute;n</a><br />
                            <div class="izquierda">
                                <label for="existencias">Existencias</label>
                                <input type="text" name="existencias" id="existencias" size="7" /><br />
                                <label for="inventariado">Inventariado</label>
                                <input type="text" name="inventariado" id="inventariado" size="7" />
                            </div>
                            <div class="derecha">
                                <label for="minimo_stock">Minimo stock</label>
                                <input type="text" name="minimo_stock" id="minimo_stock" size="7" /><br />
                                <label for="estado">Estado</label>
                                <input type="text" name="estado" id="estado" size="10" />
                            </div>
                        </div> 
                    <input type="submit" name="nuevo" value="Agregar" />
                    </fieldset>
                    </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.

alex1084 · #5 (**permalink**) 08/04/2013, 09:37

seria algo mas o menos como esto...

Código HTML:

Ver original<html>
<head>
      <title></title>
      <script>
            $("#nuevo").click(function(e){
                e.preventDefault();
                if ($("#frmActivaUsuario").validationEngine("validate")) {
                var form_data = {       
                    //Recuperar los valores de los campos del formulario
                    productoID:$("#productoID").val(),  //para acceder al valor de los campos input                 
 
                };
                $.ajax({
                    type: "POST",
                    url: "escriptphp.php",
                    data: form_data,
                    beforeSend: function(){
                        $("#nuevo").attr("value","Agregando..");
                        $("#nuevo").attr("disabled",true);
                    },
                    success: function(response){
                            $("#el_div_").html(response);
                            $("#nuevo").attr("value","Agregar");
                            $("#nuevo").attr("disabled",false);
 
                    }
                });
                }
      </script>
</head>
<body>
<form action="procesos_pedido.php" method="GET" name="agregar" id="agregar" >
    <fieldset>
        <legend>Agregar producto | servicio</legend>
    <label for="cantidad">Cantidad</label>
    <input type="text" name="cantidad" id="cantidad" size="15" /><br />
    <label for="servicio">Producto | Servicio</label>
    <input type="text" name="servicio" id="servicio" size="45" autocomplete="off" /><br /><br />
    <input type="hidden" name="productoID" id="productoID" />
    <label for="produccion"><input type="checkbox" name="produccion" id="produccion" value="1" /> Producci&oacute;n </label>
    <label for="diseno"><input type="checkbox" name="diseno" id="diseno" value="1" /> Dise&ntilde;o </label>
    <label for="inventario"><input type="checkbox" name="inventario" id="inventario" value="1" onClick="disableOthers(this)" /> Inventario </label><br />
    <label for="comentario_adicional">Comentario adicional</label>
    <textarea name="comentario_adicional" cols="45" rows="5"></textarea>
    <div id="mostrarDiv"><a href="javascript:mostrardiv();">+ almac&eacute;n</a></div>
        <div id="flotante" style="display:none;">
        <a href="javascript:cerrar();"> - almac&eacute;n</a><br />
            <div class="izquierda">
                <label for="existencias">Existencias</label>
                <input type="text" name="existencias" id="existencias" size="7" /><br />
                <label for="inventariado">Inventariado</label>
                <input type="text" name="inventariado" id="inventariado" size="7" />
            </div>
            <div class="derecha">
                <label for="minimo_stock">Minimo stock</label>
                <input type="text" name="minimo_stock" id="minimo_stock" size="7" /><br />
                <label for="estado">Estado</label>
                <input type="text" name="estado" id="estado" size="10" />
            </div>
        </div> 
    <input type="submit" name="nuevo" id="nuevo" value="Agregar" />
    </fieldset>
</form>

alex1084 · #6 (**permalink**) 08/04/2013, 09:37

nada mas debes construir el script php donde vas a procesar la información

jandrogdz · #7 (**permalink**) 08/04/2013, 09:42

Ok muchas gracias lo pruebo y te comento...

jandrogdz · #8 (**permalink**) 08/04/2013, 09:56

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<script>
            $("#nuevo").click(function(e){
                e.preventDefault();
                if ($("#agregar").validationEngine("validate")) {
                var form_data = {       
                    //Recuperar los valores de los campos del formulario
                    productoID:$("#productoID").val(),  //para acceder al valor de los campos input       
                    cantidad:$("#cantidad").val(),
                    servicio:$("servicio").val()          
 
                };
                $.ajax({
                    type: "POST",
                    url: "procesos_pedido.php",
                    data: form_data,
                    beforeSend: function(){
                        $("#nuevo").attr("value","Agregando...");
                        $("#nuevo").attr("disabled",true);
                    },
                    success: function(response){
                            $("#response").html(response);
                            $("#nuevo").attr("value","Agregar");
                            $("#nuevo").attr("disabled",false);
 
                    }
                });
                }
            }
      </script>

Y este es el archivo PHP:

Código PHP:

Ver originalecho $_POST['productoID']."<br />";
        echo $_POST['servicio']."<br />";
        echo $_POST['cantidad']."<br />";

Estoy haciendo algo mal?

alex1084 · #9 (**permalink**) 08/04/2013, 10:00

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/

caricatos · #10 (**permalink**) 08/04/2013, 10:09

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

jandrogdz · #11 (**permalink**) 08/04/2013, 13:56

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<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 originalfunction nueva_cantidad(accion,codigo){
        var contenedor;
        contenedor = document.getElementById('response');
        var nvaCantidad = document.getElementById('nuevaCantidad').value;
 
        ajax=nuevoAjax();
        ajax.open("GET", "procesos_pedido.php?accion="+accion+"&codigo="+codigo+"&nvaCantidad"+nvaCantidad,true);
        ajax.onreadystatechange=function() {
            if (ajax.readyState==4) {
                contenedor.innerHTML = ajax.responseText
            }
        }
        ajax.send(null)
    }

pero no obtiene el valor del input.

jandrogdz · #12 (**permalink**) 08/04/2013, 14:33

Ok ya lo he solucionado:

Código Javascript:

Ver original// funcion se utiliza en almacen.php
    function nueva_cantidad(accion,codigo,nuevaCantidad){
        var contenedor;
        contenedor = document.getElementById('response');
        var nvaCantidad;
        nvaCantidad = document.getElementById(nuevaCantidad).value;
 
        ajax=nuevoAjax();
        ajax.open("GET", "procesos_pedido.php?accion="+accion+"&codigo="+codigo+"&nvaCantidad="+nvaCantidad,true);
        ajax.onreadystatechange=function() {
            if (ajax.readyState==4) {
                contenedor.innerHTML = ajax.responseText
                //alert(ajax.responseText);
            }
        }
        ajax.send(null)
    }

y en el input queda asi:

Código HTML:

Ver original<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.