Extending the Ajax Mailing List Sign Up System
A couple of my readers from my recent SitePoint article have asked me about how they could extend the Ajax mailing list sign up system to receive further inputs like the user’s name and phone number. It’s actually pretty simple. If you have additional fields in your form, just modify the parameters string in mailingList.js. Here’s an example:
var pars = 'address='+escape($F('address')) + '&firstName='+escape($F('firstName')) + '&lastName='+escape($F('lastName')) + '&phone='+escape($F('phone'));
You can see that you can append as many or as few inputs from your form by just extending the GET string passed to the PHP script. Notice I’ve added the “&” before the next parameter names as is required in any GET string with more than one variable included. Of course you would need to adjust your MySQL table to include these fields, and change storeAddress.php to receive the values as well.
$address = $_GET['address'];
$firstName = $_GET[’firstName’];
$lastName = $_GET[’lastName’];
$phone = $_GET[’phone’];
$addresscheck = mysql_query("SELECT * FROM mailinglist WHERE email='" . $address . "', firstName='" . $firstName . " ', lastName='" . $lastName . "', phone=' . $phone . "' ");
It’s also quite easy to modify this technique to work for things like contact forms, or user input in a CMS by simply adjusting your form, and the references to the field names. The principles are still the same.
If you are interested in other useful Ajax tools, you may want to check out Dustin Diaz’s Ajax contact form. It’s pretty clever, and packed with nice effects, but seems to struggle to work in Opera. It’s a pretty sophisticated example of a contact form.
A word of caution, it’s pretty easy to get swept up by the allure and ease of implementation of many Ajax/DOM scripting tricks. Always ask yourself how it benefits or hurts the user experience. If you find yourself adding features because they are cool, yet they negatively impact findability, accessibility, or cross-browser use then you probably should reconsider. James Edwards has written a sobering article about Ajax and screen readers (lump search engine spiders in that group too as they are equally as blind) that may bring you back down to earth about the Ajax trend. I should also mention that my article is actually backwards compatible for those without JavaScript enabled, giving us the best of both worlds. The article also uses Ajax specifically to enhance the user-experience by making the impulse action of signing up for a mailing list faster and more convenient.
The one thing i would add in your extension is to either a) Validate all of the information coming in, or b) Use prepared statements to execute the query. The script as it stands above is vulnerable to SQL injection.
I like your example for the simplicity of it (minus the prototype library). Yes, it can be extended - but it is simple at the core to get something to work - and it degrades gracefully. These are the kinds of things you need to look at when implementing AJAX (as you have warned above). Though AJAX is fun, you really need to think through its use cases.
Nice article!
November 9th, 2006 at 9:46 amYou’re right, Nate. We should add mysql_real_escape_string() when transferring the $_GET values to variables to prevent an SQL injection attack like this:
$address = mysql_real_escape_string($_GET[’address’]);
$firstName = mysql_real_escape_string($_GET[’firstName’]);
$lastName = mysql_real_escape_string($_GET[’lastName’]);
$phone = mysql_real_escape_string($_GET[’phone’]);
Validation would be another easy addition if receiving new content with simple conditionals like the one used in the storeAddress.php script that check for a missing $_GET[’address’] value and validate the email address using a regular expression.
Thanks for checking out the article and the feedback.
November 9th, 2006 at 10:54 amI REALLY like this system but I’m a complete PHP novice.
How could you set up a php page to monitor the current list of subscribers , and then export it as a csv file?
Cheers!
3stripe
November 20th, 2006 at 3:23 pm3stripe,
Building a system like that would obviously be a very involved process, but there is a good option. Rather than reinventing the wheel by building such a system, it would make more sense to tie in to an existing mailing list management system, preferably one that is part of a rich email service. The one I like best is http://mailchimp.com. They have an API (http://www.mailchimp.com/resources/guides/subscriber_api.phtml) that allows you to send sign ups directly into their managed list system. Alternatively you can copy your always just export your mailing list from your database management tool like PHPMyAdmin as a CSV file, and copy and paste the contents into Mail Chimp’s list management system. The benefit of managing the list with Mail Chimp is they look for duplicates, handle unsubscribes, and of course have a system that allow you to send rich email to people on your list, which , after all, is the point of having a mailing list. I might sound a bit like a commercial for them, but it’s because I have used them for quite some time and had great results. There are other rich email services out there that offer similar features such as Campaign Monitor. I’m not sure if they have an API, though.
Hope that helps.
November 20th, 2006 at 9:30 pmWondering if there is a way to use ajax and have it automatically get entered into your mailchimp list rather than a table on your server. Have you done this?
June 18th, 2007 at 8:17 amScott, you can learn all about the MailChimp.com API at http://www.mailchimp.com/resources/guides/subscriber_api.phtml. It’s a pretty easy system to use. They have a wonderful PDF you can download with detailed instructions.
June 18th, 2007 at 8:32 am