Make text appear once a field has been filled

Forms
1

Hi,

Is it possible to make some text appear once the user has entered the information in a field?

When the user puts in the termination date, I want the text below to pop-up below the field.

image
image855×171 10.5 KB

Please provide code for this.

Thank you in advance!

2

Dear @Qman,
Something like this should work:

fd.spRendered(function() {
    function showHideControl() {
        if (fd.field('TerminationDate').value) {
            //show the control
            $(fd.control('Text1').$el).show();
        }
        else{
            //hide the control
            $(fd.control('Text1').$el).hide();
        }
    }

    // Calling showHideControl when Status value changes
    fd.field('TerminationDate').$on('change',showHideControl);

    // Calling showHideControl on form loading
    showHideControl();
});
3

Hi @mnikitina,

Does this code work for Rich Text fields? I am using a rich-text field for the message in the above picture. The code doesn't seem to be working.

4

Dear @Qman,
What exactly doesn't work? The hiding part? You can always just give a CSS class to the field/control that you want to hide: hiding-class
image

Then use this class to hide the field/control:

fd.spRendered(function() {
    function showHideControl() {
        if (fd.field('TerminationDate').value) {
            //show the control
            $('.hiding-class').show();
        }
        else{
            //hide the control
            $('.hiding-class').hide();
        }
    }

    // Calling showHideControl when Status value changes
    fd.field('TerminationDate').$on('change',showHideControl);

    // Calling showHideControl on form loading
    showHideControl();
});
5

Hi @Nikita_Kurguzov,

I have assigned the Rich Text field a class and it doesn't seem to be working. Is there an issue with the code?

Please the screen shots:

image
image

image
image679×873 39.6 KB

6

Dear @Qman,
Seems fine, please, check browser's console for errors.

8

Dear @Qman,
This is the only error that interests us at the moment, as there is something wrong in the custom JavaScript code:
image

Seems like one of the field's you're getting the value from is undefined, which most likely means that it uses a different Name from the one specified in the code. Check Names for Termination_x0020_Date and MaskedInput1

I would also recommend testing code one piece at the time, so you know that each part is working, as there is quite a bit of code on your form currently. You can comment it out or copy it to another file, to ensure that it doesn't interfere with the code you're testing.

9

Nope, it's not working. I have removed the other codes from my form to see if it behaves but no luck. I have changed the CSS class as well but no luck.

image

10

Dear @Qman,
The CSS is not the issue, although you're missing a dot in your code, it should be with a dot:

$('.term').show();
$('.term').hide();

The main issue is this line according to console:

image

Check the Internal Name of the Date column and make sure it's correct:
image

1 Like
11

Oh my Goddd! You are a life saver! Thank you soooooo much!