Ajax email subscribe script

Here is an example of an AJAX email subscribe script in JavaScript:

// Get the email input field and submit button
var emailInput = document.getElementById('email');
var submitButton = document.getElementById('subscribe');

// Add an event listener to the submit button
submitButton.addEventListener('click', function(event) {
  // Prevent the default form submission behavior
  event.preventDefault();

  // Get the email address from the input field
  var email = emailInput.value;

  // Validate the email address
  if (!validateEmail(email)) {
    alert('Invalid email address');
    return;
  }

  // Send the email address to the server using AJAX
  var xhr = new XMLHttpRequest();
  xhr.open('POST', '/subscribe', true);
  xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
  xhr.send('email=' + email);

  // Handle the response from the server
  xhr.onload = function() {
    if (xhr.status === 200) {
      alert('Thank you for subscribing!');
      // Clear the email input field
      emailInput.value = '';
    } else {
      alert('Error subscribing: ' + xhr.responseText);
    }
  };
});

// Validate the email address
function validateEmail(email) {
  var re = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
  return re.test(email);
}

This script uses the XMLHttpRequest object to send a POST request to the server with the email address as a parameter. The server-side script (not shown here) would then validate the email address and add it to the subscription list if valid.

You'll need to replace /subscribe with the actual URL of your server-side script that handles the subscription request.

You can also use jQuery to make the AJAX request, here is an example:

// Get the email input field and submit button
var emailInput = $('#email');
var submitButton = $('#subscribe');

// Add an event listener to the submit button
submitButton.on('click', function(event) {
  // Prevent the default form submission behavior
  event.preventDefault();

  // Get the email address from the input field
  var email = emailInput.val();

  // Validate the email address
  if (!validateEmail(email)) {
    alert('Invalid email address');
    return;
  }

  // Send the email address to the server using AJAX
  $.ajax({
    type: 'POST',
    url: '/subscribe',
    data: 'email=' + email,
    success: function(data) {
      alert('Thank you for subscribing!');
      // Clear the email input field
      emailInput.val('');
    },
    error: function(xhr, status, error) {
      alert('Error subscribing: ' + xhr.responseText);
    }
  });
});

// Validate the email address
function validateEmail(email) {
  var re = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
  return re.test(email);
}

Make sure to include the jQuery library in your HTML file for this script to work.