Servage Magazine

Information about YOUR hosting company – where we give you a clear picture of what we think and do!

Use Servage mailing lists with AJAX

Friday, February 15th, 2013 by Servage

mailing_list_apiWe 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>
Use Servage mailing lists with AJAX, 3.4 out of 5 based on 5 ratings
Categories: Servage, Tips & Tricks

Keywords:

You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

No comments yet (leave a comment)

You are welcome to initiate a conversation about this blog entry.

Leave a comment

You must be logged in to post a comment.