How to disable button in after click in mithril.js to prevent multiple clicks

Question

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;
    }
}))

Answer 1

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