Solució formulari ajax
De wikiserver
La revisió el 00:04, 25 març 2015 per Jnoguera (Discussió | contribucions)
<!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(); //Esta función recibe un objeto de evento, sobre el cual invocamos la función preventDefault() para evitar que el formulario sea enviado de manera tradicional.
var datos_formulario = $(this).serialize();
$.ajax({
url: 'ej_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);
?>
