Fix multiple submit buttons being used

This commit is contained in:
David Craig 2015-08-21 11:41:42 +12:00
parent a250fa3171
commit da400e8306
4 changed files with 27 additions and 34 deletions

View File

@ -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"
);

View File

@ -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);

View File

@ -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>

View File

@ -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>