Merge pull request #308 from flashbackzoo/pull/fix-duplicate-id

Fix multiple submit buttons being used

code/model/UserDefinedForm.php

@@ -321,6 +321,7 @@ class UserDefinedForm_Controller extends Page_Controller {
 		Requirements::javascript(USERFORMS_DIR . '/thirdparty/jquery-validate/jquery.validate.min.js');
 		Requirements::add_i18n_javascript(USERFORMS_DIR . '/javascript/lang');
 		Requirements::javascript(USERFORMS_DIR . '/javascript/UserForm.js');
+
 		Requirements::javascript(
 			USERFORMS_DIR . "/thirdparty/jquery-validate/localization/messages_{$lang}.min.js"
 		);

javascript/UserForm.js

@@ -557,12 +557,19 @@ jQuery(function ($) {
 
 		this.$el = element instanceof jQuery ? element : $(element);
 
+		this.$prevButton = this.$el.find('.step-button-prev');
+		this.$nextButton = this.$el.find('.step-button-next');
+
+		// Show the buttons.
+		this.$prevButton.parent().attr('aria-hidden', false).show();
+		this.$nextButton.parent().attr('aria-hidden', false).show();
+
 		// Bind the step navigation event listeners.
-		this.$el.find('.step-button-prev').on('click', function (e) {
+		this.$prevButton.on('click', function (e) {
 			e.preventDefault();
 			self.$el.trigger('userform.action.prev');
 		});
-		this.$el.find('.step-button-next').on('click', function (e) {
+		this.$nextButton.on('click', function (e) {
 			e.preventDefault();
 			self.$el.trigger('userform.action.next');
 		});
@@ -620,6 +627,11 @@ jQuery(function ($) {
 			formActions = null,
 			$userform = $('.userform');
 
+		// If there's no userform, do nothing.
+		if ($userform.length === 0) {
+			return;
+		}
+
 		CONSTANTS.ENABLE_LIVE_VALIDATION = $userform.data('livevalidation') !== void 0;
 		CONSTANTS.DISPLAY_ERROR_MESSAGES_AT_TOP = $userform.data('toperrors') !== void 0;
 		CONSTANTS.HIDE_FIELD_LABELS = $userform.data('hidefieldlabels') !== void 0;
@@ -674,13 +686,6 @@ jQuery(function ($) {
 		progressBar = new ProgressBar($('#userform-progress'));
 		formActions = new FormActions($('#step-navigation'));
 
-		// Hide the form-wide actions on multi-step forms.
-		// Because JavaScript is enabled we'll use the actions contained
-		// in the final step's navigation.
-		if (userform.steps.length > 1) {
-			userform.$el.children('.Actions').attr('aria-hidden', true).hide();
-		}
-
 		// Enable jQuery UI datepickers
 		$(document).on('click', 'input.text[data-showcalendar]', function() {
 			var $element = $(this);

templates/Includes/UserFormStepNav.ss

@@ -1,11 +1,19 @@
-<nav id="step-navigation" class="step-navigation" aria-hidden="true" style="display:none;">
+<nav id="step-navigation" class="step-navigation">
 	<ul class="step-buttons">
-		<li class="step-button-wrapper">
+
+		<% if $Steps.Count > 1 %>
+		<%--
+			If JavaScript is disabled multi-step forms are displayed as a single page
+			so the 'prev' and 'next' button are not used. These buttons are made visible via JavaScript.
+		--%>
+		<li class="step-button-wrapper" aria-hidden="true" style="display:none;">
 			<button class="step-button-prev">Prev</button>
 		</li>
-		<li class="step-button-wrapper">
+		<li class="step-button-wrapper" aria-hidden="true" style="display:none;">
 			<button class="step-button-next">Next</button>
 		</li>
+		<% end_if %>
+
 		<% if $Actions %>
 		<li class="step-button-wrapper Actions">
 		<% loop $Actions %>
@@ -13,5 +21,6 @@
 		<% end_loop %>
 		</li>
 		<% end_if %>
+
 	</ul>
 </nav>

templates/UserForm.ss

@@ -17,28 +17,6 @@
 	<div class="clear"><!-- --></div>
 </fieldset>
 
-<%--
-	Include step navigation if it's a multi-page form.
-	The markup inside this include is hidden by default and displayed if JavaScript is enabled.
---%>
-
-<% if $Steps.Count > 1 %>
 <% include UserFormStepNav %>
-<% end_if %>
-
-<%--
-	When JavaScript is disabled, multi-page forms are diaplayed as a single page form,
-	and these actions are used instead of the step navigation include.
-
-	These actions are hidden by JavaScript on multi-page forms.
---%>
-
-<% if $Actions %>
-<div class="Actions">
-	<% loop $Actions %>
-	$Field
-	<% end_loop %>
-</div>
-<% end_if %>
 
 </form>