holtkamp/submit-form-to-iron-mq.html

## submit-form-to-iron-mq.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Scalable form processing with scalable message queues</title>
    <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/jquery.js"></script>
</head>
<body>

<h1>Scalable form processing with scalable message queues</h1>
<p>The idea is to submit simple HTML forms directly to a message queue, that is designed to scale dynamically.</p>
<p><a target="_blank" href="https://www.iron.io/platform/ironmq/">IronMQ</a> offers such a messages queue and has <a target="_blank" href="https://www.iron.io/ironmq-v3-is-10x-faster-than-rabbitmq/">quite impressive performance rate of being able to process up to 18.000 messages per second.</a></p>
<p>Since the HTML form is static, one can <a target="_blank" href="http://docs.aws.amazon.com/AmazonS3/latest/dev/website-hosting-custom-domain-walkthrough.html">host it easily on an Amazon S3 account</a>, or have a <a target="_blank" href="https://www.cloudflare.com">CDN like CloudFlare ensure it is served properly.</a></p>
<p>Also see <a target="_blank" href="https://www.iron.io/queue-webhook-events-with-ironmq/">Iron MQ WebHook documentation</a></p>

<h2>Example contact form (check the console for debugging)</h2>
<form id="contactForm" method="post">
    <input type="text" name="firstname" value="Test Firstname"/>
    <input type="text" name="familyname" value="Test Familyname"/>
    <input type="submit" />
</form>

<script>
    /**
     * We want to post the form data as (serialized) object
     *
     * @link http://stackoverflow.com/questions/1184624/convert-form-data-to-javascript-object-with-jquery
     * @returns object
     */
    $.fn.serializeObject = function () {
        var o = {};
        var a = this.serializeArray();
        $.each(a, function () {
            if (o[this.name] !== undefined) {
                if (!o[this.name].push) {
                    o[this.name] = [o[this.name]];
                }
                o[this.name].push(this.value || '');
            } else {
                o[this.name] = this.value || '';
            }
        });
        return o;
    };

    $("#contactForm").submit(function (event) {

        event.preventDefault();

        var ironMqBaseUrl = "https://mq-aws-us-east-1.iron.io/1/projects/";
        var ironMqProjectId = "PROJECT_ID";
        var ironMqOAuth = "OAUTH_KEY";
        var ironMqQueueName = "submittedForms_" + $(this).attr("id");
        var url = ironMqBaseUrl + ironMqProjectId + "/queues/" + ironMqQueueName + "/messages/webhook?oauth="+ ironMqOAuth;

        console.log("POST form data to ", url);
        var data = JSON.stringify($(this).serializeObject());

        $.ajax({
            url: url,
            type: "POST",
            data: data,
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function (data) {
                console.log('successfully POSTed form data to queue webhook', data);
            }
        });
    });
</script>
</body>

</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>Scalable form processing with scalable message queues</title>
	<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/jquery.js"></script>
	</head>
	<body>

	<h1>Scalable form processing with scalable message queues</h1>
	<p>The idea is to submit simple HTML forms directly to a message queue, that is designed to scale dynamically.</p>
	<p><a target="_blank" href="https://www.iron.io/platform/ironmq/">IronMQ</a> offers such a messages queue and has <a target="_blank" href="https://www.iron.io/ironmq-v3-is-10x-faster-than-rabbitmq/">quite impressive performance rate of being able to process up to 18.000 messages per second.</a></p>
	<p>Since the HTML form is static, one can <a target="_blank" href="http://docs.aws.amazon.com/AmazonS3/latest/dev/website-hosting-custom-domain-walkthrough.html">host it easily on an Amazon S3 account</a>, or have a <a target="_blank" href="https://www.cloudflare.com">CDN like CloudFlare ensure it is served properly.</a></p>
	<p>Also see <a target="_blank" href="https://www.iron.io/queue-webhook-events-with-ironmq/">Iron MQ WebHook documentation</a></p>

	<h2>Example contact form (check the console for debugging)</h2>
	<form id="contactForm" method="post">
	<input type="text" name="firstname" value="Test Firstname"/>
	<input type="text" name="familyname" value="Test Familyname"/>
	<input type="submit" />
	</form>

	<script>
	/**
	* We want to post the form data as (serialized) object
	*
	* @link http://stackoverflow.com/questions/1184624/convert-form-data-to-javascript-object-with-jquery
	* @returns object
	*/
	$.fn.serializeObject = function () {
	var o = {};
	var a = this.serializeArray();
	$.each(a, function () {
	if (o[this.name] !== undefined) {
	if (!o[this.name].push) {
	o[this.name] = [o[this.name]];
	}
	o[this.name].push(this.value \|\| '');
	} else {
	o[this.name] = this.value \|\| '';
	}
	});
	return o;
	};

	$("#contactForm").submit(function (event) {

	event.preventDefault();

	var ironMqBaseUrl = "https://mq-aws-us-east-1.iron.io/1/projects/";
	var ironMqProjectId = "PROJECT_ID";
	var ironMqOAuth = "OAUTH_KEY";
	var ironMqQueueName = "submittedForms_" + $(this).attr("id");
	var url = ironMqBaseUrl + ironMqProjectId + "/queues/" + ironMqQueueName + "/messages/webhook?oauth="+ ironMqOAuth;

	console.log("POST form data to ", url);
	var data = JSON.stringify($(this).serializeObject());

	$.ajax({
	url: url,
	type: "POST",
	data: data,
	contentType: "application/json; charset=utf-8",
	dataType: "json",
	success: function (data) {
	console.log('successfully POSTed form data to queue webhook', data);
	}
	});
	});
	</script>
	</body>

	</html>