[FIX] website_form: prevent users from crazy clicking

If the feedback of a form is too slow, people might be tempted to
click a second time, trigerring a second request. If, after that,
the result has not been received yet, the user might be tempted
to click a lot of time because he is angry at such slowness. This
behavior would trigger a record creation each time the user clicked
the submit button. This fix disables the button once it has been
clicked once, and re-enable it if the record could not be created,
which means that there was an error in the input and the user needs
to change the values and try again.

The button has been changed to a span to avoid the default browser
behavior to post the form when no function is bound on the send button.
This commit is contained in:
David Monjoie
2016-04-26 11:21:20 +02:00
parent da60ca91cc
commit 6e3389ca73
3 changed files with 7 additions and 2 deletions
+1 -1
View File
@@ -44,7 +44,7 @@
</div>
<div class="form-group">
<div class="col-md-offset-3 col-sm-offset-4 col-sm-8 col-md-7">
<button class="btn btn-primary btn-lg o_website_form_send">Send</button>
<span class="btn btn-primary btn-lg o_website_form_send">Send</span>
<span id="o_website_form_result"></span>
</div>
</div>
@@ -47,6 +47,7 @@ odoo.define('website_form.animation', function (require) {
send: function(e) {
e.preventDefault(); // Prevent the default submit behavior
this.$target.find('.o_website_form_send').off(); // Prevent users from crazy clicking
var self = this;
@@ -211,6 +212,10 @@ odoo.define('website_form.animation', function (require) {
},
update_status: function(status) {
var self = this;
if (status != 'success') { // Restore send button behavior if result is an error
this.$target.find('.o_website_form_send').on('click',function(e) {self.send(e);});
}
this.$target.find('#o_website_form_result').replaceWith(qweb.render("website_form.status_" + status))
},
});
@@ -195,7 +195,7 @@
</div>
<div class="form-group">
<div class="col-md-offset-3 col-sm-offset-4 col-sm-8 col-md-7">
<button class="btn btn-primary btn-lg o_website_form_send">Submit</button>
<span class="btn btn-primary btn-lg o_website_form_send">Submit</span>
<span id="o_website_form_result"></span>
</div>
</div>