Skip to main content
kristinem68268172
kristinem68268172
New Participant
August 31, 2017
Question

Conditional required fields based on a response in a dropdown box

  • August 31, 2017
  • 2 replies
  • 19784 views

I am in need of assistance creating a javascript that will set fields to required based on a response in a drop down field. 

I have an "Action" dropdown field where the user selects the action the want "Add", "Delete", "Change", "Other".  In the event of "Add" selected I need certain fields required, in the event "Delete" is selected I need fewer fields to appear as required and so on.

I have seen some similar javascripts for radial button responses but have had difficulty translating.

    This topic has been closed for replies.

    2 replies

    M
    Michael26950565cpl9
    New Participant
    October 19, 2023

    Hello all, thanks for the helpful tips, but running into some issues with multiple conditional formatting. I am trying to have a conditional form fill where if you select a drop down item, it forces some fields to be required, and if you select other fields it simply is not required. I have followed the JS in these chats, but still do not require certain fields to be required properly. Also, when preparing the form, should the box for Required be checked or not on Properties screen for that each of these fields, or is the script essentially supposed to handle that automatically - I have tried both ways and no luck?

     

    Goal is:

    1. IF Default - Bill Pay Check (3-7 Business Days) is selected, it does not require any of the f1-f5 fields to be filled in. 
    2. IF Expedited - Bill Pay ACH (2-3 Business Days) is selected, it does require all f1-f5 fields to be filled in
    3. IF Express - In House Wire (2 Business Days) is selected, it does require all f1-f5 fields to be filled in
    4. IF Overnight - In House Check and FedEx (1-2 Business Days) is selected, it does not require any of f1-f5 fields to be filled in. 

     

    I thought I have the correct if/then statements below but It's definitely not functioning how I want.

     

    Here's my script

    var f1 = this.getField("Bank Name");
     
    var f2 = this.getField("Account Name (Type)");
     
    var f3 = this.getField("Account Number");
     
    var f4 = this.getField("ABA Routing Wire");
     
    var f5 = this.getField("ABA Routing ACH");
     
    else if (event.value=="Default - Bill Pay Check (3-7 Business Days)") {
     
        f1.readonly = true;
     
        f2.readonly = true;
     
        f3.readonly = true;
     
        f4.readonly = true;
     
        f5.readonly = true;
     
        f1.required = false;
     
        f2.required = false;
     
        f3.required = false;
     
        f4.required = false;
     
        f5.required = false;
     
    } else if (event.value=="Expedited - Bill Pay ACH (2-3 Business Days)") {
     
        f1.readonly = false;
     
        f2.readonly = false;
     
        f3.readonly = false;
     
        f4.readonly = false;
     
        f5.readonly = false;
     
        f1.required = true;
     
        f2.required = true;
     
        f3.required = true;
     
        f4.required = true;
     
        f5.required = true;
     
    } else if (event.value=="Express - In House Wire (2 Business Days)") {
     
        f1.readonly = false;
     
        f2.readonly = false;
     
        f3.readonly = false;
     
        f4.readonly = false;
     
        f5.readonly = false;
     
        f1.required = true;
     
        f2.required = true;
     
        f3.required = true;
     
        f4.required = true;
     
        f5.required = true;
     
     
    } else if (event.value=="Overnight - In House Check and FedEx (1-2 Business Days)") {
     
        f1.readonly = true;
     
        f2.readonly = true;
     
        f3.readonly = true;
     
        f4.readonly = true;
     
        f5.readonly = true;
     
        f1.required = false;
     
        f2.required = false;
     
        f3.required = false;
     
        f4.required = false;
     
        f5.required = false;
    }
      Nesa Nurani
      Nesa Nurani
      Community Expert
      October 20, 2023

      You can't start with 'else if' so change first 'else if' into 'if'.

        M
        Michael26950565cpl9
        New Participant
        October 23, 2023

        Put the script in dropdown field as 'Validation' script.

        Go to dropdown field properties, select 'Validate' tab and click on 'Run custom validation script', click on 'Edit' and paste script inside.


        Oh heck yes! Thank you!!!! 

        W
        wtripoli
        Inspiring
        July 3, 2018

        I'm trying to develop something very similar: for the drop down, if one selects "Yes, I am", two text fields (already visible) will become required, and a third will become read-only.

        If the selection is "No, I am not," the third text field will be required and the other two text fields will become read-only.

        The dropdown selection-to-required field relationship seems very specific, as I haven't been able to adapt any of the solutions for other box types.

        Thanks!

          try67
          try67
          Community Expert
          July 3, 2018

          Use this code as the custom validation script of the drop-down field (adjust the field names as needed):

          var f1 = this.getField("Field1");
          var f2 = this.getField("Field2");
          var f3 = this.getField("Field3");
          if (event.value=="Yes, I am") {
              f1.readonly = false;
              f2.readonly = false;
              f3.readonly = true;
              f1.required = true;
              f2.required = true;
              f3.required = false;
          } else if (event.value=="No, I am not") {
              f1.readonly = true;
              f2.readonly = true;
              f3.readonly = false;
              f1.required = false;
              f2.required = false;
              f3.required = true;
          }

          Make sure to tick the option to commit the selected value of the drop-down immediately (under the field's Properties, Options tab).

          W
          wtripoli
          Inspiring
          July 3, 2018

          Thank you so much! I made some adjustments for some additional fields and functionality and it worked perfectly. Thank you for answering so quickly!

          var f1 = this.getField("SuperPro");
          var f2 = this.getField("SupervisingProfessionalName");
          var f3 = this.getField("SPNumber");
          var f4 = this.getField("Initial");
          if (event.value=="select one") {
              f1.readonly = false;
              f2.readonly = true;
              f3.readonly = true;
              f4.readonly = true;
              f1.required = false;
              f2.required = false;
              f3.required = false;
              f4.required = false;
          }
          if (event.value=="Yes, I am") {
              f1.readonly = false;
              f2.readonly = false;
              f3.readonly = false;
              f4.readonly = true;
              f1.required = false;
              f2.required = true;
              f3.required = true;
              f4.required = false;
          } else if (event.value=="No, I am not") {
              f1.readonly = false;
              f2.readonly = true;
              f3.readonly = true;
              f4.readonly = false;
              f1.required = false;
              f2.required = false;
              f3.required = false;
              f4.required = true;
          }

          Terms & ConditionsAccessibility statement
          Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices