How can I submit a form using the Post method in Bootstrap v5 and then indicate that the form is being processed? I've encountered numerous examples for Bootstrap v4 and jQuery, but since Bootstrap v5 no longer supports jQuery and there are potential compatibility issues, I'm looking for a solution specific to Bootstrap v5.
Below is a simplified version of the form I'm working with:
<form action="" method="post" id="reqform">
<div class="input-group">
<div class="form-floating mb-3">
<input class="form-control " id="nameInputId" placeholder="name" name="name" aria-describedby="basic-addon1" type="text">
<label for="nameInputId">Name</label>
</div>
</div>
<button type="submit" id="submitBtnId" class="btn btn-primary">Submit</button>
</form>
I attempted to implement the following script at the end of the file:
// Display loading state when submit button is clicked
submitBtnElm = document.getElementById("submitBtnId")
submitBtnElm.addEventListener("click", function () {
// Disable the button
submitBtnElm.disabled = true;
// Disable the remaining form fields
document.getElementById("nameInputId").disabled = true;
// Add a spinner to the button and change the text to 'Loading...'
submitBtnElm.innerHTML = '<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>Loading...'
});
In my testing on Chrome in CentOS 7, the form never gets submitted to the backend; only the loading button is displayed. On Firefox, the form is submitted but the name field value is not sent to the backend. Removing this JavaScript code resolves the issues.
I also tried using the onsubmit attribute in the form tag, but encountered the same issues:
<form action="" method="post" id="reqform" onsubmit="return disableForm(this);">
My goal is to send the form data to the backend server first, then display the loading button and disable other fields. I'm seeking a method to ensure the JavaScript code doesn't interfere with the data submission. I want the form to be submitted to the backend server even if JavaScript is disabled. While I've come across similar queries involving jQuery, none of the solutions seem to work for my case.
Update: I also attempted the following:
submitBtnElm.addEventListener("submit", function ()
I debugged the backend server execution flow and observed that the JavaScript code doesn't execute while the server processes the data. I aim to change the button and form as soon as the data is submitted so that the user cannot interact further.
Update 2 I discovered an article that suggests wrapping the form disabling code in a setTimeout function:
This approach worked for me in both Chrome and Firefox on CentOS 7. Unfortunately, I don't have access to a Mac for testing. Below is the updated code that yielded successful results:
submitBtnElm = document.getElementById("submitBtnId")
submitBtnElm.addEventListener('click', function(event) {
setTimeout(function () {
event.target.disabled = true;
}, 0);
});
I'm curious to know if this solution is cross-browser compatible according to JavaScript experts. If not, what alternative approach would you recommend? Another solution I found involved replacing the functional button with a non-functional one displaying a 'loading' message.