0

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

Diin
  • 565
  • 11
  • 41

0 Answers0