Servage Magazine

We have received a few requests about the mailing list API. There has especially been interest in how to integrate the mailing list to an existing website without going through any Servage subscribe/unsubscribe pages. Therefore I have created a very simple sample AJAX integration example, and thought it would be interesting for some of your as well.

You need to include the jQuery library, and please be aware that the email validation is very basic, and please also note that most browsers will not allow the API call because it goes outside the scope of your domain/URL (i.e. it tries to connect to Servage’s domain, instead of yours). In such cases you need to setup a relay-script or similar, but that is not part of this simple tutorial.

<script type="text/javascript">

$(document).ready(function() {
	$('#newsletter form').submit(function(event) {

		// Preventing the default form submit and doing our API call instead
		event.preventDefault();

		// Setting the URL for the API request
		var url = 'http://www.servage.net/apps/ml/?maillist=20262&api=true';

		// Getting the email address
		var email = $('input[name=email]', $(this)).attr('value');

		// Adding the email address to the request
		url = url + '&email=' + email;

		// Is this a "subscribe" or "unsubscribe"? (and adding to the request)
		$('input[name=option]', $(this)).each(function() {
			if ($(this).is('[type=radio]')) {
				if ($(this).is(':checked')) {
					url = url + '&' + $(this).attr('value') + '=true';
				}
			}
		});

		// Adding email to mailing list via API
		if (isValidEmail(email)) {
			$.ajax({
				type: "GET",
				url: url,
				success: function(data, textStatus) {
					// Yes, it was added
					alert('Email address added to mailing list.');
				},
				complete: function (XMLHttpRequest, textStatus) {
					// Whoops, it couldn't be added
					if (textStatus != 'success')
						alert('The email address could not be added (connection error).');
				}
			});
		}
		else
			alert('Please enter a valid email address.');
	});
});

function isValidEmail(email) {
	return (email.indexOf(".") > 2) && (email.indexOf("@") > 0);
}
</script>

<div id="newsletter">
	<form method="post" action="#">
		<label for="email">Email address:</label>
		<input type="text" name="email" />
		<label for="email">Subscribe</label>
		<input type="radio" name="option" value="subscribe" checked />
		<label for="email">Unsubscribe</label>
		<input type="radio" name="option" value="unsubscribe" />
		<input type="submit" name="submit" value="Submit" />
	</form>
</div>