loading

The loading function changes the content of a button or input element to a specified message while providing loading feedback. This can be useful for indicating to users that an operation is in progress.

Works in: HTML5, React JS

Parameter	Type	Default	Description
`message`	`string`	`undefined`	The message to set as the content of the button or input element.
`submitBtn`	`string \| HTMLElement \| null`	`null`	The button or input element to update. This can be a string (ID of the button), an HTMLElement, or null.
`form`	`string \| HTMLElement \| null`	`null`	The HTML form element or its ID from which to find the button if submitBtn is null. This can be a string (ID of the form) or an HTMLElement.

Usage

Example: Update Button Content with Loading Message


const formElement = document.getElementById('myFormId');
nfsfu234FormValidation.loading('Loading...', formElement.querySelector("button[type=submit]"));

Example Form HTML


<form id="myFormId">
  <input type="text" name="fieldName1" value="value1" data-attr-name="fieldName1" />
  <input type="text" name="fieldName2" value="value2" data-attr-name="fieldName2" />
  <button type="submit">Submit</button>
</form>

JavaScript to Update Button Content


const formElement = document.getElementById('myFormId');
const buttonElement = formElement.querySelector("button[type=submit]");
nfsfu234FormValidation.loading('Loading...', buttonElement);

Expected Output

The content of the submit button within the form will be updated to display the message “Loading…”.