Update DIY HTMX to trigger on input update

This commit is contained in:
Peter Stockings
2026-03-13 15:18:09 +11:00
parent 086784b2a2
commit eca31040af
3 changed files with 8 additions and 16 deletions

View File

@@ -227,6 +227,14 @@
}
});
// Auto-submit forms when inputs change
document.addEventListener('change', (e) => {
const htmxForm = e.target.closest('form[hx-get], form[hx-post]');
if (htmxForm) {
htmxForm.dispatchEvent(new Event('submit', { cancelable: true, bubbles: true }));
}
});
// Handle form submissions for Micro-HTMX
document.addEventListener('submit', async (e) => {
const htmxForm = e.target.closest('form[hx-get], form[hx-post]');

View File

@@ -29,14 +29,6 @@
<input type="date" name="end_date" id="end_date" value="{{ end_date or '' }}"
class="w-full p-2.5 border border-gray-300 rounded-xl shadow-sm focus:outline-none focus:ring-2 focus:ring-primary-500 text-gray-700">
</div>
<!-- Apply Button -->
<div>
<button type="submit"
class="w-full md:w-auto bg-primary-600 text-white px-6 py-2.5 rounded-xl font-semibold shadow-md hover:bg-primary-700 focus:outline-none focus:ring-2 focus:ring-primary-500 transition-colors">
Apply Filter
</button>
</div>
</form>
</div>
<!-- Blood Pressure Graph Card -->

View File

@@ -16,14 +16,6 @@
<input type="date" name="end_date" id="end_date" value="{{ end_date or '' }}"
class="w-full p-2.5 border border-gray-300 rounded-xl shadow-sm focus:outline-none focus:ring-2 focus:ring-primary-500 text-gray-700">
</div>
<!-- Apply Button -->
<div>
<button type="submit"
class="w-full md:w-auto bg-primary-600 text-white px-6 py-2.5 rounded-xl font-semibold shadow-md hover:bg-primary-700 focus:outline-none focus:ring-2 focus:ring-primary-500 transition-colors">
Apply Filter
</button>
</div>
</form>
</div>