Plumsail Forms - Show A Single Line Text Field When A Certain Option Is Selected In Choice Field

Forms
1

Hi I just want to do a simple thing which is normally easy in SharePoint Default Forms.

I have a Choice Field (single choice selection)
I have a Text Field (Single Line)

The Choice Field is called "Type Of Request"
The Single Line Text Field is called "Other"

Can someone please provide the JavaScript I need to use in Plumsail Forms to do the following:

Show "Other" field only when "Type Of Request = Other".

Can you also advise whether the code needs to be inserted into one of the default functions present in the form or can be pasted in as its own function.

I am new to Plumsail Forms so if you could please explain in simple terms that would be great.

2

Hello @melo,

Sure, you can use the code below to show or hide a field based on the value of another field. Make sure to use internal field names in the code.


function showHideOther() {

    if(fd.field('TypeOfRequest').value == 'Other'){
        $(fd.field('Other').$parent.$el).show();
    }
    else {
        $(fd.field('Other').$parent.$el).hide()
    }
}

fd.spRendered(function () {
    //сalling the function on form load
    showHideOther();
    
    //Call the function when the field value changes
    fd.field('TypeOfRequest').$on('change', showHideOther);

});

You can define showHideOther() function outside of the spRendered() event. Call the function on form load and when the field value changes within spRendered() event as shown in the code.

3

Hi,

Firstly thank you for getting back to me so quickly.

I have tried the code as you said but still doesn't work. The "Other" field is still displayed on form load without me having to select the value "Other" from the "TypeOfRequest" Field.

As I am new Plumsail forms I think I may doing something that is a beginners mistake.

I have attached two items to this reply. One which shows you the NewItem Form and the other shows the default content behind the "JS" button on the Plumsail Form Designer.

Can you please identify to me where the code you have provided should be placed for it to work.

I can confirm that the internal names (SharePoint names) of the field are correct.

SAR New Item Form
SAR New Item Form502×618 12 KB
SAR New Item JS.txt (1.7 KB)

4

Hello @melo,

You need to add the code to the JavaScript Editor >> Current Form tab. Please see the screenshot below.

image
image594×574 25.4 KB

6

Hi @mnikitina I am using the Online Form Designer and applying the code here.

The naming conventions have changed since speaking to you last.

I have now got a single choice field called "SubmissionGenreOne"

And the text field that needs to show once "SubmissionGenreOne=Other" is called "OtherOne"

I tried your code with changing the names of the fields and still doesn't work.

7

Hello @melo,

Please share the screenshot of the code you are using in The JavaScript editor.

8

function showHideOther() {

if(fd.field('SubmissionGenreOne').value == 'Other'){
    $(fd.field('OtherOne').$parent.$el).show();
}
else {
    $(fd.field('OtherOne').$parent.$el).hide()
}

}

fd.spRendered(function () {
//сalling the function on form load
showHideOther();

//Call the function when the field value changes
fd.field('SubmissionGenreOne').$on('change', showHideOther);

});

9

@melo,

Please share the screenshot of the JavaScript editor with the code. I assume you've added the code to the comments and that is why the code is not working.