I was able to disable the button after click but the page is not getting submitted, it just got disabled. How can I submit the page and prevent it from multiple clicks in mithril.js?
m(".submit", m("input", {
type: "submit",
value: "Send email",
id: "emailbtn",
onclick: function () {
var butn = document.getElementById("emailbtn");
butn.disabled = true;
}
}))
I usually set a locking var in the component's closure. Then use that to control if the submit event is propagated not. I'm assuming you are not submitting the form with JS.
function MyForm() {
var locked = false;
function onSubmit(e) {
console.log('onSubmit');
if (!locked) {
// Lock our submit function so it does nothing if triggered again
locked = true;
console.log("Send email.");
} else {
e.preventDefault();
}
}
return {
view: function (vnode) {
return m('form', {
method: "post",
action: "",
onsubmit: onSubmit
}, m(".submit", m("input", {
type: "submit",
value: "Send email",
id: "emailbtn",
disabled: locked,
})));
}
};
}
Usually you want to avoid using ids to manipulate the dom like you would in jQuery unless you are using a 3rd party library with actual jQuery. So in my answer I use the locked
variable to set the disabled
property of the input every time it is drawn instead of doing a look up and manipulating the DOM directly.
Mithril documentation on using closure components: https://mithril.js.org/components.html#closure-component-state