Question

Javascript for Outputting "N/A" in a text field based on a choice

  • 9 June 2023
  • 6 replies
  • 70 views

Badge +4

I want to have a single line text field to populate with N/A if a certain choice (multi-choice) is selected.

 

For example:

Choices:

Apple

Oranges

Pear

 

Apple Stock: In Stock

Orange Stock: In Stock

Pear Stock: In Stock

-----------------------------------------------

If apple is selected, N/A should appear for Apple Stock: N/A. If both apple and orange are selected, N/A should appear for both Apple Stock and Orange Stock.

 

Currently, I have this for Javascript, and nothing happened upon the choice selection (still a newbie). I have assigned the Javascript variables - one to the choice control (varFruits), another to the line section (varApple):

NWF.FormFiller.Events.RegisterAfterReady(function () { 
NWF$('#'+varFruits).change(function(){
if (NWF$('#'+varFruits + ' input:checked').val() == 'Apple'){ NWF$('#'+varApple).val('N/A');
}
})
})

Thank you for any insight!


6 replies

Userlevel 5
Badge +13

Hi @vities 

 

i have a question, do you need to edit this text when it has been populated? If not then a calculated value field will serve you much better here without using any JavaScript, you can just use a formula. 
 

if you do need to edit the text, for classic forms designer sadly JavaScript is the only option, 

 

Anyways, 

I think in your script the issue comes with the if statement looking at checked and then assessing the value of the check to set the status of each fruit, I don’t think it works this way.  

The val() function used on the checkbox input gets the value of the first checked box only. When working with multi-choice checkboxes, it’s possible to have multiple options selected so a single level if statement will almost always be incorrect. 

To fix your script, you should iterate through each checked option and then take action accordingly.


        

NWF.FormFiller.Events.RegisterAfterReady(function () {
NWF$('#'+varFruits).change(function(){
// Reset all values to 'In Stock' first
NWF$('#'+varApple).val('In Stock');
NWF$('#'+varOrange).val('In Stock');
NWF$('#'+varPear).val('In Stock');

// Then go through each checked option
NWF$('#'+varFruits + ' input:checked').each(function(){
if (this.value == 'Apple') {
NWF$('#'+varApple).val('N/A');
} else if (this.value == 'Oranges') {
NWF$('#'+varOrange).val('N/A');
} else if (this.value == 'Pear') {
NWF$('#'+varPear).val('N/A');
}
});
});
});

 

Badge +4

Hi Jake,

   Thanks for responding! In regards to this query: “do you need to edit this text when it has been populated? “ Unfortunately, yes, the current formatting of the form is shown below, in which to standardize user entries, they can either enter stock #, or if out of stock is checked - it’ll fill out with N/A automatically:

 

Thank you for correcting my script and proposing/amending the script. Still a Javascript newbie - greatly appreciated for the insights!

Just tested the script and unfortunately it did not output correctly:

  • For this part: “// Reset all values to 'In Stock' first NWF$('#'+varApple).val('In Stock');” ← in this case if there’s no “In stock” option, would it be better to default the value to be an empty string value? 
  • I did a calculated value to see the output of the multi choice control, would I need to change what the value == to include the brackets, []?

 

Thank you for your time!

Userlevel 5
Badge +13

Ah, I misunderstood the requirement, let me validate it and get back to you. 

Userlevel 5
Badge +13

Hi @vities 

 

I have reviewed and tested the code and I made some spelling mistakes with the variables, I have also added in an initial setting of the fields to ‘In Stock’. 

 

Now all fields are set to In Stock and as items are checked the change to N/A.

 

NWF.FormFiller.Events.RegisterAfterReady(function () {
NWF$('#' + varApple).val('In Stock');
NWF$('#' + varOrange).val('In Stock');
NWF$('#' + varPear).val('In Stock'); NWF$('#' + varFruits).change(function () {
// Reset all values to 'In Stock' first
NWF$('#' + varApple).val('In Stock');
NWF$('#' + varOrange).val('In Stock');
NWF$('#' + varPear).val('In Stock');

// Then go through each checked option
NWF$('#' + varFruits + ' input:checked').each(function () {
if (this.value == 'Apples') {
NWF$('#' + varApple).val('N/A');
} else if (this.value == 'Oranges') {
NWF$('#' + varOrange).val('N/A');
} else if (this.value == 'Pears') {
NWF$('#' + varPear).val('N/A');
}
});
});

On form load this is the view:

 

As items are checked they are set to N/A

 

And unchecked they are set back to in stock.

 

 

Does this match your requirement?

Badge +4

Hi Jake,

   Thank you so much again for your help/reformatting! Is it possible to leave the initial setting of the fields to be blank, or do they need to be defined with a value?

If the item is not out of stock, they’ll enter a numeric value (i.e. stock quantity). Otherwise, when they checkmark the boxes, it’s to denote that “Hey, it’s out of stock!” therefore the stock quantity is N/A.

 


 Also, even when I test the script, I’m not able to get it to output in the same format as yours:

Copied the code into Settings - Form (Custom Javascript):

Selected the multi-choice field, and assigned the variable to be: 

Selected the text field for Apples Stock, and assigned the variable to be:

Am I doing something wrong?

Thanks!

 

 

Userlevel 5
Badge +20

Hi @Jake 
Any more advice you can give here?

Reply