I want to disable the Finish button in a jQuery-steps form once it has been clicked. Currently, users are able to repeatedly submit the form by clicking the Finish button multiple times.
There are a couple suggestions on how to approach this that did not solve the problem for me. I could see the first one in action - the color of the button changed as per the code - but it didn't stop me from being able to repeatedly submit my form.
My JavaScript is below (I'm not sure HTML would be informative here but could include it as well); does anyone have suggestions for how to approach this? Is onFinishing not the appropriate place to be disabling the button?
$("#form").steps({
stepsOrientation: "vertical",
bodyTag: "fieldset",
onStepChanging: function (event, currentIndex, newIndex) {
omitted for brevity
},
onStepChanged: function (event, currentIndex, priorIndex) {
omitted for brevity}
},
onFinishing: function (event, currentIndex) {
var form = $(this);
//Applying colour for finish button
var result = $('ul[aria-label=Pagination]').children().find('a');
$(result).each(function () {
if ($(this).text() == 'Finish') {
$(this).attr('disabled', true);
$(this).css('background', 'green');
}
});
form.validate().settings.ignore = ":disabled, :hidden";
// Start validation; Prevent form submission if false
return form.valid();
},
onFinished: function (event, currentIndex) {
var form = $(this);
event.preventDefault();
getResult();
enableFinishButton: false;
// Submit form input
//form.submit();
}
}).validate({
errorPlacement: function (error, element) {
$('#step1Errors').append(error);
},
rules: {omitted for brevity},
messages: {omitted for brevity}
});
You can always use submit handler to disable the button click and then the success function to enable it again after the form has been submitted/passed validation.
submitHandler: function() {
$(".yourButton").prop('disabled', true);
},
success: function(response){
//success process here
$(".yourButton").prop('disabled', false);
}
Update
Based on your fiddle, you can alternately hide the button when the user makes it to the final button and clicks it, then when the current index is not 7, simply show everything again.
In the fiddle you provided change your JS code to this and you will see what I am talking about.
$("#example-vertical").steps({
headerTag: "h3",
bodyTag: "section",
transitionEffect: "slideLeft",
onStepChanged: function (event, currentIndex, priorIndex) {
if(currentIndex != 7){
var result = $('ul[aria-label=Pagination]').children().find('a');
$(result).each(function () {
$(this).css('display', 'block'); //turn everything visible again
});
}
if (currentIndex === 1 && priorIndex === 0) {
}
},
onFinishing: function (event, currentIndex) {
var form = $(this);
var result = $('ul[aria-label=Pagination]').children().find('a');
$(result).each(function () {
if ($(this).text() == 'Finish') {
//$(this).attr('disabled', 'disabled');
//$(this).css('background', 'green');
$(this).css('display', 'none');
alert("Now you cannot click the #finish button twice,"+
"press Previous and it will reappear");
}
});
form.validate().settings.ignore = ":disabled, :hidden";
return form.valid();
},
onFinished: function (event, currentIndex) {
alert(event+":"+currentIndex);
var form = $(this);
event.preventDefault();
getResult();
// enableFinishButton: false;
// Submit form input
//form.submit();
},
stepsOrientation: "vertical",
}).validate({
/*
submitHandler: function() {
alert("submit handler function not being called, validate not working");
$("#finish").prop('disabled', true);
},
success: function(response){
alert("success function not being called, validate not working");
$("#finish").prop('disabled', false);
},
*/
errorPlacement: function (error, element) {
$('#step1Errors').append(error);
},
rules: {
},
messages: {
}
});
But here is an update to your fiddle, I'm not sure how long this link will be live though: