Skip to content

HTML-893: Obs checkbox element should only show dateLabel when checked #349

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
chibongho merged 1 commit into from
Aug 28, 2026
Merged

HTML-893: Obs checkbox element should only show dateLabel when checked #349

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
20 changes: 20 additions & 0 deletions api/src/main/java/org/openmrs/module/htmlformentry/element/ObsSubmissionElement.java
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1282,11 +1282,31 @@ public String generateHtml(FormEntryContext context) {
ret.append("</span>");
}
if (dateWidget != null) {
// For a checkbox-style obs, the date (label + widget + clear button) is only meaningful once the
// checkbox is checked, so wrap it and toggle its visibility off the checkbox state.
boolean toggleDateWithCheckbox = context.getMode() != Mode.VIEW && valueWidget instanceof CheckboxWidget;
String dateHolderId = null;
if (toggleDateWithCheckbox) {
CheckboxWidget checkbox = (CheckboxWidget) valueWidget;
boolean checked = checkbox.getInitialValue() != null && !"".equals(checkbox.getInitialValue());
dateHolderId = context.getFieldNameIfRegistered(valueWidget) + "_date_holder";
ret.append("<span id=\"").append(dateHolderId).append("\"");
if (!checked) {
ret.append(" style=\"display:none\"");
}
ret.append(">");
}
ret.append(" ");
if (dateLabel != null) {
ret.append(dateLabel);
}
ret.append(dateWidget.generateHtml(context));
if (toggleDateWithCheckbox) {
ret.append("</span>");
ret.append("<script>setupCheckboxDateToggle('").append(context.getFieldNameIfRegistered(valueWidget))
.append("', '").append(dateHolderId).append("', '")
.append(context.getFieldNameIfRegistered(dateWidget)).append("')</script>");
}
}
if (accessionNumberWidget != null) {
ret.append(" ");
Expand Down
22 changes: 22 additions & 0 deletions omod/src/main/webapp/resources/htmlFormEntry.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -675,6 +675,28 @@ function clearDatePickerValue(displaySelector, valueSelector) {
jQuery(displaySelector).change();
}

// For a checkbox-style obs with an associated obs date, the date (label + widget + clear button) should
// only be shown while the checkbox is checked. When the checkbox is unchecked, the date is hidden and its
// value cleared so it cannot trigger a "date without value" validation error on a field the user can no
// longer see.
function setupCheckboxDateToggle(checkboxFieldName, dateHolderId, dateFieldName) {
var checkboxSelector = '#' + checkboxFieldName;
var holderSelector = '#' + dateHolderId;

function syncDateHolderToCheckbox() {
if (jQuery(checkboxSelector).is(':checked')) {
jQuery(holderSelector).show();
} else {
jQuery(holderSelector).hide();
clearDatePickerValue('#' + dateFieldName + '-display', '#' + dateFieldName);
}
}

jQuery(checkboxSelector).change(syncDateHolderToCheckbox);

syncDateHolderToCheckbox();
}

// The hour/minute/second fields are only enabled once a date has been entered. If no date is entered,
// the time fields are disabled (and reset to 00), so the DateTimeWidget is treated as having no value.
function setupDateTimeValidation(dateFieldName, timeFieldName) {
Expand Down