try following function

function updateBox() {
       NWF$("#" + riskBox).val(testValue);
}‍‍‍‍‍‍

form refresh might be caused by error in javascript or rules. check developer console for errors reported

As a bonus: If anyone can suggest how to make that text box non user editable (only by the scrip)

create a formatting rule with a formula that always evaluates to true and set the action to Disable

‌ ‌ ‌ ‌

Thanks for the code adjustment but I can't tell if it works because the page refreshes on the button press. I have checked the console and there are no errors being reported (probably because the page is refreshing). 

I tried this code adjustment applied to the Client Click Property from another thread that stops the page refreshing but doesn't trigger the change I want.

NWF$(document).ready(function() {
function updateBox() {
NWF$("#" + riskBox).value("HELP");
}
});

Again, no errors are reported in the console.

I have tested the standard JS code without Nintex wrappers in an HTML form and it works perfectly. 

A bit stuck here. 

Just wanted to expand on my plans for this function.

I have written a javaScript function that I want to trigger on the button press. It does some evaluation of form fields and then calculates a result based on internal rules (in the script). It then outputs the result to a box on the form (not user editable). All this is done before the form is submitted and the workflow takes over to handle routing for approvals.

The function is pretty big and needs I believe should be stored in the Form Settings Custom JavaScript section. I need to call that function when the button is pressed to populate the result box.

Something I am having trouble understanding properly is how Nintex forms requires it's own wrapper function around custom JavaScript and when it should be used. From what I can see it is a function wrapper so I assume i can just write my entire function within that Nintex wrapper, then call it on the button press?

Do I need to call the Nintex wrapper function by a custom name instead?

Any help is appreciated.

Calling the wrapper by a custom name didn't work. Do I need to create an onClick function for the button in the main JavaScript section?

If so how do I stop the button from refreshing the page?

UPDATE: So it looks like the chosen field values are being retained in the page reload but the function is't being fired.

place the function definition out of the ready() event handler, it not visible out of its scope.

....value('HELP')  should have been ....val('HELP')

Hi Marian

Thanks again for your assistance, but it still doesn't work. 

The button properties are: 

The page reloads on the button press and there are no console errors reported. After the page refresh there is no value in the single line text box.

Am I still doing something wrong with the code or button properties?

Update: There is a syntax error reported when the page loads but it doesn't look related to my code:

Many thanks.

once again

place the function definition out of the ready() event handler, it not visible out of its scope.

ie, remove NWF$(document).ready wrapper and leave there just function definition.

Hi Marian

It's working now. 

Now it reads:

var formValue = "A";
function updateBox() {
NWF$("#" + riskBox).val(formValue);
};

The page no longer refreshes and the value populates. So this leaves me a bit confused. When do I need to use the "NFW$" and when do I not? 

I will try it with my larger code to check the functionality.

Thank you for your help.

NWF$ just extends standard jQuery library

above simple example would work with pure jQuery reference like $('#'+riskBox)... or pure javascript code like document.getElementById("#"+riskBox)....

but in some more complex contructs that go deeper into nintex's internals you would need to use NWF$.

so it's 'safer' to get used to work with NWF$.

Hi Marian

I have tried this with a larger script comprised of mostly "If" and "If Else" statements but I have the same problem as before. From past experience, it looks as though I am missing some Nintex wrappers? 

How can I identify where to put them?

Example 1:

