JavaScript DHTML/Mootools/Form
MooTools: Form.Send Demo
<source lang="html4strict">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <style type="text/css">
- 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;
}
</style> <script type="text/javascript" src="../mootools.js"></script> <script type="text/javascript">
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();
});
});
</script> <title>MooTools: Form.Send Demo</title>
</head> <body>
Sending a Form with Ajax
<form id="myForm" action="/demos/Form.Send/ajax.form.php" method="post">
First Name:
<input type="text" name="first_name" value="John" />
Last Name:
<input type="text" name="last_name" value="Q" />
E-Mail:
<input type="text" name="e_mail" value="john.q@mootools.net" />
MooTooler:
<input type="checkbox" name="mootooler" value="yes" checked="checked" />
New to Mootools:
<select name="new">
<option value="yes" selected="selected">yes</option>
<option value="no">no</option>
</select>
<input type="submit" name="button" id="submitter" />
</form>
Ajax Response
</body> </html> //Php code <?php
print "".print_r($_POST, true)."";
?>
</source>
