#form_box {
float: left;
width: 290px;
background: #f8f8f8;
border: 1px solid #d6d6d6;
border-left-color: #e4e4e4;
border-top-color: #e4e4e4;
font-size: 11px;
font-weight: bold;
padding: 0.5em;
margin-top: 10px;
margin-bottom: 2px;
}
#form_box div {
padding: 0.2em 0.5em;
}
#form_box p {
float: left;
margin: 4px 0pt;
width: 120px;
}
#log {
float: left;
padding: 0.5em;
margin-left: 10px;
width: 290px;
border: 1px solid #d6d6d6;
border-left-color: #e4e4e4;
border-top-color: #e4e4e4;
margin-top: 10px;
}
#log_res {
overflow: auto;
}
#log_res.ajax-loading {
padding: 20px 0;
background: url(http://demos111.mootools.net/demos/Group/spinner.gif) no-repeat center;
}
window.addEvent('domready', function() {
// You can skip the following two lines of code. We need them to make sure demos
// are runnable on MooTools demos web page.
if (!window.demo_path) window.demo_path = '';
var demo_path = window.demo_path;
// --
$('myForm').addEvent('submit', function(e) {
//Prevents the default submit event from loading a new page.
e.stop();
//Empty the log and show the spinning indicator.
var log = $('log_res').empty().addClass('ajax-loading');
//Set the options of the form's Request handler.
//("this" refers to the $('myForm') element).
this.set('send', {onComplete: function(response) {
log.removeClass('ajax-loading');
log.set('html', response);
}});
//Send the form.
this.send();
});
});
MooTools: Form.Send Demo
Sending a Form with Ajax
First Name:
Last Name:
E-Mail:
MooTooler:
New to Mootools:
yes
no