From d504440371344413aa931ccd83a9ea40af288208 Mon Sep 17 00:00:00 2001
From: Marc <c.marcandre@gmail.com>
Date: Thu, 24 Dec 2015 20:10:57 -0500
Subject: [PATCH] Ajaxing the form.

---
 index.html          |  9 ++++-----
 js/form-handling.js | 22 ++++++++++++++++++++++
 2 files changed, 26 insertions(+), 5 deletions(-)
 create mode 100644 js/form-handling.js

diff --git a/index.html b/index.html
index afaf54c..289d564 100644
--- a/index.html
+++ b/index.html
@@ -86,18 +86,17 @@
 
 					<p class="primarytext basesize">You can also send me an <span class="accent accentsize oswald">email</span> at <a href="mailto:c.marcandre@gmail.com">c.marcandre[at]gmail.com</a>, or fill the form below!</p> 
 
-					<form id="contactme" action="http://formspree.io/c.marcandre@gmail.com" method="POST">
+					<form id="contactme">
 						<p class="accentsize accent oswald">About you:</p>
-						<p class="basesize">My name is <input name="name" type="text" class="accent" placeholder="Johnny Appleseed"required>, I'm a <input nform="contactme" name="function" type="text" class="accent" placeholder="fellow tinkerer">. You can contact me at <input form="contactme" name="_replyto" type="text" class="accent" placeholder="foo@bar.baz" required>.</p>
+						<p class="basesize">My name is <input id="sender" type="text" class="accent" placeholder="Johnny Appleseed"required>, I'm a <input id="function" type="text" class="accent" placeholder="fellow tinkerer">. You can contact me at <input id="replyto" type="email" class="accent" placeholder="foo@bar.baz" required>.</p>
 						<p class="basesize">I'd like to tell you about ...</p>
-						<p class="basesize"><textarea form="contactme" name="details" class="accent" placeholder="... this new cool thing I'm working on." required></textarea></p>
+						<p class="basesize"><textarea id="details" class="accent" placeholder="... this new cool thing I'm working on." required></textarea></p>
 						<div class="ta-center">
-							<input type="submit" name="sbt" value="Send message">
+							<input type="submit" value="Send message">
 						</div>
 
 						<input form="contactme" type="hidden" name="_subject" value="Contact form submission" />
 						<input form="contactme" type="text" name="_gotcha" style="display:none" />
-						<input form="contactme" type="hidden" name="_next" value="#panel-intouch" />
 
 					</form>
 
diff --git a/js/form-handling.js b/js/form-handling.js
new file mode 100644
index 0000000..8a8bb11
--- /dev/null
+++ b/js/form-handling.js
@@ -0,0 +1,22 @@
+var $contactForm = $('#contactme');
+
+$contactForm.submit(function(e) {
+	e.preventDefault();
+	$.ajax({
+		url: '//formspree.io/c.marcandre@gmail.com',
+		method: 'POST',
+		data: $(this).serialize(),
+		dataType: 'json',
+		beforeSend: function() {
+			$contactForm.append('<div class="alert alert--loading">Sending message…</div>');
+		},
+		success: function(data) {
+			$contactForm.find('.alert--loading').hide();
+			$contactForm.append('<div class="alert alert--success">Message sent!</div>');
+		},
+		error: function(err) {
+			$contactForm.find('.alert--loading').hide();
+			$contactForm.append('<div class="alert alert--error">Ops, there was an error.</div>');
+		}
+	});
+});
\ No newline at end of file