Show fields by selected choice

Forms
1

Hi,

I had a problem with a choice field. When I select Customer in a single choice field, two text fields should be displayed. For all other selection they should not be displayed.

The script doesn't work.

function showHideCustomerNumber() {

if(fd.field('PleaseSelect').value == 'Customer'){
    $(fd.field('CustomerNumber').$parent.$el).show();
    $(fd.field('VATNumber').$parent.$el).show();
}
else {
    $(fd.field('CustomerNumber').$parent.$el).hide()
    $(fd.field('VATNumber').$parent.$el).hide()
}

}

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

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

});

Draft
Draft1041×736 61.9 KB

2

The original script you provided is generally correct, but there were a couple of points that could cause issues:

  1. Field Names: It's important to ensure that the field names in the script exactly match the internal names of the fields in your Plumsail form. These names are case-sensitive.
  2. JQuery vs. Vanilla JavaScript: The original script used jQuery ($(...)) to show and hide elements. This should work if jQuery is available and correctly loaded in your environment. However, if there are any issues with jQuery not being available or if you prefer to use vanilla JavaScript, my revised script used standard JavaScript to handle showing and hiding the fields.
  3. Event Listener Binding: The original script correctly binds an event listener to the change event of the 'TypeOfRequest' field. However, in your case, it seems you meant to bind this to the 'PleaseSelect' field instead, based on the context of your question.

Updated Script w/ JS

function showHideCustomerNumber() {
    if (fd.field('PleaseSelect').value == 'Customer') {
        // Show the Customer Number and VAT Number fields
        fd.field('CustomerNumber').$parent.$el.style.display = '';
        fd.field('VATNumber').$parent.$el.style.display = '';
    } else {
        // Hide the Customer Number and VAT Number fields
        fd.field('CustomerNumber').$parent.$el.style.display = 'none';
        fd.field('VATNumber').$parent.$el.style.display = 'none';
    }
}

fd.spRendered(function () {
    // Call the function on form load
    showHideCustomerNumber();

    // Call the function when the 'PleaseSelect' field value changes
    fd.field('PleaseSelect').$on('change', showHideCustomerNumber);
});

Explanation:

  1. Field Names: Ensure the field names 'PleaseSelect', 'CustomerNumber', and 'VATNumber' match exactly with those in your form. These names are case-sensitive.
  2. Field Display Control:
  • The $parent.$el.style.display = 'none'; method is used to hide the field.
  • The $parent.$el.style.display = ''; (empty string) is used to show the field, which resets it to its default display.
  1. Event Binding:
  • The script runs showHideCustomerNumber() on form load to ensure the correct fields are displayed based on the initial value of the 'PleaseSelect' field.
  • The script also listens for changes to the 'PleaseSelect' field and runs showHideCustomerNumber() whenever a change is detected.

Revised Script with jQuery:

If you prefer to keep using jQuery and confirm that it’s correctly loaded:

function showHideCustomerNumber() {
    if (fd.field('PleaseSelect').value == 'Customer') {
        // Show the fields using jQuery
        $(fd.field('CustomerNumber').$parent.$el).show();
        $(fd.field('VATNumber').$parent.$el).show();
    } else {
        // Hide the fields using jQuery
        $(fd.field('CustomerNumber').$parent.$el).hide();
        $(fd.field('VATNumber').$parent.$el).hide();
    }
}

fd.spRendered(function () {
    // Call the function on form load
    showHideCustomerNumber();

    // Bind the function to the 'PleaseSelect' field value change
    fd.field('PleaseSelect').$on('change', showHideCustomerNumber);
});

Hope this helps!

3

I use a public form. Can I use the script for the public form?

Best wishes
Tom

4

@TWendt

  • Event Handling in Public Forms:
    Public forms in Plumsail use fd.rendered() instead of fd.spRendered() to ensure the script runs after the form has fully loaded. This is because public forms are rendered differently compared to SharePoint forms.

  • jQuery Dependency:
    If you are using jQuery in your script (as in your original script), ensure that jQuery is either loaded by default in the public form or include it manually if necessary. If jQuery is not available, you may need to use vanilla JavaScript instead.