Frontend update & cleanup

Frontend/Javascript/SetupForm.js

@@ -0,0 +1,178 @@
+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();
+});