Solució formulari ajax

De wikiserver
La revisió el 00:03, 25 març 2015 per Jnoguera (Discussió | contribucions) (Es crea la pàgina amb «<source lang="html"> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Tutorial Ajax</title> </head> <body> <section id="contenedor-formulario"> <fo…».)
(dif) ← Versió més antiga | Versió actual (dif) | Versió més nova → (dif)
Dreceres ràpides: navegació, cerca
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Tutorial Ajax</title>
</head>
<body>
<section id="contenedor-formulario">
    <form id="tuto-ajax-form">
        <input type="text" id="nombre" name="nombre" placeholder="Su nombre"><br>
        <input type="tel" id="telefono" name="telefono" placeholder="Su teléfono"><br>
        <label for="horario">Hora de contacto</label><br>
        <input name="horario" type="radio" checked="checked" value="Mañana"> Mañana<br>
        <input name="horario" type="radio" value="Tarde"> Tarde<br>
        <button type="submit">Enviar</button>
    </form>
</section>
<section id="resultados">
</section>
<section id="respuesta"></section>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
</body>
</html>
$(document).ready(function(){
        $('#respuesta').hide();
        $('#tuto-ajax-form').submit(function(evento){
            $('#respuesta').hide();         
            evento.preventDefault();
            var datos_formulario = $(this).serialize();         
            $.ajax({
                url: 'tutorial-ajax.php',
                data: datos_formulario,
                type: 'POST',
                dataType: 'json',
                success: function(datos){
                    $('#resultados').text(JSON.stringify(datos, null, 4));
                    $('#respuesta').text(datos.respuesta).fadeIn('slow');
                }
            });
             
        });
    });
<?php
    $resultado['enviado'] = $_POST;
    $resultado['respuesta'] = 'Gracias por sus datos '.$_POST['nombre'].', le llamaremos al '.$_POST['telefono'].' en horario de '.$_POST['horario'];
     
    echo json_encode($resultado);
?>