Example code for a donation form using Bootstrap and AJAX

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.

Leave a comment