First and foremost: I’m using Webflow, so the issue can be related to Webflow somehow.

Second, I’m still learning to code, so please keep in mind that I’m still a newbie.

I’m using two same forms (different classes since, well, they are two separate elements) on a site because the one is static and another one is located in CMS (Collection List).

The thing is, they did work together before, but I did something, and… well, you know — I’ve tried to debunk what happened, but didn’t find a proper solution.

For some, very-very strange reason, only the latter works, e.g., if jobs-form-cms-button is the first, then it won’t work, but jobs-form-button will. And vice versa.

function checkform() {
    const formElements = document.forms["wf-form-jobs"].elements;
    let submitBtnActive = true;

    for (let inputEl = 0; inputEl < formElements.length; inputEl++) {
        if (formElements[inputEl].value.length == 0) submitBtnActive = false;
    }

    if (submitBtnActive) {
        document.getElementById("jobs-form-button").disabled = false;
    } else {
        document.getElementById("jobs-form-button").disabled = "disabled";
    }
};

function checkform() {
    const formElementsCMS = document.forms["wf-form-cms-jobs"].elements;
    let submitBtnActiveCMS = true;

    for (let inputEl = 0; inputEl < formElementsCMS.length; inputEl++) {
        if (formElementsCMS[inputEl].value.length == 0) submitBtnActiveCMS = false;
    }

    if (submitBtnActiveCMS) {
        document.getElementById("jobs-form-cms-button").disabled = false;
    } else {
        document.getElementById("jobs-form-cms-button").disabled = "disabled";
    }
};

I’ve renamed some vars and const because it didn’t work otherwise. Also, I did some stuff in order to make this code work with Webflow since I couldn’t add some attributes to the native Webflow elements, e.g., “Form Button” (“disabled” attribute was reserved for the system) — so I added the forms by myself via custom code element.