Fix: buttons not working due to form-selector conflict

- getFormData now scopes queries to #inventory-form element
- clearFormData now scopes queries to #inventory-form element
- Excludes form-selector from field queries
- Fixes exportCSV, sendEmail, and clearForm buttons
v1.0.1
killercow 2 weeks ago
parent cfd852cbc3
commit 7c48fac373

@ -841,16 +841,21 @@ input.invalid, select.invalid, textarea.invalid {
// Clear form data (without removing from storage) // Clear form data (without removing from storage)
function clearFormData() { function clearFormData() {
document.querySelectorAll('input[type="text"], input[type="number"], input[type="date"], select, textarea').forEach(field => { const form = document.getElementById('inventory-form');
field.value = ''; if (!form) return;
field.classList.remove('invalid');
form.querySelectorAll('input[type="text"], input[type="number"], input[type="date"], select, textarea').forEach(field => {
if (field.id !== 'form-selector') {
field.value = '';
field.classList.remove('invalid');
}
}); });
document.querySelectorAll('input[type="checkbox"]').forEach(cb => { form.querySelectorAll('input[type="checkbox"]').forEach(cb => {
cb.checked = false; cb.checked = false;
}); });
document.querySelectorAll('.photo-preview').forEach(img => { form.querySelectorAll('.photo-preview').forEach(img => {
img.src = ''; img.src = '';
img.style.display = 'none'; img.style.display = 'none';
img.parentElement.classList.remove('has-photo'); img.parentElement.classList.remove('has-photo');
@ -915,30 +920,32 @@ input.invalid, select.invalid, textarea.invalid {
// Get all form data // Get all form data
function getFormData() { function getFormData() {
const data = {}; const data = {};
const form = document.getElementById('inventory-form');
if (!form) return data;
// Text, number, date, select, textarea // Text, number, date, select, textarea (only within the form)
document.querySelectorAll('input[type="text"], input[type="number"], input[type="date"], select, textarea').forEach(field => { form.querySelectorAll('input[type="text"], input[type="number"], input[type="date"], select, textarea').forEach(field => {
if (field.id) { if (field.id && field.id !== 'form-selector') {
data[field.id] = field.value; data[field.id] = field.value;
} }
}); });
// Checkboxes (boolean) // Checkboxes (boolean)
document.querySelectorAll('input[type="checkbox"].boolean-field').forEach(field => { form.querySelectorAll('input[type="checkbox"].boolean-field').forEach(field => {
if (field.id) { if (field.id) {
data[field.id] = field.checked; data[field.id] = field.checked;
} }
}); });
// Multiselect // Multiselect
document.querySelectorAll('.multiselect-group').forEach(group => { form.querySelectorAll('.multiselect-group').forEach(group => {
const id = group.dataset.id; const id = group.dataset.id;
const checked = Array.from(group.querySelectorAll('input:checked')).map(cb => cb.value); const checked = Array.from(group.querySelectorAll('input:checked')).map(cb => cb.value);
data[id] = checked; data[id] = checked;
}); });
// Photo // Photo
document.querySelectorAll('.photo-preview').forEach(img => { form.querySelectorAll('.photo-preview').forEach(img => {
const id = img.id; const id = img.id;
if (img.src && !img.src.includes('data:image/svg')) { if (img.src && !img.src.includes('data:image/svg')) {
data[id] = img.src; data[id] = img.src;

@ -872,16 +872,21 @@ select {
// Clear form data (without removing from storage) // Clear form data (without removing from storage)
function clearFormData() { function clearFormData() {
document.querySelectorAll('input[type="text"], input[type="number"], input[type="date"], select, textarea').forEach(field => { const form = document.getElementById('inventory-form');
field.value = ''; if (!form) return;
field.classList.remove('invalid');
form.querySelectorAll('input[type="text"], input[type="number"], input[type="date"], select, textarea').forEach(field => {
if (field.id !== 'form-selector') {
field.value = '';
field.classList.remove('invalid');
}
}); });
document.querySelectorAll('input[type="checkbox"]').forEach(cb => { form.querySelectorAll('input[type="checkbox"]').forEach(cb => {
cb.checked = false; cb.checked = false;
}); });
document.querySelectorAll('.photo-preview').forEach(img => { form.querySelectorAll('.photo-preview').forEach(img => {
img.src = ''; img.src = '';
img.style.display = 'none'; img.style.display = 'none';
img.parentElement.classList.remove('has-photo'); img.parentElement.classList.remove('has-photo');
@ -946,30 +951,32 @@ select {
// Get all form data // Get all form data
function getFormData() { function getFormData() {
const data = {}; const data = {};
const form = document.getElementById('inventory-form');
if (!form) return data;
// Text, number, date, select, textarea // Text, number, date, select, textarea (only within the form)
document.querySelectorAll('input[type="text"], input[type="number"], input[type="date"], select, textarea').forEach(field => { form.querySelectorAll('input[type="text"], input[type="number"], input[type="date"], select, textarea').forEach(field => {
if (field.id) { if (field.id && field.id !== 'form-selector') {
data[field.id] = field.value; data[field.id] = field.value;
} }
}); });
// Checkboxes (boolean) // Checkboxes (boolean)
document.querySelectorAll('input[type="checkbox"].boolean-field').forEach(field => { form.querySelectorAll('input[type="checkbox"].boolean-field').forEach(field => {
if (field.id) { if (field.id) {
data[field.id] = field.checked; data[field.id] = field.checked;
} }
}); });
// Multiselect // Multiselect
document.querySelectorAll('.multiselect-group').forEach(group => { form.querySelectorAll('.multiselect-group').forEach(group => {
const id = group.dataset.id; const id = group.dataset.id;
const checked = Array.from(group.querySelectorAll('input:checked')).map(cb => cb.value); const checked = Array.from(group.querySelectorAll('input:checked')).map(cb => cb.value);
data[id] = checked; data[id] = checked;
}); });
// Photo // Photo
document.querySelectorAll('.photo-preview').forEach(img => { form.querySelectorAll('.photo-preview').forEach(img => {
const id = img.id; const id = img.id;
if (img.src && !img.src.includes('data:image/svg')) { if (img.src && !img.src.includes('data:image/svg')) {
data[id] = img.src; data[id] = img.src;

@ -903,16 +903,21 @@ input.invalid, select.invalid, textarea.invalid {
// Clear form data (without removing from storage) // Clear form data (without removing from storage)
function clearFormData() { function clearFormData() {
document.querySelectorAll('input[type="text"], input[type="number"], input[type="date"], select, textarea').forEach(field => { const form = document.getElementById('inventory-form');
field.value = ''; if (!form) return;
field.classList.remove('invalid');
form.querySelectorAll('input[type="text"], input[type="number"], input[type="date"], select, textarea').forEach(field => {
if (field.id !== 'form-selector') {
field.value = '';
field.classList.remove('invalid');
}
}); });
document.querySelectorAll('input[type="checkbox"]').forEach(cb => { form.querySelectorAll('input[type="checkbox"]').forEach(cb => {
cb.checked = false; cb.checked = false;
}); });
document.querySelectorAll('.photo-preview').forEach(img => { form.querySelectorAll('.photo-preview').forEach(img => {
img.src = ''; img.src = '';
img.style.display = 'none'; img.style.display = 'none';
img.parentElement.classList.remove('has-photo'); img.parentElement.classList.remove('has-photo');
@ -977,30 +982,32 @@ input.invalid, select.invalid, textarea.invalid {
// Get all form data // Get all form data
function getFormData() { function getFormData() {
const data = {}; const data = {};
const form = document.getElementById('inventory-form');
if (!form) return data;
// Text, number, date, select, textarea // Text, number, date, select, textarea (only within the form)
document.querySelectorAll('input[type="text"], input[type="number"], input[type="date"], select, textarea').forEach(field => { form.querySelectorAll('input[type="text"], input[type="number"], input[type="date"], select, textarea').forEach(field => {
if (field.id) { if (field.id && field.id !== 'form-selector') {
data[field.id] = field.value; data[field.id] = field.value;
} }
}); });
// Checkboxes (boolean) // Checkboxes (boolean)
document.querySelectorAll('input[type="checkbox"].boolean-field').forEach(field => { form.querySelectorAll('input[type="checkbox"].boolean-field').forEach(field => {
if (field.id) { if (field.id) {
data[field.id] = field.checked; data[field.id] = field.checked;
} }
}); });
// Multiselect // Multiselect
document.querySelectorAll('.multiselect-group').forEach(group => { form.querySelectorAll('.multiselect-group').forEach(group => {
const id = group.dataset.id; const id = group.dataset.id;
const checked = Array.from(group.querySelectorAll('input:checked')).map(cb => cb.value); const checked = Array.from(group.querySelectorAll('input:checked')).map(cb => cb.value);
data[id] = checked; data[id] = checked;
}); });
// Photo // Photo
document.querySelectorAll('.photo-preview').forEach(img => { form.querySelectorAll('.photo-preview').forEach(img => {
const id = img.id; const id = img.id;
if (img.src && !img.src.includes('data:image/svg')) { if (img.src && !img.src.includes('data:image/svg')) {
data[id] = img.src; data[id] = img.src;

@ -1107,16 +1107,21 @@ JAVASCRIPT = """
// Clear form data (without removing from storage) // Clear form data (without removing from storage)
function clearFormData() { function clearFormData() {
document.querySelectorAll('input[type="text"], input[type="number"], input[type="date"], select, textarea').forEach(field => { const form = document.getElementById('inventory-form');
field.value = ''; if (!form) return;
field.classList.remove('invalid');
form.querySelectorAll('input[type="text"], input[type="number"], input[type="date"], select, textarea').forEach(field => {
if (field.id !== 'form-selector') {
field.value = '';
field.classList.remove('invalid');
}
}); });
document.querySelectorAll('input[type="checkbox"]').forEach(cb => { form.querySelectorAll('input[type="checkbox"]').forEach(cb => {
cb.checked = false; cb.checked = false;
}); });
document.querySelectorAll('.photo-preview').forEach(img => { form.querySelectorAll('.photo-preview').forEach(img => {
img.src = ''; img.src = '';
img.style.display = 'none'; img.style.display = 'none';
img.parentElement.classList.remove('has-photo'); img.parentElement.classList.remove('has-photo');
@ -1181,30 +1186,32 @@ JAVASCRIPT = """
// Get all form data // Get all form data
function getFormData() { function getFormData() {
const data = {}; const data = {};
const form = document.getElementById('inventory-form');
if (!form) return data;
// Text, number, date, select, textarea // Text, number, date, select, textarea (only within the form)
document.querySelectorAll('input[type="text"], input[type="number"], input[type="date"], select, textarea').forEach(field => { form.querySelectorAll('input[type="text"], input[type="number"], input[type="date"], select, textarea').forEach(field => {
if (field.id) { if (field.id && field.id !== 'form-selector') {
data[field.id] = field.value; data[field.id] = field.value;
} }
}); });
// Checkboxes (boolean) // Checkboxes (boolean)
document.querySelectorAll('input[type="checkbox"].boolean-field').forEach(field => { form.querySelectorAll('input[type="checkbox"].boolean-field').forEach(field => {
if (field.id) { if (field.id) {
data[field.id] = field.checked; data[field.id] = field.checked;
} }
}); });
// Multiselect // Multiselect
document.querySelectorAll('.multiselect-group').forEach(group => { form.querySelectorAll('.multiselect-group').forEach(group => {
const id = group.dataset.id; const id = group.dataset.id;
const checked = Array.from(group.querySelectorAll('input:checked')).map(cb => cb.value); const checked = Array.from(group.querySelectorAll('input:checked')).map(cb => cb.value);
data[id] = checked; data[id] = checked;
}); });
// Photo // Photo
document.querySelectorAll('.photo-preview').forEach(img => { form.querySelectorAll('.photo-preview').forEach(img => {
const id = img.id; const id = img.id;
if (img.src && !img.src.includes('data:image/svg')) { if (img.src && !img.src.includes('data:image/svg')) {
data[id] = img.src; data[id] = img.src;

Loading…
Cancel
Save

Powered by TurnKey Linux.