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:
El código de controller.do tan solo es...
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);
?>
Comentarios
Publicar un comentario