One of the Forms I am working on, I want to hide fields called Holiday 1 Date and Holiday 2 Date based on a drop-down metadata column value selection. Below is the screenshot of the form.
Here is the code I wrote:
<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script type="text/javascript">
// Execute the following JavaScript after the page has fully loaded, when it's ".ready"
$(document).ready(function(){
//Define which columns to show/hide by default
$('nobr:contains("Holiday 1 Date")').closest('tr').hide();
$('nobr:contains("Holiday 2 Date")').closest('tr').hide();
//Show/hide columns based on Drop Down Selection
$("select[title='Number of Holidays Worked']").change(function() {
if ($("select[title='Number of Holidays Worked']").val() == "1") {
$('nobr:contains("Holiday 2 Date")').closest('tr').hide();
$('nobr:contains("Holiday 1 Date")').closest('tr').show();
} else if($("select[title='Number of Holidays Worked']").val() == "2"){
$('nobr:contains("Holiday 2 Date")').closest('tr').show();
$('nobr:contains("Holiday 1 Date")').closest('tr').show();
}
});
});
</script>
Now as you can see from the above code, initially I am hiding both Holiday 1 Date and Holiday 2 Date fields. Then based on value selection in drop-down called 'Number of Holidays Worked' (choice values:0 , 1, 2, Default value is 0 for the drop-down), I want to further hide/show the two date fields. For some reason the code is not functioning properly. Initially its only hiding field: holiday 1 Date and Holiday 2 Date remains visible even though its set to hidden initially.
Also once the drop-down value is changed to 1, it makes Holiday 1 date field visible and does not do anything if value is switched to 2 or back to 1. Can someone please help me correct it? Thanks in advance.