Hacer Pregunta

Conecta

entre Desarrolladores

Recibe ayuda de expertos

Registrate y pregunta

Es gratis y fácil

Recibe respuestas

Respuestas, votos y comentarios

Vota y selecciona respuestas

Recibe puntos, vota y da la solución

Pregunta

3votos

Formularios, Ajax y Jquery

preguntó
Web
1446 Vistas
2 Respuestas
solucionada

Hola me estoy volviendo loco con esto, con los enlaces no tengo ningun problema se cargan todos en <section class="section"> pero los formularios me estan volviendo loco, ya que no se cargan como los enlaces al darle al submit, pongo el codigo:

$(document).ready(function() {  
        $("form").submit(function( event ) {
            event.preventDefault(); 
                var type = "POST";  
            var url = $(this).prop("action");   
            var cadena = $(this).serialize();   

            $.ajax({
                type: type,
                url: url,
                data: cadena                    
                success: function(data) {
                    if (data) {
                        alert("Tipo: " + type); 
                        alert("Url: " + url);   
                        alert("Data: " + data);                     
                        $(".section").html(data);   
                    }                   
                    else {
                        alert("Data no tiene valor");
                    }           
                }
            });
            //return false;
        });
      });
por bichomen (2.770 puntos) en Web

2 Respuestas

2votos

bichomen Puntos2770

Bueno después de revisar todo el codigo y realizar modificaciones he conseguido que funcione:

$(document).ready(function() {
       $("body").on("submit", "form", function( event ) {
            $(this).replaceWith('Pensando...');

            event.preventDefault();             

            var type = "POST";  
            var url = $(this, "form").prop("action");   
            var cadena = $(this, "form").serialize();   

            $.ajax({
                type: type,
                url: url,
                data: cadena,               
                success: function(data) {
                    if (data) {
                        $(".section").html(data);
                        return;
                    }                   
                    else {
                        alert("Data no tiene valor");
                    }           
                }
            });
        });
 });
por bichomen (2.770 puntos)

0voto

Peter comentado

Gracias por compartir la solución!

por Peter (150.480 puntos)

4votos

Leonardo-Tadei Puntos227320

Hola @bichomen,

Nos faltaría el código del formulario para tener todo el panorama...

El return false; que tenés comentado al final es necesario, pero tal vez lo sacaste por un fallo previo qe genera el HTML.

En este enlace tenés un ejemplo que hace esto

<!DOCTYPE HTML>
<html>
<head>
<title>Enviar formulario con Ajax Jquery</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script>   
$(function(){
 $("#btn_enviar").click(function(){
 var url = "dame-datos.php"; // El script a dónde se realizará la petición.
    $.ajax({
           type: "POST",
           url: url,
           data: $("#formulario").serialize(), // Adjuntar los campos del formulario enviado.
           success: function(data)
           {
               $("#respuesta").html(data); // Mostrar la respuestas del script PHP.
           }
         });

    return false; // Evitar ejecutar el submit del formulario.
 });
});
</script>
</head>
<body>
<p>Al enviar el formulario vía ajax, consultaremos en el archivo dame-datos.php si el valor del campo nombre se 
encuentra en el array y la respuestas será positiva o negativa, según su valor.</p>
<p>El Array contiene los siguientes nombres ... <b>antonio, pedro, alberto</b></p>
<center>
<form method="post" id="formulario">
<table>
<tr>
<td>Introduce un nombre:</td><td><input type="text" name="nombre"></td>
<td></td><td><input type="button" id="btn_enviar" value="Buscar nombre"></td>
</tr>
</table>
</form>
<div id="respuesta">
</div>
</center>
</body>
</html>

Saludos cordiales!

por Leonardo-Tadei (227.320 puntos)

0voto

bichomen comentado

Gracias @Leonardo-Tadei pero ya había consultado ese enlace justamente para ver como enviar los formularios, voy a poner un poco en contesto, el código de jquery, lo tengo en un js, con más código jquery, este archivo lo cargo en el head, en el index en la section, es donde voy cargando dinamicamente los enlaces a modo de iframe como antiguamente se hacía, esto lo hago con código jquery y funciona, pero cuando configuro un form que solo tiene un input="text" y un botón de enviar, en vez cargar el contenido en section lo que hace es recargar toda la página como si acabase de entrar, osea en section carga el contenido por defecto del inicio. Y ese no es comportamiento esperado.

Pongo el código del formulario:

<form id="ord" class="form" name="orden" method="post">
            <input type="text" id="tt" name="tt" placeholder="1"  cols="2" rows="1" class="camponumerico">&nbsp;
            <input type="submit" id="submit" name="submit" value="buscar" class="submit">
        </form>

Para descartar errores al tipear el código he probado quitar código y dejar solo la función:

$(document).ready(function() {  
        $("#ord").submit(function( event ) {
                   event.preventDefault();
                   return false;
        });
)};

Esto tendría que parar el envió y no salir de la página, pero vuelve a recargar el index.

por bichomen (2.770 puntos)

Por favor, accede o regístrate para responder a esta pregunta.

Otras Preguntas y Respuestas


Sin Respuesta

Preguntas relacionadas

Actividad Reciente

Ultimas Preguntas

Preguntas relacionadas

Usuarios Top

Todos los Usuarios Usuarios Nuevos

Etiquetas

Categorías

...

Bienvenido a entre Desarrolladores, donde puedes realizar preguntas y recibir respuestas de otros miembros de la comunidad.

Etiquetas

Categorías

Conecta