if (nFieldPortfolioSector === "") {
alert("Validation Error: A Portfolio/Sector must be selected to continue");
throw new Error("Validation Error: Portfolio/Sector");
} else if (nFieldLeadTheme === "") {
alert("Validation Error: A Lead Theme must be selected to continue");
throw new Error("Validation Error: Lead Theme");

Example 2: 

if ((nFieldFundingSource === "Innovate" && totalRiskScore > 100) || (nFieldFundingSource === "Other Funding" && totalRiskScore > 100) || (nFieldFundingSource === "Horizon" && totalRiskScore > 100)) {
planType = "A";

} 

else if ((nFieldFundingSource === "Innovate" && totalRiskScore > 70 && totalRiskScore < 100) || (nFieldFundingSource === "Other Funding" && totalRiskScore > 70 && totalRiskScore < 100) || (nFieldFundingSource === "Horizon" && totalRiskScore > 70 && totalRiskScore < 100)) {
planType = "B";
}

Apologies, I am new to using JS in Nintex forms. Do I use it on every If statement or alert? Is there a guide somewhere on where to use the NWF$ ? 

Again, apologies for my lack of knowledge here.

what are variables you use within the code (nFieldPortfolioSector , nFieldLeadTheme ...)?

item properties? named controls? js variables?

what/how these piece of codes are triggered?

what errors do you get on developer console (related to your code)?

can you post screenshot of how you configured custom javascript? and whole script from in there?

The variables are choice fields in the form that are given JS variable names:

There are some script specific variable used for storing values for a calculation in the script that are not in the form.

The idea is that the user inputs the information in the fields and then clicks a button to get a recommendation based on those choices. There are quite a few rules hat determine what recommendation they get. That recommendation is then shown in  a box at the end of the form.

There are no errors reported o the console. Just a page reload like what was happening on the test code. Just some warnings about unmatched html end tags:

The JS is configured here:

A button on the form calls the JS function:

The whole script is (It's not very nice. I am a beginner): 

//Number conversion
var numExistCustomer = 0;
var numExportControl = 0;
var numSecurityControl = 0;
var numProjectValue = 0;
var numTechnicalCapability = 0;
var numScopeClarity = 0;

//Risk Rating
var riskRating = "";
var planType = "";

//Populate form fields function

function getPlan() {

//Check for empty Fields
if (nFieldPortfolioSector === "") {
alert("Validation Error: A Portfolio/Sector must be selected to continue");
throw new Error("Validation Error: Portfolio/Sector");
} else if (nFieldLeadTheme === "") {
alert("Validation Error: A Lead Theme must be selected to continue");
throw new Error("Validation Error: Lead Theme");
} else if (nFieldBusinessUnit === "") {
alert("Validation Error: A Business Unit must be selected to continue");
throw new Error("Validation Error: Business Unit");
} else if (nFieldFundingSource === "") {
alert("Validation Error: A Funding Source must be selected to continue");
throw new Error("Validation Error: Funding Source");
} else if (nFieldExistingCustomer === "") {
alert("Validation Error: Existing Customer field must be selected to continue");
throw new Error("Validation Error: Existing Customer");
} else if (nFieldSectorAlignment === "") {
alert("Validation Error: Sector Alignment field must be selected to continue");
throw new Error("Validation Error: Sector Alignment");
} else if (nFieldTechnicalCapability === "") {
alert("Validation Error: Technical Capability field must be selected to continue");
throw new Error("Validation Error: Technical Capability");
} else if (nFieldScopeClarity === "") {
alert("Validation Error: Scope Clarity field must be selected to continue");
throw new Error("Validation Error: Scope Clarity");
}

//Translate field strings to numbers
//Translate Existing Customer
if (nFieldExistingCustomer === "Yes") {
numExistCustomer = 1 * 15;
} else if (nFieldExistingCustomer === "No") {
numExistCustomer = 2 * 15;
} else {
numExistCustomer = 0;
}

//Translate Export Control
if (nFieldExportControl === "Yes") {
numExportControl = 3 * 6;
} else if (nFieldExportControl === "Unsure") {
numExportControl = 2 * 6;
} else if (nFieldExportControl === "No") {
numExportControl = 1 * 6;
} else {
numExportControl = 0;
}

//Translate SecurityControl
if (nFieldSecurityControl === "Yes") {
numSecurityControl = 3 * 6;
} else if (nFieldSecurityControl === "Unsure") {
numSecurityControl = 2 * 6;
} else if (nFieldSecurityControl === "No") {
numSecurityControl = 1 * 6;
} else {
numSecurityControl = 0;
}

//Translate Project value
if (nFieldProjectValue > 20000) {
numProjectValue = 2 * 3;
} else if (nFieldProjectValue < 20000) {
numProjectValue = 1 * 3;
} else {
numProjectValue = 0;
}

//Translate Technical Capability
if (nFieldTechnicalCapability === "High") {
numTechnicalCapability = 3 * 9;
} else if (nFieldTechnicalCapability === "Medium") {
numTechnicalCapability = 2 * 9;
} else if (nFieldTechnicalCapability === "Low") {
numTechnicalCapability = 1 * 9;
} else {
numTechnicalCapability = 0;
}

//Translate Scope Clarity
if (nFieldScopeClarity === "Low") {
numScopeClarity = 3 * 15;
} else if (nFieldScopeClarity === "High") {
numScopeClarity = 1 * 15;
} else {
numScopeClarity = 0;
}

//Calculate Total Risk Score
var totalRiskScore = numExistCustomer + numExportControl + numSecurityControl + numProjectValue + numTechnicalCapability + numScopeClarity;

//Calculate Risk Rating
if (totalRiskScore > 100) {
riskRating = "H";
} else if (totalRiskScore < 70) {
riskRating = "L";
} else if (totalRiskScore > 70 && totalRiskScore < 100) {
riskRating = "M";
} else {
totalRiskScore = 0;
}

//Check fast Track Criteria - Requires function to be called with form button*
if (nFieldProjectType === "Fast Track" && nFieldProjectDuration != "< 4 Weeks") {
alert("Validation Error: Your project does not meet the Fast track criteria. Duration must be < 4 weeks for fast Track projects. Review cost and duration before continuing.");
} else if (nFieldProjectType === "Fast Track" && numProjectValue > 20000) {
alert("Validation Error: Your project does not meet the Fast track criteria. Value must be below 20000 for Fast Track projects. Review cost and duration before continuing.");
} else if (totalRiskScore === 0) {
alert("Validation Error: Check the following fields for selections: Exisiting Customer, Export Control, Security Control, Project Value, Technical Capability & Scope Clarity.");
} else if
((nFieldFundingSource === "Innovate UK" && totalRiskScore > 100) || (nFieldFundingSource === "Other UK Public Funding" && totalRiskScore > 100) || (nFieldFundingSource === "Horizon 20/20 or EU" && totalRiskScore > 100)) {
planType = "A";
}
else if ((nFieldFundingSource === "Innovate UK" && totalRiskScore > 70 && totalRiskScore < 100) || (nFieldFundingSource === "Other UK Public Funding" && totalRiskScore > 70 && totalRiskScore < 100) || (nFieldFundingSource === "Horizon 20/20 or EU" && totalRiskScore > 70 && totalRiskScore < 100)) {
planType = "B";
}
else if ((nFieldFundingSource === "Innovate UK" && totalRiskScore < 70) || (nFieldFundingSource === "Other UK Public Funding" && totalRiskScore < 70) || (nFieldFundingSource === "Horizon 20/20 or EU" && totalRiskScore < 70)) {
planType = "C";
}
else if ((nFieldFundingSource === "Direct Customer Funding" && totalRiskScore > 100) || (nFieldFundingSource === "Membership Drawdown" && totalRiskScore > 100)) {
planType = "D";
}
else if ((nFieldProjectDuration === "12 Weeks" && nFieldFundingSource === "Direct Customer Funding" && totalRiskScore > 70 && totalRiskScore < 100) || (nFieldProjectDuration === "12 Weeks" && nFieldFundingSource === "Membership Drawdown" && totalRiskScore > 70 && totalRiskScore < 100) || (nFieldProjectDuration === "> 12 Weeks" && nFieldFundingSource === "Direct Customer Funding" && totalRiskScore > 70 && totalRiskScore < 100) || (nFieldProjectDuration === "> 12 Weeks" && nFieldFundingSource === "Membership Drawdown" && totalRiskScore > 70 && totalRiskScore < 100)) {
planType = "E";
}
else if ((nFieldProjectDuration === "< 12 Weeks" && nFieldFundingSource === "Direct Customer Funding" && totalRiskScore < 70) || (nFieldProjectDuration === "< 12 Weeks" && nFieldFundingSource === "Membership Drawdown" && totalRiskScore < 70)) {
planType = "F";
}
else if ((numProjectValue < 1000) || (nFieldForum === "Yes") || (nFieldProjectDuration === "< 4 Weeks")) {
planType = "G";
}
else if ((nFieldFundingSource === "Core Research Project") || (nFieldFundingSource === "Internal Capability Funding") || (nFieldFundingSource === "HVM Catapult Funding")) {
planType = "H";
}
else if ((nFieldBusinessUnit === "BLC") && (nFieldLeadTheme !== "") && (nFieldFundingSource === "Direct Customer Funding") || (nFieldBusinessUnit === "BLC") && (nFieldLeadTheme !== "") && (nFieldFundingType === "Fixed Price")) {
planType = "I";
}
else if ((nFieldBusinessUnit === "BLC") && (nFieldLeadTheme === "") && (nFieldFundingSource === "Direct Customer Funding") || (nFieldBusinessUnit === "BLC") && (nFieldLeadTheme === "") && (nFieldFundingType === "Fixed Price")) {
planType = "J";
}

//Write values to Nintex form boxes
NWF$("#" + riskBox).val(riskRating);
NWF$("#" + planBox).val(planType);

}

Moved this question to an unanswered thread here:

Pains using JavaScript in Nintex Forms 

so I posted some hintsto the other thread