Game-Jaming/Frontend/Javascript/SetupForm.js

let currentTab = 0; // Current tab is set to be the first tab (0)
let passNotMatch = false;   // Keep track of passwords
showTab(currentTab); // Display the current tab

let selectedDBType;

function showTab(n) {
    let x = document.getElementsByClassName("tab");
    x[n].style.display = "block";

    if (n == 0) 
    {
        document.getElementById("prevBtn").style.display = "none";
    } 
    else 
    {
        document.getElementById("prevBtn").style.display = "inline";
    }

    if (n == (x.length - 1)) 
    {
        
        document.getElementById("nextBtn").style.display = "none";
        document.getElementById("submitBtn").style.display = "inline-block";
    } 
    else 
    {
        document.getElementById("nextBtn").style.display = "inline-block";
        document.getElementById("submitBtn").style.display = "none";
    }

    FixIndicators(n)
}

function nextPrev(n) {
    let x = document.getElementsByClassName("tab");

    // Exit the function if any field in the current tab is invalid
    if (n == 1 && !Validation()) return false;

    if(passNotMatch) return false;

    // Hide the current tab
    x[currentTab].style.display = "none";

    // Increase or decrease the current tab by 1
    currentTab = currentTab + n;

    if (currentTab >= x.length) 
    {
        document.getElementById("regForm").submit();
        return false;
    }

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

function Validation() {
    let x, y, i, valid = true;
    x = document.getElementsByClassName("tab");
    y = x[currentTab].getElementsByTagName("input");

    // Check every input field in the current tab
    for (i = 0; i < y.length; i++) 
    {
        if (y[i].value == "") 
        {
            y[i].className += " invalid";

            valid = false;
        }
    }

    // If valid is true, mark the step as finished, and valid.
    if (valid) 
    {
        document.getElementsByClassName("step")[currentTab].className += " finish";
    }

    return valid;
}

function FixIndicators(n) {
    // Remove the active class from all steps
    let i, x = document.getElementsByClassName("step");

    for (i = 0; i < x.length; i++) 
    {
        x[i].className = x[i].className.replace(" active", "");
    }

    // Add the active class to the current step
    x[n].className += " active";
}

$('#dbSelect').change(function() {
    selectedDBType = $('#dbSelect').children("option:selected").val();
});

$('#ConfirmPassword').on('change keyup paste', function() {
    if ($(this).val() != $('#Password').val())
    {
        passNotMatch = true;       
        $(this).addClass('invalid');
    }
    else
    {
        passNotMatch = false
        $('#nextBtn').prop('disabled', false);
        if($(this).hasClass('invalid'))
        {
            $(this).removeClass('invalid');
        }
    }
});

$('#adminConfirmPassword').on('change keyup paste', function() {

    if ($(this).val() != $('#adminPassword').val())
    {
        passNotMatch = true;       
        $(this).addClass('invalid');
    }
    else
    {
        passNotMatch = false
        $('#nextBtn').prop('disabled', false);
        if($(this).hasClass('invalid'))
        {
            $(this).removeClass('invalid');
        }
    }
});

$('#regForm').submit(function(e) {
    e.preventDefault();
    $('#DBType').val($('#dbSelect option:selected').val());
    

    let form = $('#regForm')[0];
    let formData = new FormData(form);

    let id = $('#submitBtn').attr('name');
    let value = $('#submitBtn').val();

    formData.append(id, value);

    console.log(form);
    console.log(formData);


    $.ajax({
        url : 'https://ptsv2.com/t/tzztn-1616799712/post',
        type: 'POST',
        data : formData,
        processData: false,
        contentType: false,
        crossDomain: true,
        success:function(data, textStatus, jqXHR) {
            console.log(textStatus);
            console.log(data)
        },
        error: function(jqXHR, textStatus, errorThrown) {
            console.log(textStatus);
            console.log(jqXHR);
            console.log(errorThrown);     
        }
    });
    // axios.post(', formData, {
    //     header: 'multipart/form-data'
    // }).then(res => {
    //     console.log(`data: ${res}`)
    // }).catch(error => {
    //     console.log(error);
    // });
    e.preventDefault();
});