Buscar en este blog

viernes, 18 de septiembre de 2009

AJAX con mootools. Envio de formulario

Con las mootools es muy fácil usar ajax sin necesidad de manejar el objeto XmlHttpRequest y complicarse con las compatibilidades de los navegadores.

Este ejemplo es el envio de un formulario, tan sencillo como formulario.send();

Ahí va el código:

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Insert title here</title>
<script type="text/javascript" src="js/mootools/mootools-1.2.1-core-yc.js"></script>
<style>

/* los colores son muy mejorables */

.formulario {
display: block;
border: 0.1em solid green;
background-color: #777070;
color: #ffffff;
font-size: 0.7em;

}
.formulario label {
display: block;
}
.formulario input {
display: block;
background-color: #efdddd;
color: #f60962;
}
.formulario input[type=submit] {
background-color: #000000;
color: #f60962;
font-weight: bolder;
}
.codigo {
width: 10em;
}
.descripcion {
width: 20em;
}
.cantidad {
width: 5em;
}
.precio {
width: 5em;
}
.dto {
width: 5em;
}
.tax {
width: 5em;
}
.importe {
width: 5em;
}

</style>
</head>
<body>

<form action="controller.do" id="formulario" name="formulario" method="post" class="formulario">
<label>Código</label>
<input type="text" id="codigo" name="codigo" maxlength="16" class="codigo" />
<label>Decripción</label>
<input type="text" id="descripcion" name="descripcion" maxlength="120" class="descripcion" />
<label>Cantidad</label>
<input type="text" id="cantidad" name="cantidad" maxlength="9" class="cantidad" />
<label>Precio</label>
<input type="text" id="precio" name="precio" maxlength="11" class="precio" />
<label>Dto</label>
<input type="text" id="dto" name="dto" maxlength="5" class="dto" />
<label>Tax</label>
<input type="text" id="tasa" name="tasa" maxlength="5" class="tax" />
<label>Importe</label>
<input type="text" id="importe" name="importe" maxlength="15" class="importe" />
<input type="submit" id="guardar" name="guardar" value="Guardar" title="Guardar"/>
</form>
<div id="resultado"></div>
<script type="text/javascript">

window.addEvent('domready', function() {
addEventToForm('formulario','resultado');
});
function addEventToForm(_id_form, _id_result) {

$(_id_form).addEvent('submit', function(e) {
//Prevents the default submit event from loading a new page.
e.stop();

this.set('send', {onComplete: function(response) {

$(_id_result).set('html', response);
}});
//Send the form.
this.send();
});
}

</script>
</body>
</html>


El código de controller.do tan solo es...

<?php
print_r($_REQUEST);
?>

No hay comentarios: