reactcrm/public_html/js/org-form.js

(function ($){

    let orgForm = $('#org-form');
    let curStep = 0;
    let tabCount = document.getElementsByClassName("tab").length;

    $('#organizations-short_name').focus();


    $('#orgFormContainer .tab').each(function (index){
        curStep = $(this).is('.d-block') ? index : 0;
    });

    $('#prevBtn').click(function (){
        $(".tab:eq("+curStep+")").hide().prev().show();
        curStep -= 1;
        if(curStep === 0){
            $(this).addClass('d-none');
            $('#nextBtn').removeClass('d-none');
        }
        console.log(curStep);
    });

    $('#nextBtn').click(function (){
        console.log(curStep);

        if(curStep === 0) {
            let valid;
            orgForm.yiiActiveForm('validate', true);

            orgForm.on('afterValidate', function (event, attribute, messages) {
                console.log(messages);
                if(messages.length > 0) {
                    valid = false;
                }
                if(!valid) return false;
            });
            if(!valid) return false;
        }
        $(".tab:eq("+curStep+")").hide().next().show();
        curStep += 1;
        if(curStep >= (tabCount-1)) {
            $(this).addClass('d-none');
        }
        $('#prevBtn').removeClass('d-none');

    });

    orgForm.on('beforeSubmit', function () {
        var $yiiform = $(this);
        $.ajax({
                type: $yiiform.attr('method'),
                url: $yiiform.attr('action'),
                data: $yiiform.serializeArray(),
            }
        )
        .done(function(data) {
            if(data.success) {
                // data is saved
                $yiiform.find('input[name=id]').val(data.id)
                $yiiform.attr('action', '/organizations/update?id='+data.id)
                //goNext();
            } else if (data.validation) {
                // server validation failed
                console.log('server validation failed ', data.validation);
                //$yiiform.yiiActiveForm('updateMessages', data.validation, true); // renders validation messages at appropriate places
            } else {
                // incorrect server response
            }
        })
        .fail(function () {
            //alert('Fail message here');
        });

        function goNext(){
            $(".step:eq("+curStep+")").removeClass('active').next().addClass('active');
        }
        function goNPrev(){
            $(".step:eq("+curStep+")").removeClass('active').prev().addClass('active');
        }

        function validate(){

        }

        return false; // prevent default form submission
    });

    //showStep(currentTab);

})(jQuery);





/*

var currentTab = 0; // Current tab is set to be the first tab (0)
showTab(currentTab); // Display the current tab
var orgForm = jQuery('#org-form');

orgForm.on('beforeSubmit', function () {
    var $yiiform = $(this);
    console.log($(this));
    $.ajax({
            type: $yiiform.attr('method'),
            url: $yiiform.attr('action'),
            data: $yiiform.serializeArray(),
        }
    )
        .done(function(data) {
            if(data.success) {
                // data is saved
                $yiiform.find('input[name=id]').val(data.id)
                $yiiform.attr('action', '/organizations/update?id='+data.id)
            } else if (data.validation) {
                // server validation failed
                console.log('server validation failed ', data.validation);
                //$yiiform.yiiActiveForm('updateMessages', data.validation, true); // renders validation messages at appropriate places
            } else {
                // incorrect server response
            }
        })
        .fail(function () {
            //alert('Fail message here');
        })

    return false; // prevent default form submission
})

function showTab(n) {
    // This function will display the specified tab of the form ...
    var x = document.getElementsByClassName("tab");
    x[n].style.display = "block";
    // ... and fix the Previous/Next buttons:
    if (n == 0) {
        document.getElementById("prevBtn").style.display = "none";
    } else {
        document.getElementById("prevBtn").style.display = "inline";
    }
    if (n == (x.length - 1)) {
        document.getElementById("nextBtn").innerHTML = "Submit";
    } else {
        document.getElementById("nextBtn").innerHTML = "Next";
    }
    // ... and run a function that displays the correct step indicator:
    fixStepIndicator(n);

}

function nextPrev(n) {
    // This function will figure out which tab to display
    var x = document.getElementsByClassName("tab");
    var currentForm = x[currentTab].find('form');

    console.log(currentForm);

    orgForm.yiiActiveForm('validate', true);
    console.log(x[currentTab].getElementsByTagName('form')[0].getAttribute('id'))


    // Exit the function if any field in the current tab is invalid:


    if (n === 1 && !validateForm()) return false;
    //if (!valid) return false;
    // Hide the current tab:
    x[currentTab].style.display = "none";
    // Increase or decrease the current tab by 1:
    currentTab = currentTab + n;
    // if you have reached the end of the form... :
    if (currentTab >= x.length) {
        //...the form gets submitted:
        //document.getElementById("orgFormContainer").submit();
        return false;
    }

    // Otherwise, display the correct tab:
    showTab(currentTab);
}

function validateForm() {
    var x, y, i, valid = false;

    orgForm.on('afterValidate', function (event, attribute, messages, deferreds) {
        if(messages.length>0) valid = false;
    });

    //valid = document.querySelectorAll('#orgFormContainer input.is-invalid').length <= 0;

    console.log(valid);

    // This function deals with validation of the form fields
    /!*var x, y, i, valid = true;
    x = document.getElementsByClassName("tab");
    y = x[currentTab].getElementsByTagName("input");
    // A loop that checks every input field in the current tab:
    for (i = 0; i < y.length; i++) {
        // If a field is empty...
        if (y[i].value == "") {
            // add an "invalid" class to the field:
            y[i].className += " invalid";
            // and set the current valid status to false:
            valid = false;
        }
    }
    // If the valid status is true, mark the step as finished and valid:
    if (valid) {
        document.getElementsByClassName("step")[currentTab].className += " finish";
    }*!/
    /!*var valid = false;
    valid = document.querySelectorAll('#orgFormContainer input.is-invalid').length > 0 ? false : true;*!/
    return valid; // return the valid status
}

function fixStepIndicator(n) {
    // This function removes the "active" class of all steps...
    var i, x = document.getElementsByClassName("step");
    for (i = 0; i < x.length; i++) {
        x[i].className = x[i].className.replace(" active", "");
    }
    //... and adds the "active" class to the current step:
    x[n].className += " active";
}*/