Hello Gurus,
I have a ajax form component with a submit button. My requirement is to
change the label of the button to "submitting.." and disable the button on
the form submit. This form component has a select input field.
<div class="col-xs-12 col-sm-4" t:type="select"
t:value="selectedTrainee"
t:model="traineeOptionSelectModel"
t:blankLabel="${message:pages.project.ProjectDetail.blankLabel}"
t:blankOption="always" t:validate="required" />
The script to disable the button.
define([ "jquery" ], function($) {
return function(clientIdOfAjaxSubmitButton, processingLabel) {
var jquerySelectorString = "#" + clientIdOfAjaxSubmitButton;
$(jquerySelectorString).on('click', function() {
var form = $(this).parents('form');
form.submit(function(event) {
$(this).val(processingLabel);
$(jquerySelectorString).attr('disabled', 'disabled');
});
});
}
});
The problem is even thought the select validation fails, the form gets
posted to the server (It feels like because) the button gets disabled. Is
there a way to access these validations from the tapestry in my jquery to
check and if there are no errors then make the submit else prevent. Or is
there any other method?
