christiangenco/signup.html

## signup.html
<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script type="text/javascript" src="http://code.jquery.com/jquery-2.1.4.min.js" ></script>
    <title>AJAX Signup</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">

    <!-- Optional theme -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">
  </head>
  <body>
    <form class="form-inline" action="http://SENDY_URL/subscribe" method="POST" accept-charset="utf-8" name="emailListSignupForm" id="emailListSignupForm" data-list-id="SEYDY_DATA_LIST_ID">
      <div class="form-group">
        <label class="sr-only" for="name">Name</label>
        <input type="text" class="form-control" id="name" name="name" placeholder="Name">
      </div>
      <div class="form-group">
        <label class="sr-only" for="email">Email address</label>
        <input type="email" class="form-control" id="email" name="email" placeholder="Email Address">
      </div>
      <button type="submit" class="btn btn-default">Sign up</button>
      <p id="status" class="help-block"></p>
    </form>

    <script type="text/javascript">
      $(document).ready(function() {
        $("#emailListSignupForm").submit(function(e) {
        	console.log('submitting');
          e.preventDefault();

          var $form = $(this),
            url = $form.attr('action');
          params = {
            name: $form.find('input[name="name"]').val(),
            email: $form.find('input[name="email"]').val(),
            list: $form.data().listId,
            boolean: true
          }

          window.message = function(text, color){
          	$("#status").css("color", color).text(text);
          }

          $form.find('input').attr("disabled", "disabled");
          message('signing up...', 'blue');

          $.post(url, params,
            function(data) {
              console.dir(data);
              if (data) {
              	$form.find('input').removeAttr("disabled");

                if (data == "Some fields are missing.") {
                  message("Please fill in your name and email.", "red");
                } else if (data == "Invalid email address.") {
                  message("Uhoh - that doesn't look like an email address. Could you please enter your email again?", "red");
                } else if (data == "Invalid list ID.") {
                  message("Oops - something went wrong (I tried to sign you up for an email list that doesn't exist). To get added, send me an email at christian@gen.co instead!", "red");
                } else if (data == "Already subscribed.") {
                	message("You're already subscribed!", "green");
                } else {
                  $("#status").text("You're subscribed!");
                  $("#status").css("color", "green");
                  $form.find('input, button').hide();
                }
              } else {
                alert("Sorry, unable to subscribe. Please try again later!");
                message("Oops - something went wrong (my email list server just had an error). To get added, send me an email at christian@gen.co instead!", "red");
              }
            }
          );
        });
      });
    </script>
  </body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<script type="text/javascript" src="http://code.jquery.com/jquery-2.1.4.min.js" ></script>
	<title>AJAX Signup</title>
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">

	<!-- Optional theme -->
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">
	</head>
	<body>
	<form class="form-inline" action="http://SENDY_URL/subscribe" method="POST" accept-charset="utf-8" name="emailListSignupForm" id="emailListSignupForm" data-list-id="SEYDY_DATA_LIST_ID">
	<div class="form-group">
	<label class="sr-only" for="name">Name</label>
	<input type="text" class="form-control" id="name" name="name" placeholder="Name">
	</div>
	<div class="form-group">
	<label class="sr-only" for="email">Email address</label>
	<input type="email" class="form-control" id="email" name="email" placeholder="Email Address">
	</div>
	<button type="submit" class="btn btn-default">Sign up</button>
	<p id="status" class="help-block"></p>
	</form>

	<script type="text/javascript">
	$(document).ready(function() {
	$("#emailListSignupForm").submit(function(e) {
	console.log('submitting');
	e.preventDefault();

	var $form = $(this),
	url = $form.attr('action');
	params = {
	name: $form.find('input[name="name"]').val(),
	email: $form.find('input[name="email"]').val(),
	list: $form.data().listId,
	boolean: true
	}

	window.message = function(text, color){
	$("#status").css("color", color).text(text);
	}

	$form.find('input').attr("disabled", "disabled");
	message('signing up...', 'blue');

	$.post(url, params,
	function(data) {
	console.dir(data);
	if (data) {
	$form.find('input').removeAttr("disabled");

	if (data == "Some fields are missing.") {
	message("Please fill in your name and email.", "red");
	} else if (data == "Invalid email address.") {
	message("Uhoh - that doesn't look like an email address. Could you please enter your email again?", "red");
	} else if (data == "Invalid list ID.") {
	message("Oops - something went wrong (I tried to sign you up for an email list that doesn't exist). To get added, send me an email at christian@gen.co instead!", "red");
	} else if (data == "Already subscribed.") {
	message("You're already subscribed!", "green");
	} else {
	$("#status").text("You're subscribed!");
	$("#status").css("color", "green");
	$form.find('input, button').hide();
	}
	} else {
	alert("Sorry, unable to subscribe. Please try again later!");
	message("Oops - something went wrong (my email list server just had an error). To get added, send me an email at christian@gen.co instead!", "red");
	}
	}
	);
	});
	});
	</script>
	</body>
	</html>