Mootools Form onsubmit without domready
There is nothing wrong with the following piece of mootools code. What I would like to do rewrite it with onsubmit event and without domready as on the second code block. Thanks.
<html>
<head>
<title>Simplest Form Ajax</title>
<script type="text/javascript" src="../mootools/mootools-core-1.3.2fc.js"></script>
<script type="text/javascript">
window.addEvent('domready', function() {
$('myForm').addEvent('submit', function(e) {
e.stop();
this.set('send', {
onComplete: function(response) {
$('log_res').set('html', response);
}
});
this.send();
});
});
</script>
</head>
<body>
<h3>Send a Form with Ajax</h3>
<form id="myForm" action="ajaxRes.php" method="post">
<div>
<p>Enter something:
<input type="text" name="something" value="John" />
<input type="submit" />
</p>
</div>
</form></br></br>
<h3>Ajax Response</h3>
<div id="log_res"></div>
</body>
</html>
Unfinished code:
<html>
<head>
<title>Simplest Form Ajax</title>
<script type="text/javascript" src="../mootools/mootools-core-1.3.2fc.js"></script>
<script type="text/javascript">
function loadMe() {
...
});
</script>
</head>
<body>
<h3>Send a Form with Ajax</h3>
<form id="myForm" action="ajaxRes.php" onsubmit="loadMe()" method="post">
<div>
<p>Enter something:
<inp开发者_运维百科ut type="text" name="something" value="John" />
<input type="submit" />
</p>
</div>
</form></br></br>
<h3>Ajax Response</h3>
<div id="log_res"></div>
</body>
</html>
you can use the action attribute of a form with the javascript: prefix (http://jsfiddle.net/mT7WB/)
Here could be a possible implementation (code not tested):
<html>
<head>
<title>Simplest Form Ajax</title>
<script type="text/javascript" src="../mootools/mootools-core-1.3.2fc.js"></script>
<script type="text/javascript">
function submit() {
var obj = {};
["something","somethingElse"].each(function(n) {
obj[n] = ("myForm").getElement("input[name="+n+"]").get("value");
});
new Request.HTML({"url" : "ajaxRes.php"}).addEvent("success", function(resp) {$("log_res").adopt(resp);}).post(obj);
});
</script>
</head>
<body>
<h3>Send a Form with Ajax</h3>
<form id="myForm" action="javascript:submit()" method="post">
<div>
<p>Enter something:
<input type="text" name="something" value="John" />
<input type="text" name="somethingElse" value="John" />
<input type="submit" />
</p>
</div>
</form></br></br>
<h3>Ajax Response</h3>
<div id="log_res"></div>
</body>
</html>
Cheers !
加载中,请稍侯......
精彩评论