I am porting my form into using the JQuery steps form wizard. My form has a form field cloning function (Tristan Denyer's clone-form-td) which is triggered by a button. But the wizard disables my cloning button and hence prevents the cloning function to be triggered.
$(function () {
$('#btnAdd').click(function () {
var num = $('.clonedInput').length,
newNum = new Number(num + 1),
newElem = $('#entry' + num).clone().attr('id', 'entry' + newNum).fadeIn('slow');
});
$('#btnDel').click(function () {
if (confirm("Are you sure you wish to remove this section? This cannot be undone."))
{
var num = $('.clonedInput').length;
$('#entry' + num).slideUp('slow', function () {$(this).remove();
if (num -1 === 1)
$('#btnDel').attr('disabled', true);
$('#btnAdd').attr('disabled', false).prop('value', "add section");});
}
return false;
});
This is the steps code
//Advanced form with validation
var form = $('#wizard_with_validation').show();
form.steps({
headerTag: 'h3',
bodyTag: 'fieldset',
transitionEffect: 'slideLeft',
onInit: function (event, currentIndex) {
//Set tab width
var $tab = $(event.currentTarget).find('ul[role="tablist"] li');
var tabCount = $tab.length;
$tab.css('width', (100 / tabCount) + '%');
//set button waves effect
setButtonWavesEffect(event);
},
onStepChanging: function (event, currentIndex, newIndex) {
if (currentIndex > newIndex) { return true; }
if (currentIndex < newIndex) {
form.find('.body:eq(' + newIndex + ') label.error').remove();
form.find('.body:eq(' + newIndex + ') .error').removeClass('error');
}
form.validate().settings.ignore = ':disabled,:hidden';
return form.valid();
},
onStepChanged: function (event, currentIndex, priorIndex) {
setButtonWavesEffect(event);
},
onFinishing: function (event, currentIndex) {
form.validate().settings.ignore = ':disabled';
return form.valid();
},
onFinished: function (event, currentIndex) {
form.submit();
}
});
If you can help guide me make this work I will be very grateful