javascripthtmlmithril.js

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


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

Solution

  • 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