cancel
Showing results for 
Search instead for 
Did you mean: 
SzczepanSmolen
Nintex Newbie

Extracting value from field in Form to be used in JS

Jump to solution

Dear Nintex community 

I am starting my adventure with Nintex, JS and jQuery.

I've spent alredy few hours trying to find solution this but seems that I still missing the concept...

 

So what I have:

1. List on sharepoint with column "State"

 

2019_08_09_08_53_44_ZipCodes_All_Items.png

 

2. In forms I've assigned as follows:

2019_08_09_08_56_22_Nintex_Forms_Designer_ZipCodes_Item.png

3. I've written this code in CustomJS field:

NWF.FormFiller.Events.RegisterAfterReady(function(){
var Sstate = NWF$('#' + varState);
console.log("Sstate= " + Sstate + " Sstate.val()= " +Sstate.val()+ " Sstate.text()= " + Sstate.text() + " varState= " + varState);
});

4. and this is what I received in console log when I am opening the form: 

2019_08_09_09_01_33_ZipCodes_00210.png

Sstate= [object Object]  Sstate.val()= undefined  Sstate.text()=  varState= ctl00_ctl54_g_2e434ee3_cc48_4bca_87f0_294c48339002_ctl00_ListForm1_formFiller_FormView_ctl38_cd490519_949d_48e6_90af_d0f96aacd0a9

What the hell I am doing wrong? Smiley Happy Why I cant see nowhere in console log that the value of field State is "NH"? Please help! Smiley Happy

Labels: (1)
0 Kudos
Reply
1 Reply
Highlighted
MegaJerk
Nintex Newbie

Re: Extracting value from field in Form to be used in JS

Jump to solution

Welcome to the world of JavaScript and Nintex Forms! It's a little frustrating sometimes, but it's never impossible Smiley Happy 

Moving on, the reason you're having an issue is because of how Nintex Forms generates the Form in different modes. 

I noticed that you're in View Mode on in your screenshot, and wouldn't ya know, Nintex Forms (which I will now refer to simply as "Forms") doesn't actually generate IDs and place them onto the elements! Though it still creates the variable that it's obligated to make, it puts a GUID inside of it that doesn't actually point back to any ID on an element! Yay!

image.png

 

That being said, there IS some useful information there if you know what you're looking for. 

 

Notice how the parent Div Element (where the mouse pointer is) has an attribute called "data-controlname". See that value? That's the same name of the Control as given on the Form in the settings:

image.png

 

Because the name of the control is ALWAYS applied to the topmost level of a Control (the ONE exception being Panels... because they are silly), you can use it in more places and in a more reliable way than you can with the ID variables. 

 

Using the name shown above ("slt_State"), you could use the following code to grab the value: 

 

NWF$("[data-controlname='slt_State'] [formcontrolid][name]").val()

 

Now you should be able to get the value of your controls no matter which mode you're viewing the form in!

I hope this helps! 

---------

 

 

Additional Notes: There are a few other topics which may be of interest but necessarily relevant to your situation. I would just like to make you aware of them in the event that they come up. 

 

  1. The code I'm using above does not specify what is called 'Context'. Because Controls can either be placed inside of a Repeating Section - or - on the Form proper, there needs to be some specificity when trying to grab the value of a control depending on which context it resides in.

    Where you can normally only have ONE control with a Control Name, any Control inside of a Repeating Section is... well... Repeated. So you can have MANY controls with the same Control Name. See the problem? When trying to grab the value of a Control in a Repeating Section, you'll first need to figure out the Row that the Control is in, and then look for it in there.

  2. There are a few Controls were the above methods do not work. Rich Text, for instance, will not return a value using my code above. Almost everything else will. Just make sure that you test it before you commit to using it!

  3. The Panel Control does not set the attribute 'data-controlname' to the Control Name that can be set in the Properties / Settings of the control because that would be too easy. Instead it sets it to the Title that you give it, and will then truncate the title down to 15 characters, replacing anything beyond that with an ellipsis.

    "Super Special Panel Name" will become "Super Special P...

    It is often better to target a Panel using a CSS Class name instead. 

 

I hope this isn't too overwhelming! Please ask more questions as they come to you! 

 

 

 

0 Kudos
Reply