checkboxes
This commit is contained in:
parent
38881c7a8f
commit
416c5781de
@ -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));
|
||||
});
|
||||
206
index.php
206
index.php
@ -23,30 +23,174 @@
|
||||
<div class="card-body">
|
||||
<h2 class="card-title text-center">Websites for Voting</h2>
|
||||
<ol class="list-group list-group-numbered">
|
||||
<li class="list-group-item"><a href="https://counterwars.dev.flatlogic.app" target="_blank">https://counterwars.dev.flatlogic.app</a></li>
|
||||
<li class="list-group-item"><a href="https://justvibing.dev.flatlogic.app" target="_blank">https://justvibing.dev.flatlogic.app</a></li>
|
||||
<li class="list-group-item"><a href="https://flower-shop.dev.flatlogic.app" target="_blank">https://flower-shop.dev.flatlogic.app</a></li>
|
||||
<li class="list-group-item"><a href="https://pizzaslicer.dev.flatlogic.app" target="_blank">https://pizzaslicer.dev.flatlogic.app</a></li>
|
||||
<li class="list-group-item"><a href="https://vm-34156.dev.flatlogic.app" target="_blank">https://vm-34156.dev.flatlogic.app</a></li>
|
||||
<li class="list-group-item"><a href="https://digital-museum.dev.flatlogic.app" target="_blank">https://digital-museum.dev.flatlogic.app</a></li>
|
||||
<li class="list-group-item"><a href="https://sell-product.dev.flatlogic.app" target="_blank">https://sell-product.dev.flatlogic.app</a></li>
|
||||
<li class="list-group-item"><a href="https://my-portfolio.dev.flatlogic.app" target="_blank">https://my-portfolio.dev.flatlogic.app</a></li>
|
||||
<li class="list-group-item"><a href="https://project-manager.dev.flatlogic.app" target="_blank">https://project-manager.dev.flatlogic.app</a></li>
|
||||
<li class="list-group-item"><a href="https://codeninja.dev.flatlogic.app" target="_blank">https://codeninja.dev.flatlogic.app</a></li>
|
||||
<li class="list-group-item"><a href="https://vibecoder-lab.dev.flatlogic.app" target="_blank">https://vibecoder-lab.dev.flatlogic.app</a></li>
|
||||
<li class="list-group-item"><a href="https://check-grammar.dev.flatlogic.app" target="_blank">https://check-grammar.dev.flatlogic.app</a></li>
|
||||
<li class="list-group-item"><a href="https://magicv.dev.flatlogic.app" target="_blank">https://magicv.dev.flatlogic.app</a></li>
|
||||
<li class="list-group-item"><a href="https://personal-landing-page.dev.flatlogic.app" target="_blank">https://personal-landing-page.dev.flatlogic.app</a></li>
|
||||
<li class="list-group-item"><a href="https://fern.dev.flatlogic.app" target="_blank">https://fern.dev.flatlogic.app</a></li>
|
||||
<li class="list-group-item"><a href="https://todo.dev.flatlogic.app" target="_blank">https://todo.dev.flatlogic.app</a></li>
|
||||
<li class="list-group-item"><a href="https://hirebridge.dev.flatlogic.app" target="_blank">https://hirebridge.dev.flatlogic.app</a></li>
|
||||
<li class="list-group-item"><a href="https://ice-cream-shop.dev.flatlogic.app" target="_blank">https://ice-cream-shop.dev.flatlogic.app</a></li>
|
||||
<li class="list-group-item"><a href="https://snake.dev.flatlogic.app" target="_blank">https://snake.dev.flatlogic.app</a></li>
|
||||
<li class="list-group-item"><a href="https://mindful-garden.dev.flatlogic.app" target="_blank">https://mindful-garden.dev.flatlogic.app</a></li>
|
||||
<li class="list-group-item"><a href="https://vm-34034.dev.flatlogic.app" target="_blank">https://vm-34034.dev.flatlogic.app</a></li>
|
||||
<li class="list-group-item"><a href="https://memory-flip.dev.flatlogic.app" target="_blank">https://memory-flip.dev.flatlogic.app</a></li>
|
||||
<li class="list-group-item"><a href="https://nestboard.dev.flatlogic.app" target="_blank">https://nestboard.dev.flatlogic.app</a></li>
|
||||
<li class="list-group-item"><a href="https://test-web.dev.flatlogic.app" target="_blank">https://test-web.dev.flatlogic.app</a></li>
|
||||
<li class="list-group-item d-flex justify-content-between align-items-center">
|
||||
<a href="https://counterwars.dev.flatlogic.app" target="_blank">https://counterwars.dev.flatlogic.app</a>
|
||||
<div class="form-check-inline">
|
||||
<input class="form-check-input" type="checkbox" data-category="beauty" data-website-number="1"><label class="form-check-label">Beauty</label>
|
||||
<input class="form-check-input" type="checkbox" data-category="funny" data-website-number="1"><label class="form-check-label">Funny</label>
|
||||
</div>
|
||||
</li>
|
||||
<li class="list-group-item d-flex justify-content-between align-items-center">
|
||||
<a href="https://justvibing.dev.flatlogic.app" target="_blank">https://justvibing.dev.flatlogic.app</a>
|
||||
<div class="form-check-inline">
|
||||
<input class="form-check-input" type="checkbox" data-category="beauty" data-website-number="2"><label class="form-check-label">Beauty</label>
|
||||
<input class="form-check-input" type="checkbox" data-category="funny" data-website-number="2"><label class="form-check-label">Funny</label>
|
||||
</div>
|
||||
</li>
|
||||
<li class="list-group-item d-flex justify-content-between align-items-center">
|
||||
<a href="https://flower-shop.dev.flatlogic.app" target="_blank">https://flower-shop.dev.flatlogic.app</a>
|
||||
<div class="form-check-inline">
|
||||
<input class="form-check-input" type="checkbox" data-category="beauty" data-website-number="3"><label class="form-check-label">Beauty</label>
|
||||
<input class="form-check-input" type="checkbox" data-category="funny" data-website-number="3"><label class="form-check-label">Funny</label>
|
||||
</div>
|
||||
</li>
|
||||
<li class="list-group-item d-flex justify-content-between align-items-center">
|
||||
<a href="https://pizzaslicer.dev.flatlogic.app" target="_blank">https://pizzaslicer.dev.flatlogic.app</a>
|
||||
<div class="form-check-inline">
|
||||
<input class="form-check-input" type="checkbox" data-category="beauty" data-website-number="4"><label class="form-check-label">Beauty</label>
|
||||
<input class="form-check-input" type="checkbox" data-category="funny" data-website-number="4"><label class="form-check-label">Funny</label>
|
||||
</div>
|
||||
</li>
|
||||
<li class="list-group-item d-flex justify-content-between align-items-center">
|
||||
<a href="https://vm-34156.dev.flatlogic.app" target="_blank">https://vm-34156.dev.flatlogic.app</a>
|
||||
<div class="form-check-inline">
|
||||
<input class="form-check-input" type="checkbox" data-category="beauty" data-website-number="5"><label class="form-check-label">Beauty</label>
|
||||
<input class="form-check-input" type="checkbox" data-category="funny" data-website-number="5"><label class="form-check-label">Funny</label>
|
||||
</div>
|
||||
</li>
|
||||
<li class="list-group-item d-flex justify-content-between align-items-center">
|
||||
<a href="https://digital-museum.dev.flatlogic.app" target="_blank">https://digital-museum.dev.flatlogic.app</a>
|
||||
<div class="form-check-inline">
|
||||
<input class="form-check-input" type="checkbox" data-category="beauty" data-website-number="6"><label class="form-check-label">Beauty</label>
|
||||
<input class="form-check-input" type="checkbox" data-category="funny" data-website-number="6"><label class="form-check-label">Funny</label>
|
||||
</div>
|
||||
</li>
|
||||
<li class="list-group-item d-flex justify-content-between align-items-center">
|
||||
<a href="https://sell-product.dev.flatlogic.app" target="_blank">https://sell-product.dev.flatlogic.app</a>
|
||||
<div class="form-check-inline">
|
||||
<input class="form-check-input" type="checkbox" data-category="beauty" data-website-number="7"><label class="form-check-label">Beauty</label>
|
||||
<input class="form-check-input" type="checkbox" data-category="funny" data-website-number="7"><label class="form-check-label">Funny</label>
|
||||
</div>
|
||||
</li>
|
||||
<li class="list-group-item d-flex justify-content-between align-items-center">
|
||||
<a href="https://my-portfolio.dev.flatlogic.app" target="_blank">https://my-portfolio.dev.flatlogic.app</a>
|
||||
<div class="form-check-inline">
|
||||
<input class="form-check-input" type="checkbox" data-category="beauty" data-website-number="8"><label class="form-check-label">Beauty</label>
|
||||
<input class="form-check-input" type="checkbox" data-category="funny" data-website-number="8"><label class="form-check-label">Funny</label>
|
||||
</div>
|
||||
</li>
|
||||
<li class="list-group-item d-flex justify-content-between align-items-center">
|
||||
<a href="https://project-manager.dev.flatlogic.app" target="_blank">https://project-manager.dev.flatlogic.app</a>
|
||||
<div class="form-check-inline">
|
||||
<input class="form-check-input" type="checkbox" data-category="beauty" data-website-number="9"><label class="form-check-label">Beauty</label>
|
||||
<input class="form-check-input" type="checkbox" data-category="funny" data-website-number="9"><label class="form-check-label">Funny</label>
|
||||
</div>
|
||||
</li>
|
||||
<li class="list-group-item d-flex justify-content-between align-items-center">
|
||||
<a href="https://codeninja.dev.flatlogic.app" target="_blank">https://codeninja.dev.flatlogic.app</a>
|
||||
<div class="form-check-inline">
|
||||
<input class="form-check-input" type="checkbox" data-category="beauty" data-website-number="10"><label class="form-check-label">Beauty</label>
|
||||
<input class="form-check-input" type="checkbox" data-category="funny" data-website-number="10"><label class="form-check-label">Funny</label>
|
||||
</div>
|
||||
</li>
|
||||
<li class="list-group-item d-flex justify-content-between align-items-center">
|
||||
<a href="https://vibecoder-lab.dev.flatlogic.app" target="_blank">https://vibecoder-lab.dev.flatlogic.app</a>
|
||||
<div class="form-check-inline">
|
||||
<input class="form-check-input" type="checkbox" data-category="beauty" data-website-number="11"><label class="form-check-label">Beauty</label>
|
||||
<input class="form-check-input" type="checkbox" data-category="funny" data-website-number="11"><label class="form-check-label">Funny</label>
|
||||
</div>
|
||||
</li>
|
||||
<li class="list-group-item d-flex justify-content-between align-items-center">
|
||||
<a href="https://check-grammar.dev.flatlogic.app" target="_blank">https://check-grammar.dev.flatlogic.app</a>
|
||||
<div class="form-check-inline">
|
||||
<input class="form-check-input" type="checkbox" data-category="beauty" data-website-number="12"><label class="form-check-label">Beauty</label>
|
||||
<input class="form-check-input" type="checkbox" data-category="funny" data-website-number="12"><label class="form-check-label">Funny</label>
|
||||
</div>
|
||||
</li>
|
||||
<li class="list-group-item d-flex justify-content-between align-items-center">
|
||||
<a href="https://magicv.dev.flatlogic.app" target="_blank">https://magicv.dev.flatlogic.app</a>
|
||||
<div class="form-check-inline">
|
||||
<input class="form-check-input" type="checkbox" data-category="beauty" data-website-number="13"><label class="form-check-label">Beauty</label>
|
||||
<input class="form-check-input" type="checkbox" data-category="funny" data-website-number="13"><label class="form-check-label">Funny</label>
|
||||
</div>
|
||||
</li>
|
||||
<li class="list-group-item d-flex justify-content-between align-items-center">
|
||||
<a href="https://personal-landing-page.dev.flatlogic.app" target="_blank">https://personal-landing-page.dev.flatlogic.app</a>
|
||||
<div class="form-check-inline">
|
||||
<input class="form-check-input" type="checkbox" data-category="beauty" data-website-number="14"><label class="form-check-label">Beauty</label>
|
||||
<input class="form-check-input" type="checkbox" data-category="funny" data-website-number="14"><label class="form-check-label">Funny</label>
|
||||
</div>
|
||||
</li>
|
||||
<li class="list-group-item d-flex justify-content-between align-items-center">
|
||||
<a href="https://fern.dev.flatlogic.app" target="_blank">https://fern.dev.flatlogic.app</a>
|
||||
<div class="form-check-inline">
|
||||
<input class="form-check-input" type="checkbox" data-category="beauty" data-website-number="15"><label class="form-check-label">Beauty</label>
|
||||
<input class="form-check-input" type="checkbox" data-category="funny" data-website-number="15"><label class="form-check-label">Funny</label>
|
||||
</div>
|
||||
</li>
|
||||
<li class="list-group-item d-flex justify-content-between align-items-center">
|
||||
<a href="https://todo.dev.flatlogic.app" target="_blank">https://todo.dev.flatlogic.app</a>
|
||||
<div class="form-check-inline">
|
||||
<input class="form-check-input" type="checkbox" data-category="beauty" data-website-number="16"><label class="form-check-label">Beauty</label>
|
||||
<input class="form-check-input" type="checkbox" data-category="funny" data-website-number="16"><label class="form-check-label">Funny</label>
|
||||
</div>
|
||||
</li>
|
||||
<li class="list-group-item d-flex justify-content-between align-items-center">
|
||||
<a href="https://hirebridge.dev.flatlogic.app" target="_blank">https://hirebridge.dev.flatlogic.app</a>
|
||||
<div class="form-check-inline">
|
||||
<input class="form-check-input" type="checkbox" data-category="beauty" data-website-number="17"><label class="form-check-label">Beauty</label>
|
||||
<input class="form-check-input" type="checkbox" data-category="funny" data-website-number="17"><label class="form-check-label">Funny</label>
|
||||
</div>
|
||||
</li>
|
||||
<li class="list-group-item d-flex justify-content-between align-items-center">
|
||||
<a href="https://ice-cream-shop.dev.flatlogic.app" target="_blank">https://ice-cream-shop.dev.flatlogic.app</a>
|
||||
<div class="form-check-inline">
|
||||
<input class="form-check-input" type="checkbox" data-category="beauty" data-website-number="18"><label class="form-check-label">Beauty</label>
|
||||
<input class="form-check-input" type="checkbox" data-category="funny" data-website-number="18"><label class="form-check-label">Funny</label>
|
||||
</div>
|
||||
</li>
|
||||
<li class="list-group-item d-flex justify-content-between align-items-center">
|
||||
<a href="https://snake.dev.flatlogic.app" target="_blank">https://snake.dev.flatlogic.app</a>
|
||||
<div class="form-check-inline">
|
||||
<input class="form-check-input" type="checkbox" data-category="beauty" data-website-number="19"><label class="form-check-label">Beauty</label>
|
||||
<input class="form-check-input" type="checkbox" data-category="funny" data-website-number="19"><label class="form-check-label">Funny</label>
|
||||
</div>
|
||||
</li>
|
||||
<li class="list-group-item d-flex justify-content-between align-items-center">
|
||||
<a href="https://mindful-garden.dev.flatlogic.app" target="_blank">https://mindful-garden.dev.flatlogic.app</a>
|
||||
<div class="form-check-inline">
|
||||
<input class="form-check-input" type="checkbox" data-category="beauty" data-website-number="20"><label class="form-check-label">Beauty</label>
|
||||
<input class="form-check-input" type="checkbox" data-category="funny" data-website-number="20"><label class="form-check-label">Funny</label>
|
||||
</div>
|
||||
</li>
|
||||
<li class="list-group-item d-flex justify-content-between align-items-center">
|
||||
<a href="https://vm-34034.dev.flatlogic.app" target="_blank">https://vm-34034.dev.flatlogic.app</a>
|
||||
<div class="form-check-inline">
|
||||
<input class="form-check-input" type="checkbox" data-category="beauty" data-website-number="21"><label class="form-check-label">Beauty</label>
|
||||
<input class="form-check-input" type="checkbox" data-category="funny" data-website-number="21"><label class="form-check-label">Funny</label>
|
||||
</div>
|
||||
</li>
|
||||
<li class="list-group-item d-flex justify-content-between align-items-center">
|
||||
<a href="https://memory-flip.dev.flatlogic.app" target="_blank">https://memory-flip.dev.flatlogic.app</a>
|
||||
<div class="form-check-inline">
|
||||
<input class="form-check-input" type="checkbox" data-category="beauty" data-website-number="22"><label class="form-check-label">Beauty</label>
|
||||
<input class="form-check-input" type="checkbox" data-category="funny" data-website-number="22"><label class="form-check-label">Funny</label>
|
||||
</div>
|
||||
</li>
|
||||
<li class="list-group-item d-flex justify-content-between align-items-center">
|
||||
<a href="https://nestboard.dev.flatlogic.app" target="_blank">https://nestboard.dev.flatlogic.app</a>
|
||||
<div class="form-check-inline">
|
||||
<input class="form-check-input" type="checkbox" data-category="beauty" data-website-number="23"><label class="form-check-label">Beauty</label>
|
||||
<input class="form-check-input" type="checkbox" data-category="funny" data-website-number="23"><label class="form-check-label">Funny</label>
|
||||
</div>
|
||||
</li>
|
||||
<li class="list-group-item d-flex justify-content-between align-items-center">
|
||||
<a href="https://test-web.dev.flatlogic.app" target="_blank">https://test-web.dev.flatlogic.app</a>
|
||||
<div class="form-check-inline">
|
||||
<input class="form-check-input" type="checkbox" data-category="beauty" data-website-number="24"><label class="form-check-label">Beauty</label>
|
||||
<input class="form-check-input" type="checkbox" data-category="funny" data-website-number="24"><label class="form-check-label">Funny</label>
|
||||
</div>
|
||||
</li>
|
||||
</ol>
|
||||
</div>
|
||||
</div>
|
||||
@ -64,10 +208,8 @@
|
||||
<input type="text" class="form-control" id="beautiful-name" name="voter_name" required>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Website Numbers (1-30)</label>
|
||||
<input type="number" class="form-control mb-2" name="website_number_1" min="1" max="30" required>
|
||||
<input type="number" class="form-control mb-2" name="website_number_2" min="1" max="30" required>
|
||||
<input type="number" class="form-control" name="website_number_3" min="1" max="30" required>
|
||||
<label for="website_number_beauty" class="form-label">Selected Websites (up to 3)</label>
|
||||
<input type="text" class="form-control" id="website_number_beauty" name="website_numbers" readonly required>
|
||||
</div>
|
||||
<input type="hidden" name="category" value="beauty">
|
||||
<button type="submit" class="btn btn-primary">Submit Votes</button>
|
||||
@ -86,10 +228,8 @@
|
||||
<input type="text" class="form-control" id="funny-name" name="voter_name" required>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Website Numbers (1-30)</label>
|
||||
<input type="number" class="form-control mb-2" name="website_number_1" min="1" max="30" required>
|
||||
<input type="number" class="form-control mb-2" name="website_number_2" min="1" max="30" required>
|
||||
<input type="number" class="form-control" name="website_number_3" min="1" max="30" required>
|
||||
<label for="website_number_funny" class="form-label">Selected Websites (up to 3)</label>
|
||||
<input type="text" class="form-control" id="website_number_funny" name="website_numbers" readonly required>
|
||||
</div>
|
||||
<input type="hidden" name="category" value="funny">
|
||||
<button type="submit" class="btn btn-secondary">Submit Votes</button>
|
||||
@ -118,6 +258,6 @@
|
||||
</div>
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
|
||||
<script src="assets/js/main.js"></script>
|
||||
<script src="assets/js/main.js?v=<?php echo time(); ?>"></script>
|
||||
</body>
|
||||
</html>
|
||||
@ -29,11 +29,8 @@ if (!$data) {
|
||||
|
||||
$voterName = $data['voter_name'] ?? '';
|
||||
$category = $data['category'] ?? '';
|
||||
$website_numbers = [
|
||||
$data['website_number_1'] ?? 0,
|
||||
$data['website_number_2'] ?? 0,
|
||||
$data['website_number_3'] ?? 0,
|
||||
];
|
||||
$website_numbers_str = $data['website_numbers'] ?? '';
|
||||
$website_numbers = !empty($website_numbers_str) ? explode(',', $website_numbers_str) : [];
|
||||
|
||||
if (empty($voterName) || empty($category) || !in_array($category, ['beauty', 'funny'])) {
|
||||
echo json_encode(['success' => false, 'error' => 'Invalid data provided.']);
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user