Hide Show Multiple fields based on Multiple Fields

Forms
1

I am not very good at JS, I have read through several of the training blogs and articles, but I can't quite figure out how to do multiple functions?

When I try to hide a single field, it works see below

fd.spRendered(function() {

function hideOrShowbatteries() {
    if (fd.field('battery').value == 'No') {
        // Show the batteries field
        fd.field('batteries').hidden = false;;
    } else {
        // Hide the batteries field
        fd.field('batteries').hidden = true;;
    }
}

// Calling hideOrShowbatteries when the battery value changes
fd.field('battery').$on('change',hideOrShowbatteries);

// Calling hideOrShowbattery on form loading
hideOrShowbatteries();

});

A couple things I am trying to do and could use some help:

  1. I need to hide 6 specific fields by default (when the form loads)
  2. Then when the battery field equals 'No' I want to show 2 of the fields (batteries and batteriesreordered). I have two more fields that will then change (equals Yes or No) and then certain fields will need to be displayed.

I am not sure how to fit all of the code into the form and have it work. I can get a single field to show/hide but not the rest. This is what I tried:

fd.spRendered(function() {

function hideOrShowbatteries() {
    if (fd.field('battery').value == 'No') {
        // Show the batteries field
        fd.field('batteries').hidden = false;;
    } else {
        // Hide the batteries field
        fd.field('batteries').hidden = true;;
    }
}

{

function hideOrShowbatteriesreordered() {
    if (fd.field('battery').value == 'No') {
        // Show the batteriesreordered field
        fd.field('batteriesreordered').hidden = false;;
    } else {
        // Hide the batteriesreordered field
        fd.field('batteriesreordered').hidden = true;;
    }
}

// Calling hideOrShowbatteries when the battery value changes
fd.field('battery').$on('change',hideOrShowbatteries);

// Calling hideOrShowbattery on form loading
hideOrShowbatteries();

// Calling hideOrShowbatteriesreordered when the battery value changes
fd.field('battery').$on('change',hideOrShowbatteries);

// Calling hideOrShowbattery on form loading
hideOrShowbatteriesreordered();

});

But I really don't know JS or what might be wrong or missing or how to combine everything. Please help, thank you so much!!

2

Hello @Cariann,

There is a syntax error in your code, that is why it doesn't work. Also, you can combine two functions into one like so:

fd.spRendered(function() {

    function hideOrShowbatteries() {
        if (fd.field('battery').value == 'No') {
            // Show the batteries field
            fd.field('batteries').hidden = false;
            // Show the batteriesreordered field
            fd.field('batteriesreordered').hidden = false;
        } else {
            // Hide the batteries field
            fd.field('batteries').hidden = true;
            // Hide the batteriesreordered field
            fd.field('batteriesreordered').hidden = true;
        }
    }



    // Calling hideOrShowbatteries when the battery value changes
    fd.field('battery').$on('change', hideOrShowbatteries);

    // Calling hideOrShowbattery on form loading
    hideOrShowbatteries();

});
1 Like
3

@Margo Thank you!

I have a few more functions to add in. I have some other fields that when they are changed fields will need to be hidden or shown. Here is what I tried and neither work.

Try 1

fd.spRendered(function() {

function hideOrShowfields() {
    if (fd.field('battery').value == 'No') {
        // Show the batteries field
        fd.field('batteries').hidden = false;;
        // Show the batteriesreordered field
        fd.field('batteriesreordered').hidden = false;;
    } else {
        // Hide the batteries field
        fd.field('batteries').hidden = true;;
        // Hide the batteriesreordered field
        fd.field('batteriesreordered').hidden = true;;

if (fd.field('aedpadsexpired').value == 'Yes') {
// Show the padsreplaced field
fd.field('padsreplaced').hidden = false;;
// Show the padsrecordered field
fd.field('padsrecordered').hidden = false;;
} else {
// Hide the padsreplaced field
fd.field('padsreplaced').hidden = true;;
// Hide the padsrecordered field
fd.field('padsrecordered').hidden = true;;

    }
}

// Calling hideOrShowfields when the battery value changes
fd.field('battery').$on('change',hideOrShowfields);
fd.field('aedpadsexpired').$on('change',hideOrShowfields);

// Calling hideOrShowfields on form loading
hideOrShowfields();

});

Try 2

fd.spRendered(function() {

function hideOrShowbatteries() {
    if (fd.field('battery').value == 'No') {
        // Show the batteries field
        fd.field('batteries').hidden = false;;
        // Show the batteriesreordered field
        fd.field('batteriesreordered').hidden = false;;
    } else {
        // Hide the batteries field
        fd.field('batteries').hidden = true;;
        // Hide the batteriesreordered field
        fd.field('batteriesreordered').hidden = true;;

    }
}

// Calling hideOrShowbatteries when the battery value changes
fd.field('battery').$on('change',hideOrShowbatteries);

// Calling hideOrShowbattery on form loading
hideOrShowbatteries();

}

{
function hideOrShowaedpadsexpired() {
if (fd.field('aedpadsexpired').value == 'Yes') {
// Show the padsreplaced field
fd.field('padsreplaced').hidden = false;;
// Show the padsrecordered field
fd.field('padsrecordered').hidden = false;;
} else {
// Hide the padsreplaced field
fd.field('padsreplaced').hidden = true;;
// Hide the padsrecordered field
fd.field('padsrecordered').hidden = true;;
}
}

// Calling hideOrShowaedpadsexpired when the battery value changes
fd.field('aedpadsexpired').$on('change',hideOrShowaedpadsexpired);

// Calling hideOrShowaedpadsexpired on form loading
hideOrShowaedpadsexpired();

}

});

Thank you!!!

4

@Cariann,

There are syntax errors in your code that is why it doesn't work.

You need to place the code inside the spRendered() function:

fd.spRendered(function() {

//your code is here

});

Pay attention to closing brackets. Also, you need to remove double semicolons.

I updated the code and commented out all extra brackets:

fd.spRendered(function() {

    function hideOrShowbatteries() {
        if (fd.field('battery').value == 'No') {
            // Show the batteries field
            fd.field('batteries').hidden = false;
            // Show the batteriesreordered field
            fd.field('batteriesreordered').hidden = false;
        } else {
            // Hide the batteries field
            fd.field('batteries').hidden = true;
            // Hide the batteriesreordered field
            fd.field('batteriesreordered').hidden = true;
        }
    }

    // Calling hideOrShowbatteries when the battery value changes
    fd.field('battery').$on('change', hideOrShowbatteries);

    // Calling hideOrShowbattery on form loading
    hideOrShowbatteries();

// extra bracket
//}
// extra bracket
//{
    function hideOrShowaedpadsexpired() {
        if (fd.field('aedpadsexpired').value == 'Yes') {
            // Show the padsreplaced field
            fd.field('padsreplaced').hidden = false;
            // Show the padsrecordered field
            fd.field('padsrecordered').hidden = false;
        } else {
            // Hide the padsreplaced field
            fd.field('padsreplaced').hidden = true;
            // Hide the padsrecordered field
            fd.field('padsrecordered').hidden = true;
        }
    }

    // Calling hideOrShowaedpadsexpired when the battery value changes
    fd.field('aedpadsexpired').$on('change', hideOrShowaedpadsexpired);

    // Calling hideOrShowaedpadsexpired on form loading
    hideOrShowaedpadsexpired();
// extra bracket
//{

});

If the code doesn't work, please check the browser console. You will see the errors that will tell you why the code doesn't work and you will be able to debug it.

1 Like
5

Thank you SO MUCH for all your help!!!

1 Like