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.

enter image description here

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"

//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();

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.

  • It's hard to say what the solution would be if we don't have the HTML source. It is most likely due to the jQuery selector not selecting an element. Inspect the HTML source and find out if you are using the right selectors. – Oak3 Jul 11 '18 at 20:39
  • Hi martijn, as far as I know, Jquery reads display name and I am not getting why won't read the display names even though display names are mentioned in the code. – mdevm Jul 11 '18 at 20:55

I prefer native js solutions: function to select element with text:

function contains(selector, text) {
  var elements = document.querySelectorAll(selector);
  return [].filter.call(elements, function(element){
    return RegExp(text).test(element.textContent);

then use sth like this:

contains('nobr',/Holiday 2 Date/gmi)[0].closest('tr').style.display = 'none'

and add evemt listener:

document.querySelector("select[title='Number of Holidays Worked']").addEventListener("change", function(){
    var currentValue = document.querySelector("select[title='Number of Holidays Worked']").value;
    if(currentValue == 1){
        contains('nobr', /Holiday 2 Date/gmi)[0].closest('tr').style.display = 'none';
        contains('nobr', /Holiday 1 Date/gmi)[0].closest('tr').style.display = 'block';
    } else if(currentValue == 2){
        contains('nobr', /Holiday 1 Date/gmi)[0].closest('tr').style.display = 'block';
        contains('nobr', /Holiday 2 Date/gmi)[0].closest('tr').style.display = 'block';
    } else {
        contains('nobr', /Holiday 1 Date/gmi)[0].closest('tr').style.display = 'none';
        contains('nobr', /Holiday 2 Date/gmi)[0].closest('tr').style.display = 'none';

Don't forget script tag and $(document).ready(function(){})


This is going to sound silly, but.... :)

Your text "Holliday 2" has a typo with a double "l" in the snapshot. Remove the additional "l" and the code should probably work.

  • I think you found the solution. – Oak3 Jul 12 '18 at 12:03
  • Deepu, yes that was a mistake. After correcting that, its initially hiding both date fields but and when i switch the value to 1, it shows the holiday 1 date. The only issue is when i change the drop-down value to 2, it does not show me the holiday 2 date field , any idea? – mdevm Jul 12 '18 at 13:08
  • Debug it my friend. Set a prompt in the second function to see if it really fires and make corrections. – Deepu Nair Jul 12 '18 at 13:25

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.