Nintex Forms and JavaScript basics

[#1]

This should really be a no brainer, yet I am struggling to get simple JavaScript to work.

With Nintex O365 Forms, I can issue the following line in the Form Settings -> Custom JavaScript

Nothing else at all in the Custom JavaScript Box.  When I fire up the preview, then I am prompted with the alert just fine.

What I want to accomplish is to set a Dropdown list to default to the first item in the list, with ID = 1.  I have the advanced settings to the dropdown list as follows:

So in the Custom JavaScript Box I have the following:

After Saving and previewing, I do not get any results, not even the alert window.

This is what I currently have in the Forms Custom JavaScript Includes:

What am I missing?

[#2]

I also wanted to add that I have tried the following as well:

NWF.FormFiller.Events.RegisterAfterReady(function () {

NWF$(document).ready(function(){  

  alert("Form Ready");

});

});

Which works

When I add the following:

NWF.FormFiller.Events.RegisterAfterReady(function () {

NWF$(document).ready(function(){  

  alert("Form Ready");

  var defaultTeam = NWF$("#" + ddlPicker).val();

  if (defaultTeam == '0') {

  NWF$("#" + ddlPicker).val('1');

});

});

I do not get any results, no alert window, no setting the ddlPicker to ID 1.  Just a heads up that the ddlPicker list is populated with three items.  so, there should be no problem setting the initial ID to 1.

[mmatsako]

In your screen shot you have the Javascript variable name set to :   ddlFavTeam, but in your code you reference ddlPicker ---- this would surely cause the non-results.  

Replace ddlPicker with ddlFavTeam throughout your code.

Thanks

Mike

[mmatsako]

Also, you don't need to surround document ready within another function.

So remove: NWF.FormFiller.Events.RegisterAfterReady as the wrapping function.

[#5]

Mike,

I'm ok with the points that you make.  I am still struggling to get simple JavaScript to work.  I simply want to be able to get variable data and update variable data.  can this not be done?

To dumb it down, I created a form with a simple text box as below

I just want to see if the code sees the TeamName object. I added a button and set it up as follows

When I run the form and click on the button,  I get the following:

This tells me that I have referenced the object TeamName.  Now if I enter a value in the TeamName, I want to change the button click to display the value in the TeamName Textbox.  I changed the Client Click to

alert(NWF$('TeamName').text());

And I get the following when run:

Which tells me that there is no text assigned.  What method do I need to pull in order to grab the value that is displayed on the form textbox?

Thanks!

[#6]

I corrected the code to reflect the correct  Client ID JavaScript name to TeamValue.  The results were the same.

alert(NWF$('TeamValue').text());

[mmatsako · Accepted solution]

Here david,

I copied your form in my O365 - and I will note: O365 is WAY more picky than on premise when it comes to Javascript, so copy and past my function exactly:  

Notes:  assigned the textbox a js variable name "TeamValue" in its configuration

****Javascript does not work properly on the "Preview Mode" so please publish your form and try it

****For your button, make sure you call:   showText()     on client click and disable "Causes Validation option"

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

function showText()  {  

var display = NWF$("#"+TeamValue);  

alert(display.val());  

} 

[#8]

Mike,

I really appreciate the time that you took to look at this.  I was able to get the expected results using the code exactly as you typed.    I can now begin to breathe!  now to try to figure out how to do the other JS tasks that I need to accomplish in order to move on with my project!

Thank you so much!

[#9]

Mike just to let you know that based on what you ferreted out, I was able to quickly get this code working

var picker = NWF$("#"+ddlPicker);

var pickval = picker.val();

// Change ddlPicker to the first item in the list

if (pickval == '0'){

picker.val('1');

}

//When the ddlPicker changes...this gets called

picker.change(function(){

     var myselection = NWF$('#' + ddlPicker + ' option:selected');

     var display = NWF$("#"+TeamValue);

     //updates a field on the form

     display.val(myselection.text());

});

[mmatsako]

Looks good David, glad I could help!