diff --git a/assets/js/main.js b/assets/js/main.js
index fb33baa..3d1134e 100644
--- a/assets/js/main.js
+++ b/assets/js/main.js
@@ -1,13 +1,49 @@
document.addEventListener('DOMContentLoaded', function () {
- const beautifulForm = document.getElementById('beautiful-form');
- const funnyForm = document.getElementById('funny-form');
+ const beautyVotes = [];
+ const funnyVotes = [];
+
+ const beautyInput = document.getElementById('website_number_beauty');
+ const funnyInput = document.getElementById('website_number_funny');
const toastLiveExample = document.getElementById('liveToast');
const toast = new bootstrap.Toast(toastLiveExample);
+ document.querySelectorAll('.form-check-input[data-category]').forEach(checkbox => {
+ checkbox.addEventListener('change', function() {
+ const category = this.dataset.category;
+ const websiteNumber = this.dataset.websiteNumber;
+ const votes = (category === 'beauty') ? beautyVotes : funnyVotes;
+ const input = (category === 'beauty') ? beautyInput : funnyInput;
+
+ if (this.checked) {
+ if (votes.length >= 3) {
+ this.checked = false;
+ alert('You can only select up to 3 websites per category.');
+ return;
+ }
+ votes.push(websiteNumber);
+ } else {
+ const index = votes.indexOf(websiteNumber);
+ if (index > -1) {
+ votes.splice(index, 1);
+ }
+ }
+
+ votes.sort((a, b) => a - b);
+ input.value = votes.join(', ');
+ });
+ });
+
const handleFormSubmit = (form, event) => {
event.preventDefault();
const formData = new FormData(form);
const data = Object.fromEntries(formData.entries());
+ const votes = (data.category === 'beauty') ? beautyVotes : funnyVotes;
+
+ // Add the individual vote numbers to the data object for the backend
+ data.website_number_1 = votes[0] || '';
+ data.website_number_2 = votes[1] || '';
+ data.website_number_3 = votes[2] || '';
+ delete data.website_numbers; // remove the comma-separated string
fetch('submit_vote.php', {
method: 'POST',
@@ -17,12 +53,23 @@ document.addEventListener('DOMContentLoaded', function () {
body: JSON.stringify(data),
})
.then(response => response.json())
- .then(data => {
- if (data.success) {
+ .then(result => {
+ if (result.success) {
toast.show();
form.reset();
+
+ // Clear the votes and checkboxes for the submitted category
+ if (data.category === 'beauty') {
+ beautyVotes.length = 0;
+ document.querySelectorAll('input[data-category="beauty"]').forEach(cb => cb.checked = false);
+ beautyInput.value = '';
+ } else {
+ funnyVotes.length = 0;
+ document.querySelectorAll('input[data-category="funny"]').forEach(cb => cb.checked = false);
+ funnyInput.value = '';
+ }
} else {
- alert('Error: ' + data.error);
+ alert('Error: ' + result.error);
}
})
.catch((error) => {
@@ -31,6 +78,6 @@ document.addEventListener('DOMContentLoaded', function () {
});
};
- beautifulForm.addEventListener('submit', (event) => handleFormSubmit(beautifulForm, event));
- funnyForm.addEventListener('submit', (event) => handleFormSubmit(funnyForm, event));
-});
+ document.getElementById('beautiful-form').addEventListener('submit', (event) => handleFormSubmit(event.target, event));
+ document.getElementById('funny-form').addEventListener('submit', (event) => handleFormSubmit(event.target, event));
+});
\ No newline at end of file
diff --git a/index.php b/index.php
index 6bb97ab..8eab1fe 100644
--- a/index.php
+++ b/index.php
@@ -23,30 +23,174 @@
@@ -64,10 +208,8 @@
-
-
-
-
+
+
@@ -86,10 +228,8 @@
-
-
-
-
+
+
@@ -118,6 +258,6 @@
-
+