-
Notifications
You must be signed in to change notification settings - Fork 0
/
ViewCreditCardTransactions.js
139 lines (112 loc) · 4.48 KB
/
ViewCreditCardTransactions.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
document.addEventListener("DOMContentLoaded", function() {
window.addEventListener("scroll", function() {
var navLinks = document.querySelectorAll(".nav-links ul li a");
for (var i = 0; i < navLinks.length; i++) {
navLinks[i].classList.toggle("scrolled", window.scrollY > 0);
}
});
window.addEventListener("scroll", function() {
var nav = document.querySelector(".nav");
nav.classList.toggle("scrolled", window.scrollY > 0);
});
var slideCount = document.querySelectorAll(".slide").length; // Total number of slides
var visibleSlides = 4; // Number of slides visible at a time
var slideWidth = document.querySelector(".slide").offsetWidth; // Width of a single slide including margin
var containerWidth = visibleSlides * slideWidth; // Total width of visible slides
var currentPosition = 0; // Current position of the slide container
document.querySelector(".slides").style.width = containerWidth + "px"; });
const OKBtns = document.querySelectorAll(".btn-next");
const progressSteps = document.querySelectorAll(".progress-step");
let formStepsNum = 0;
function checkValue() {
var fields = document.querySelectorAll(".form-step-active " +"input[required]");
for (var i = 0; i < fields.length; i++) {
var field = fields[i];
if (field.value === "") {
field.reportValidity();
console.log(field);
return false; // Stop execution if any required field is empty
}
if (!field.checkValidity()) {
console.log(field);
field.reportValidity();
return false; // Stop execution if field data is not in the correct format
}
}
return true; // All required fields are filled and in the correct format
}
OKBtns.forEach((btn) => {
btn.addEventListener("click", () => {
console.log(checkValue());
if (checkValue()) {
formStepsNum++;
updateFormSteps();
}
});
});
function updateFormSteps() {
formSteps.forEach((formStep) => {
formStep.classList.contains("form-step-active") &&
formStep.classList.remove("form-step-active");
});
formSteps[formStepsNum].classList.add("form-step-active");
}
var rangeInput = document.getElementById("income-range");
var rangeValue = document.getElementById("income-value");
rangeInput.addEventListener("input", function() {
rangeValue.textContent = "$" + this.value;
});
var canvas = document.getElementById('signatureCanvas');
var context = canvas.getContext('2d');
var isDrawing = false;
canvas.addEventListener('mousedown', startDrawing);
canvas.addEventListener('mousemove', draw);
canvas.addEventListener('mouseup', stopDrawing);
canvas.addEventListener('mouseout', stopDrawing);
document.getElementById('clearButton').addEventListener('click', clearSignature);
document.getElementById('saveButton').addEventListener('click', saveSignature);
function startDrawing(event) {
isDrawing = true;
draw(event);
}
function draw(event) {
if (!isDrawing) return;
var rect = canvas.getBoundingClientRect();
var x = event.clientX - rect.left;
var y = event.clientY - rect.top;
context.lineWidth = 2;
context.lineCap = 'round';
context.lineTo(x, y);
context.stroke();
context.beginPath();
context.moveTo(x, y);
}
function stopDrawing() {
isDrawing = false;
context.beginPath();
}
function clearSignature() {
context.clearRect(0, 0, canvas.width, canvas.height);
return false;
}
function saveSignature() {
var image = canvas.toDataURL(); // Convert canvas to base64 image
// Send the image data to the server or perform further processing
console.log(image);
// return false;
// You can also create a hidden input field and set the image data as its value
var hiddenInput = document.createElement('input');
hiddenInput.type = 'hidden';
hiddenInput.name = 'signature';
hiddenInput.value = image;
document.getElementById('signatureContainer').appendChild(hiddenInput);
}
function validateForm() {
var termsCheckbox = document.getElementById('termsCheckbox');
if (!termsCheckbox.checked) {
alert('Please agree to the Terms and Conditions');
return false; // Prevent form submission
}
// Additional form validation or submission logic...
return true; // Allow form submission
}