Question 45389 in Html Question posted in
Some basic documentation can be found here.

submit-form-loading – challenged – Html

Trying to on submit/button generate loading (animation), bootstrap/js. Kicking my … , any assist would be appreciated. Assume the following, yes i have tried many variations, the JS is ‘calling an api for data’ on user submit, the data is rendered in a container call namesContainer, it all works [except] the loading, while rendering. Any assist would be great, an actual good link/bootstrap or other.

<button class="btn btn-primary" type="submit" id="generateNamesButton">
<span id="generateNamesText">Generate Names</span>
<span id="generateNamesSpinner" style="display: none">
<span class="spinner-grow spinner-grow-sm" role="status" aria-hidden="true"></span>
<span class="visually-hidden">Loading...</span>
</span>
</button>


document.querySelector("form").addEventListener("submit", async function(event) {
    event.preventDefault();

    const inputIndustry = document.querySelector("#inputIndustry").value;
    const languageSelect = document.querySelector("#languageSelect");
    const selectedLanguage = languageSelect.options[languageSelect.selectedIndex].value;

    showLoader(true);

    try {
        const names = await generateNames(inputIndustry, selectedLanguage);
        const namesContainer = document.querySelector("#namesContainer");
        const card = namesContainer.parentElement;
        card.style.display = "block";
        namesContainer.innerHTML = `<ul>${names.split("n").map(name => `<li>${name}</li>`).join("")}</ul>`;
    } catch (error) {
        console.error(error);
        const namesContainer = document.querySelector("#namesContainer");
        namesContainer.innerHTML = "Error generating names";
    }

    showLoader(false);
});

function showLoader(show) {
    const button = document.querySelector("#generateNamesButton");
    if (show) {
        button.disabled = true;
        button.innerHTML = `<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
                            <span class="visually-hidden">Loading...</span>`;
    } else {
        button.disabled = false;
        button.innerHTML = `<span id="generateNamesText">Generate Names</span>
                            <span id="generateNamesSpinner" style="display: none;">
                                <span class="spinner-grow spinner-grow-sm" role="status" aria-hidden="true"></span>
                                <span class="visually-hidden">Loading...</span>
                            </span>`;
    }
}


function showLoader(show) {
    const button = document.querySelector("#generateNamesButton");
    if (show) {
        button.disabled = true;
        button.innerHTML = `<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
                            <span class="visually-hidden">Loading...</span>`;
    } else {
        button.disabled = false;
        button.innerHTML = `<span id="generateNamesText">Generate Names</span>
                            <span id="generateNamesSpinner" style="display: none;">
                                <span class="spinner-grow spinner-grow-sm" role="status" aria-hidden="true"></span>
                                <span class="visually-hidden">Loading...</span>
                            </span>`;
    }
}
[button=submit], [loading/visible], results rendered [loading/hidden]..

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0 
    [CSS]
.custom-btn-color {
background-color: #7668a5;
color: #ffffff;
}
.custom-btn-color:hover {
background-color: #aba4ee;
}

[HTML]
<button class="btn custom-btn-color" id="submitButton" onClick="handleSubmit()">Generate Names</button>

[JS]
let isLoading = false;

const toggleLoading = () => {
isLoading = !isLoading;
if (isLoading) {
    document.getElementById("submitButton").innerHTML = '<span class="spinner-grow spinner-grow-sm mr-3" role="status" aria-hidden="true"></span>    Loading...';
} else {
    document.getElementById("submitButton").innerHTML = 'Generate Names';
}
};

const handleSubmit = async () => {
    const form = document.querySelector("form");
    form.addEventListener("submit", async function(event) {
    event.preventDefault();
    const inputIndustry = document.querySelector("#inputIndustry").value;
    const languageSelect = document.querySelector("#languageSelect");
    const selectedLanguage = languageSelect.options[languageSelect.selectedIndex].value;
    toggleLoading();
    try {
        const names = await generateNames(inputIndustry, selectedLanguage);
        const namesContainer = document.querySelector("#namesContainer");
        const card = namesContainer.parentElement;
        card.style.display = "block";
        namesContainer.innerHTML = `<ul>${names.split("n").map(name => `<li>${name}</li>`).join("")}</ul>`;
    } catch (error) {
        console.error(error);
        const namesContainer = document.querySelector("#namesContainer");
        namesContainer.innerHTML = "Error generating names";
    } finally {
        toggleLoading();
    }
    });
};

  2. 0

    So basically what you mean is that you have a button that when clicked submits some data to the form element. While the onSubmit() is being executed, you need to display a "Loading…" animation on your submit button

    To achieve this, follow this approach:

    <button id="submitButton" onClick="handleSubmit()">Click Me </button>

let isLoading = false;
const toggleLoading = () => {
isLoading = !isLoading
 if(isLoading) {
document.getElementById("submitButton").innerHTML = "Loading...";
 } else {
document.getElementById("submitButton").innerHTML = "Click Me";
}
}

const handleSubmit()  = async () => {
toggleLoading()
// Your form processing logic
toggleLoading()
}

    Here, toggleLoading() will set loading to true if it’s false and false if loading variable is true. You can replace the Loading… text with the bootstrap loading animation code

    But please note that changes will be clearly visible only if the processing task is an asynchronous task requiring over 1-2 seconds of time

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search