How to handle Bootstrap form submission with JavaScript?

Answer: Using JavaScript to process Bootstrap forms requires preventing default submission, validating data, and submitting asynchronously. Prevent page refresh through event.preventDefault(), obtain the input value and prompt errors using is-invalid and other classes, and finally use fetch to send data and update UI feedback.

Handling Bootstrap form submission with JavaScript involves capturing the form's submit event, validating input, and processing data without a page refresh. Even though Bootstrap provides styling for forms, it doesn't include built-in form handling—this is where JavaScript comes in.

Prevent Default Form Submission

By default, forms reload the page when submitted. Use event.preventDefault() to stop this and handle submission via JavaScript.

 document.getElementById(&#39;myForm&#39;).addEventListener(&#39;submit&#39;, function (e) {<br> e.preventDefault(); // Prevent page reload<br> // Handle form logic here<br> });

Collect and Validate Form Data

After preventing the default action, extract values ​​from inputs and validate them before proceeding.

• Use querySelectorAll or getElementById to get input fields
• Check for required fields, email format, etc.
• Show validation feedback using Bootstrap classes like is-invalid or is-valid

 const email = document.getElementById(&#39;email&#39;).value;<br> if (!email) {<br> document.getElementById(&#39;email&#39;).classList.add(&#39;is-invalid&#39;);<br> } else {<br> document.getElementById(&#39;email&#39;).classList.remove(&#39;is-invalid&#39;);<br> }

Submit Data via JavaScript

Once validated, send the data using fetch() or another AJAX method.

• Send as JSON to an API endpoint
• Use FormData for file uploads or standard POST requests
• Handle success or error responses and update the UI accordingly

 fetch(&#39;/api/submit&#39;, {<br> method: &#39;POST&#39;,<br> body: JSON.stringify({ email: email }),<br> headers: { &#39;Content-Type&#39;: &#39;application/json&#39; }<br> })<br> .then(response => response.json())<br> .then(data => {<br> alert(&#39;Success!&#39;);<br> document.getElementById(&#39;myForm&#39;).reset();<br> })<br> .catch(error => {<br> alert(&#39;Error submitting form.&#39;);<br> });

Show User Feedback

Bootstrap includes tools like alerts and spinners. Update the UI to reflect submission status.

• Disable the submit button during processing
• Show a loading spinner using spinner-border
• Display a success or error alert after submission

Keep the user informed—don't leave them wondering if the form went through.

The above is the detailed content of How to handle Bootstrap form submission with JavaScript?. For more information, please follow other related articles on the PHP Chinese website!