tmdinosaurcenter/kiosk-guestbook
1
0
Fork 0
mirror of https://github.com/tmdinosaurcenter/kiosk-guestbook.git synced 2025-09-13 02:53:33 -06:00
Code Issues Packages Projects Releases Wiki Activity

Add dynamic comment field display

Browse Source 
- Hide comment field by default.
- Add JavaScript to reveal comment field when first name, last name, and location have at least 3 characters.
- Update form instructions to inform users about the comment field.
This commit is contained in:
Steve Dogiakos
2025-04-01 19:19:28 -06:00
parent b51f88344d
commit 4ba6a77ff2
4 changed files with 1032 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

29
templates/index.html
View File

@@ -70,6 +70,11 @@
<label for="location" class="form-label">Location:</label>
<input type="text" class="form-control" id="location" name="location" required>
</div>
<!-- Comment field hidden by default -->
<div class="mb-3" id="comment-field" style="display: none;">
<label for="comment" class="form-label">Comment (Optional):</label>
<textarea class="form-control" id="comment" name="comment" rows="3"></textarea>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
</div>
@@ -85,6 +90,30 @@
</div>
</div>
<!-- JavaScript to reveal the comment field -->
<script>
document.addEventListener("DOMContentLoaded", function () {
const firstNameInput = document.getElementById('first_name');
const lastNameInput = document.getElementById('last_name');
const locationInput = document.getElementById('location');
const commentField = document.getElementById('comment-field');
function checkFields() {
if (firstNameInput.value.trim().length >= 3 &&
lastNameInput.value.trim().length >= 3 &&
locationInput.value.trim().length >= 3) {
commentField.style.display = 'block';
} else {
commentField.style.display = 'none';
}
}
firstNameInput.addEventListener('input', checkFields);
lastNameInput.addEventListener('input', checkFields);
locationInput.addEventListener('input', checkFields);
});
</script>
<!-- Bootstrap JS (optional) -->
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.10.2/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js"></script>