How to submit form in bootstrap modal?
2 answers
by
alivia.crooks ,
2 years ago
@kevon you can use listen event on-click and then submit a manually modal form in Boostrap, the code would be something like below:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 |
<!DOCTYPE html> <html lang="en"> <head> <title>How to submit form in bootstrap modal?</title> <script src="https://code.jquery.com/jquery-3.6.0.js" crossorigin="anonymous"></script> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" /> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" crossorigin="anonymous"></script> <meta charset="UTF-8"/> </head> <body> <div class="container"> <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#test"> Launch demo modal </button> <div class="modal fade" id="test" tabindex="-1"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title">How to submit form in bootstrap modal?</h5> <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> </div> <div class="modal-body"> <form id="my-example-form"> <div class="mb-3"> <label for="email" class="form-label">Email address</label> <input type="email" class="form-control" id="email"> </div> <div class="mb-3"> <label for="password" class="form-label">Password</label> <input type="password" class="form-control" id="password"> </div> </form> </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button> <button type="button" class="btn btn-primary submit-modal-form">Submit</button> </div> </div> </div> </div> </div> <script> $('#my-example-form').on('submit', (e) => { e.preventDefault() // your custom code here console.log('Modal Form is Submitted'); }) $('.submit-modal-form').on('click', () => { // Submit form $('#my-example-form').submit(); }) </script> </body> </html> |
by
kasey ,
a year ago
@kevon
To submit a form in a Bootstrap modal, you can follow these steps:
- Create a Bootstrap modal with a form inside it.
- Add a submit button to the form.
- Attach a function to the submit button using JavaScript/jQuery.
- In the function, prevent the default form submission behavior using event.preventDefault().
- Collect the form data using a form data object and serialize the data.
- Send the form data to the server using AJAX.
- Upon successful submission, close the modal.
Here is an example code snippet:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 |
<!-- Bootstrap Modal with Form -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Submit Form in Modal</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form id="myForm">
<div class="form-group">
<label for="name">Name</label>
<input type="text" class="form-control" id="name" name="name">
</div>
<div class="form-group">
<label for="email">Email address</label>
<input type="email" class="form-control" id="email" name="email">
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
</div>
</div>
</div>
</div>
<!-- JavaScript Function to Handle Form Submission -->
<script>
$(document).ready(function() {
$('#myForm').submit(function(event) {
event.preventDefault(); // Prevent default form submission behavior
var formData = new FormData(this); // Collect form data using a FormData object
var serializedData = $(this).serialize(); // Serialize the Form Data Object
$.ajax({
url: $(this).attr('action'),
type: $(this).attr('method'),
data: serializedData,
success: function(data) {
$('#exampleModal').modal('hide'); // Close the modal upon successful submission
},
error: function(data) {
console.log('Error:', data);
}
});
});
});
</script>
|
In this example, we are using jQuery to handle the form submission. We have attached a submit event handler to the form using $('#myForm').submit() function. The event handler contains the event.preventDefault() method to prevent the default form submission behavior. We have used the FormData() constructor to collect the form data and the $().serialize() method to serialize the data. Finally, we have used the $.ajax() method to send the form data to the server and upon successful submission, we have closed the modal using $('#exampleModal').modal('hide').
15