Here is an example code for a donation form using Bootstrap and AJAX:
<!-- HTML for the donation form -->
<form id="donation-form">
<div class="form-group">
<label for="donor-name">Name</label>
<input type="text" class="form-control" id="donor-name" placeholder="Enter your name">
</div>
<div class="form-group">
<label for="donor-email">Email address</label>
<input type="email" class="form-control" id="donor-email" placeholder="Enter your email">
</div>
<div class="form-group">
<label for="donation-amount">Donation Amount</label>
<input type="number" class="form-control" id="donation-amount" placeholder="Enter the donation amount">
</div>
<button type="submit" class="btn btn-primary">Donate</button>
</form>
<!-- JavaScript to handle the form submission using AJAX -->
<script>
$(document).ready(function() {
// Handle the form submission
$('#donation-form').submit(function(e) {
e.preventDefault(); // Prevent the default form submission
// Get the form data
var donorName = $('#donor-name').val();
var donorEmail = $('#donor-email').val();
var donationAmount = $('#donation-amount').val();
// Make an AJAX request to the server to process the donation
$.ajax({
url: '/process-donation',
type: 'POST',
data: {
donorName: donorName,
donorEmail: donorEmail,
donationAmount: donationAmount
},
success: function(response) {
// Handle the successful response from the server
alert('Thank you for your donation!');
},
error: function(error) {
// Handle any errors
console.log(error);
alert('An error occurred. Please try again.');
}
});
});
});
</script>
Note: This is just an example to demonstrate the general approach to creating a donation form using Bootstrap and AJAX. You will need to modify the code to fit your specific requirements and ensure that it follows best practices for security and error handling.