Enviar form por ajax y jquery con funcion desde enlace

Shaito · #1 (**permalink**) 20/03/2011, 06:55

Hola FdW!

Llevo un tiempo comiendome la cabeza, y no consigo hacer que desde un enlace se envíe un formulario, eso si, por ajax y jquery es decir, con los efectos de aparecer y desaparecer y sin moverme de la web actual ni recargarla.

Espero que me puedan ayudar.

Un saludo.

masterpuppet · #2 (**permalink**) 20/03/2011, 07:14

Que tal Shaito,

te dejo un howto, si se te complica postea lo que tengas echo y te damos uno mano.

Saludos.

Shaito · #3 (**permalink**) 20/03/2011, 07:16

OK gracias

Si tengo dudas las comento

Un saludo

Shaito · #4 (**permalink**) 20/03/2011, 07:18

No es el tipo de envío que busco, yo me refiero al estilo <input type="button" onlcick="function">

Un saludo

masterpuppet · #5 (**permalink**) 20/03/2011, 07:25

Mmmmm, al inicio tenes esto:

Código Javascript:

Ver original$(function() {
    $(".button").click(function() {
      // validate and process form here
    });
});

hace justamente lo que estas diciendo, agrega el evento click al boton, que tanto conoces de jQuery ?

Shaito · #6 (**permalink**) 20/03/2011, 08:11

Si, eso lo vi, pero, soy nuevo en javascript y estoy probando a unir ajax effects con esa funcion.

Un saludo y gracias

masterpuppet · #7 (**permalink**) 20/03/2011, 08:24

Es que el ejemplo que te pase tiene efectos tambien, probaste el demo ?, postea lo que tengas echo y lo vamos viendo.

Saludos.

hmvr414 · #8 (**permalink**) 20/03/2011, 17:33

Prueba este ejemplo:

archivo formulario.html

Código HTML:

Ver original<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script type="text/javascript">
    $(document).ready(function () {
    
        $("#formulario").submit(function (ev) {
            var $frm = $(this);
            ev.preventDefault();
            
            $.ajax({
            
                type: $frm.attr("method"),
                url: $frm.attr("action"),
                data: $frm.serialize(),
                success: function (data) {
                    $("#resultado").append(data);
                }
            });
        });
    });
</script>
</head>
<body>
    <form id="formulario" action="procesar.php" method="POST">
        <input name="datoA" type="text" value="" />
        <input name="datoB" type="text" value="" />
        <input name="submit" type="submit" value="Enviar" />
    </form>
    <div id="resultado"></div>
</body>
</html>

archivo procesar.php:

Código PHP:

Ver original<?php
    var_dump($_POST);