async-form-handlers.html

<form id="my-form">
    <input
        type="text"
        name="foo"
        placeholder="Foo"
    />
    
    <input
        type="text"
        name="bar"
        placeholder="Bar"
    />

    <button type="submit">Submit</button>
</form>

<script>
	// Module A loaded with the page
	require(['jquery', 'ajax/Form'], function ($, Form) {
		var form = new Form('#my-form');

		form.onSubmit(function (resolve, reject) {
			console.log('First handler');

			resolve();
		});

		form.onSubmit(function (resolve, reject) {
			setTimeout(function () {
				console.log('Waited 1 second before resolving');
				resolve();
			}, 1000);
		});

		form.onSend(function (resolve, reject) {
			// Submit the form to the server, e.g. $.post with FormData
			setTimeout(function () {
				console.log('Waited 1 second before resolving');
				resolve('Sent to server');
			}, 1000);
		});

		form.onSend(function (resolve, reject) {
			// Send stuff to google analytics or google tag manager
			resolve('Sent to Google');
		});

		form.onSuccess(function (d1, d2) {
			console.log('Result of first send handler', d1); // Sent to server
			console.log('Reuslt of second send handler', d2); // Sent to google
		});

		form.onError(function () {
			console.log(arguments);
		});
	});

	// Some async module that is loaded later
	require(['third-party'], function (thirdParty) {
		thirdParty.init();

		require(['jquery', 'ajax/Form'], function ($, Form) {
			var form = new Form('#my-form');

			form.onSend(function (resolve, reject) {
				thirdParty().sendSomething(someFormData).then(resolve).catch(reject);
			});
		});
	});
</script>