CODEWITHSUNDEEP
javascriptdrop-down-menunetsuitesuitescript
thomas93
thomas93

Reputation: 43

How do I make a text box appear after selecting an option from a drop-down menu in SuiteScript?

I am new to SuiteScript. Right now I am trying to make a form using a Suitelet. In this form I want to add logic to the Suitelet where if a user selects an option from a dropdown menu, then that option will make a textbox appear for the user to enter more details in that selection. Here is my code so far.

function suitelet(request, response) {

    //create form
    var form = nlapiCreateForm('Form Title');

    var a = 'a';
    var b = 'b';
    var other = 'Other';

    // adds dropdown menu
    var selectField = form.addField('custpage_menu', 'select', 'Random Dropdown Menu');
    selectField.addSelectOption('', '', false);
    selectField.addSelectOption(a, a, false);
    selectField.addSelectOption(b, b, false);
    selectField.addSelectOption(other, other, false);
    selectField.setMandatory(true);

    //render a button for the user to submit form
    form.addSubmitButton('Submit');

    //load form
    response.writePage(form);
}

I would like the text box to appear when the user selects the option "Other". So in this case, the code line selectField.addSelectOption(other, other, false); represents the selection option labeled as "Other". This selection happens before the user clicks the submit button, so I don't think any POST requests are happening at this point.

I am not exactly sure what kind of event fires whenever a user selects an option from a dropdown menu. If I can capture that event through my code, then my hope is that I should be able to make a text box appear based on the selection.

EDIT: I forgot to mention one thing. I am not working with records at all. This is just a pure form that is generated by a Suitelet.

Upvotes: 4

Views: 2118

Answers (2)

Emerson Minero
Emerson Minero

Reputation: 608

You need to associate a client script to your Suitelet. Then use a field change function to capture the event when the user select an option from your dropdown. You must hide the text box when you create it on the suitelet and then play with the field.isDisplay property in your client like this: 

function fieldChanged(){ 
   if (context.fieldId == 'custpage_menu') {
      var boxField = context.currentRecord.getField('custpage_your_text_box_id');
      if(other was selected){
          boxField.isDisplay = true;
      } else {
          boxField.isDisplay = false;
      }
   } 
}

I am adding here the code in 1.0, I though it was in 2.0 at the beginning, the approach is the same, I will leave the 2.0 version in case it is useful for someone else: 

function clientFieldChanged(type, name, linenum){
   if(name == 'custpage_menu') {
      var optionSelected = nlapiGetFieldValue('custpage_menu');
      if(other was selected){
         nlapiGetField('custpage_your_text_box_id').setDisplayType('normal');
      } else{
         nlapiGetField('custpage_your_text_box_id').setDisplayType('hidden');
      }
   }
}

Upvotes: 2

Edwin Thomas
Edwin Thomas

Reputation: 486

Using a client Script you can hide and show the field in Suitelet form. So Create a field and hide that field using Client script or suitelet only (setdisplaytype).

In client script you can define field change function and if the option is others then show the the text field.

I am adding some reference code snippets for functions

For setting a client script in suitelet 

form.clientScriptFileId = '264221';

For Field change in Client side

  /*Field Change event*/
               function fieldChanged(scriptContext) {
                    var records = scriptContext.currentRecord;
                    if (scriptContext.fieldId == "datefiltertype") {
                        var type = records.getValue({
                            fieldId: 'datefiltertype'
                        });

                        if (type == "NOTWITHIN" || type == "WITHIN") {
                            jQuery("#fromdate_fs_lbl_uir_label").html("To");
                            jQuery("#todate_fs_lbl_uir_label").html("From");
                            jQuery("#fromdate_fs_lbl_uir_label").show();
                            jQuery("#fromdate").show()
                        } else {
                            jQuery("#fromdate").val("");
                            jQuery("#fromdate_fs_lbl_uir_label").hide();
                            jQuery("#fromdate").hide();
                        }
                    }
                }

Upvotes: 1

Related Questions