Page 54 - JavaScript修炼之道

任务18 暂时禁用提交按钮 43

发生submit事件时禁用控件

form/submit/submit.js

function preventMultipleSubmits() {
this.select('.submit').invoke('disable');
}

document.observe('dom:loaded', function() {
$('commentForm').observe('submit', preventMultipleSubmits);
});

form/submit/index.html

<form id="commentForm" action="post_comment.php">
<p>
<label for="edtText">Your text</label>
<textarea id="edtText" name="text" cols="40" rows="5"></textarea>
</p>
<p><input type="submit" class="submit" value="Send" /></p>
</form>

用class属性进一步装饰（稍显花哨）

form/submit/submit.js

function preventMultipleSubmits(e) {
if (!this.hasClassName('submitting')) {
e.stop();
}
this.addClassName('submitting').select('.submit').invoke('disable');
var that = this;
(function() { that.submit(); }).delay(0.1);
}