I've looked at similar questions but no solutions have worked so far. I'm using a jQuery Steps form and I'm trying to disable the submit button on click and also change the appearance. I've tried using:
$('finish').attr('disabled',true);
But that hasn't worked. When I click the button, it doesn't disable the button or change the appearance. When I click twice, it sends me two emails with the test form.
EDIT: I am not trying to remove an "input," I'm trying to remove a "submit" button, which the jQuery documentation lists as "finish".
My full JS is below.
$(function(){
$("#smart-form").steps({
bodyTag: "fieldset",
headerTag: "h2",
bodyTag: "fieldset",
transitionEffect: "fade",
titleTemplate: "<span class='number'>#index#</span> #title#",
labels: {
finish: "Submit Form",
next: "Continue",
previous: "Go Back",
loading: "Loading..."
},
onStepChanging: function (event, currentIndex, newIndex){
if (currentIndex > newIndex){return true; }
var form = $(this);
if (currentIndex < newIndex){}
return form.valid();
},
onStepChanged: function (event, currentIndex, priorIndex){
},
onFinishing: function (event, currentIndex){
var form = $(this);
$('finish').attr('disabled',true);
form.validate().settings.ignore = ":disabled";
return form.valid();
},
onFinished: function (event, currentIndex){
var form = $(this);
$(form).ajaxSubmit({
target:'.result',
beforeSubmit:function(){
//$('.form-footer').addClass('progress');
},
error:function(){
//$('.form-footer').removeClass('progress');
},
success:function(){
$('.alert-success').show().delay(10000).fadeOut();
//$("#wizard").steps('done');
//$("#smart-form").steps('reset');
//setCurrentIndex();
//startIndex: 0
//reset();
/*$('.form-footer').removeClass('progress');
$('.alert-success').show().delay(10000).fadeOut();
$('.field').removeClass("state-error, state-success");
if( $('.alert-error').length == 0){
$('#smart-form').resetForm();
reloadCaptcha();
}*/
}
})
}
Try this...