How to trigger the form to save as the form is updated

Created by Phil Kurth, Modified on Tue, 19 Jul 2022 at 04:47 PM by Phil Kurth

filter modeIf using the AJAX option in conjunction with filter mode and post editing, you can get a form that remains in place and continues to update the same post without showing the success message.

To take this further, you may choose to hide the submit button and trigger form submissions as the form is updated using JavaScript as per the following example:

// Place this code in a <script></script> tag in your site's footer, or in a custom JS file.

jQuery(function () {

	acf.addAction('af/form/setup', function (form) {

		// Limit this to a specific form.
		if (form.key != 'form_62d646deb2888') {
			return;
		}

		// Hide the submit button.
		form.$el.find('.af-submit').hide();

		// Trigger the submit event whenever a 'change' event fires on the form.
		// For text-based fields, this only fires when the user tabs/clicks out of the field.
		form.$el.on('change', function () {
			form.$el.trigger('submit');
		});

		// If you would like to run the update as the user types, trigger the submit event
		// on keystrokes.
		// WARNING: this approach can be resource intensive on your server and it can be subject
		// to 'race conditions' which may result in the latest update being overwritten by a slower
		// previous update request. If going this route, it's recommended you look at debouncing
		// the update. See https://www.freecodecamp.org/news/javascript-debounce-example/.
		form.$el.on('keyup', function () {
			form.$el.trigger('submit');
		});

	});
});

Note that this submit is only triggered here on the 'update' event which, for text-based fields, will only happen if when the user clicks or tabs out of the field.