Take a look at this article :

JavaScript events in Nintex Forms

You can execute your method that adds options in the NWF.FormFiller.Events.RegisterRepeaterRowAdded function.

Hope this helps

Also as it is a repeating section, you should add css class to your dropdown list control instead of using the ID of the control. You can execute the following to add options to this control each time a row is added :

NWF$(".css-class-of-your-repeating-section .nf-repeater-row:last .css-class-of-your-dropdown-list select").append(options);

As the ID is unique, it will only be available for the control in the first row. If you add a css class in the settings of the control, this class will be added on the control in each row.

Hope this helps

That worked! you are great! thanks a lot. I would never have guessed that command.

Cool, I'm glad that it helped you !

Hi Caroline, I have another question on the repeating section, I tried accessing the selected value of drop down list on the last row using below line but does not seem to work. Do I need to add anything else?  Also, is there a way I can loop through each repeating section rows using javascript? thanks again.

NWF$(".css-class-of-your-repeating-section .nf-repeater-row:last .css-class-of-your-dropdown-list select").val();

To access the selected option in the dropdown list on the last row, you can use the following :

NWF$(".css-class-of-your-repeating-section .nf-repeater-row:last .css-class-of-your-dropdown-list select option:selected");

To loop through each row, you can use the following :

NWF$(".css-class-of-your-repeating-section .nf-repeater-row:not(.nf-repeater-row-hidden)").each(function() {

     // Add your code here

     NWF$(this).find(".css-class-of-your-dropdown-list select option:selected");

});

Hope this helps

That worked well, thanks.

Hi Caroline,

The form is working well but when I submit the form, there are problems with dynamically populated repeating section data using JavaScript.

1. When I assign a value to a email column in repeating section using JavaScript like NWF$(".euclass .nf-repeater-row:last .email").val("test"); it works well. However, when I save the form and view the saved XML, email node is empty. If I change the value of this email column before submitting form, then the value comes up in the saved XML.

2. Assigning new options/choice to a drop down list in repeating section works well using the JavaScript, however, then I try to submit the form, SharePoint gives error. I suspect that is because the options/choices dynamically assigned on the form are not in the original options/choices when the drop down list was created. For example, a drop down list column was created with choices "a", "b" and "c". Nintex form assigns new value "d" using NWF$(".css-class-of-your-repeating-section .nf-repeater-row:last .css-class-of-your-dropdown-list select").append("<option value="d">d</option>);   then it throws an error.

Would you have any suggestions on these issues? thanks again.

Sam

For your first question, you can try to add the following :

NWF$(".euclass .nf-repeater-row:last .email").val("test");

NWF$(".euclass .nf-repeater-row:last .email").focus();

NWF$(".euclass .nf-repeater-row:last .email").blur();

but I'm not sure if it will work.

For your second question, you cannot add custom drop down options but what you can do is having all the drop down options and in javascript, removing the options that you don't want to be displayed.

For example, your drop down list column was created with options "a", "b", "c" and "d" and then in javascript, you can remove options "a" and "b".

Hope this helps

Thanks for the reply. I tried focus() and blur() but unfortunately, it did not populate the new value in the saved repeating section XML.

It seems if there is already a value saved in a repeating section and I want to over-write that value via JavaScript NWF$(".euclass .nf-repeater-row:last .email").val("test"), it will show the new value "test" on the form but it will not save it when the form is submitted. I ended up saving the XML to another text value and accessing it from there.

What type of control is the one with the "email" css class ?

It is a single line text field, thanks.

Is the field enabled ?

No, it is not enabled as we don't want users to modify the populated value from the JavaScript call. I will try enabling it and check if it saves the changes, thanks. If this works, is there another way to disable field edit?

The fields which are disabled are not taken into account if they are edited.

What you can do is to add another field enabled that you can hide with a formatting rule (the condition would be only : true) and change both fields with javascript. When form loads, you can change the value of the disabled field with the value of the enabled but hidden field.

Hope this helps

Thanks for the reply, enabling field worked well and now I can save the changes on form submit. I created a hidden field as a workaround as well.

You're welcome ! It's great that you could find a solution to your problem

Yes, it is possible.

You will have to add an event listener on all your controls to execute a custom JS function when the change event fires.

In this custom function, you have access to the control that has been modified. As the current control is Inside a row, you can get the row by using the parent() function which returns the parent balise of the current one (I know it's not the better way to do that because you call the parent() function several times and it depends on the type of control but it's the only one I found...).

Here's an example :

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

NWF$("input.css-class-of-a-textbox-in-a-repeating-section").change(my_custom_function);

});

function my_custom_function() {

var currentRepeatingSectionRow = NWF$(this).parent().parent().parent().parent().parent();

var currentTextBoxValue = NWF$(this).val();

// Change the value of a dropdown list in the same row

currentRepeatingSectionRow.find('.css-class-of-dropdown-list).val(currentTextBoxValue);

}

Hope this helps

You can add a css class to the dropdown control by populating the "Control CSS class" field in the settings of the control and then execute the following script in your custom function :

$row.find("select.dropdown-css-class").append("<option value=1>gone</option>");

the semicolon is missing after the append function

Is there a JavaScript error ?

Have you added the cssman css class in the "CSS class" or "Control CSS class" field in the settings of the dropdown ?

The "Control CSS class" is OK.

Do you have a javascript error (you can check using the debugger of your browser - F12 for IE and Chrome) ?

Can you try by replacing this line :

var options = "<option value=101>gone</option>";

with this line :

var options = "<option value='101'>gone</option>";

you're welcome

can you check with the debugger if the css class "cssman" is correctly added to the "select" balise corresponding to the dropdown in the repeating section ?

Is this dropdown a choice control or a list lookup control ?

With which css do you get the value of your dropdown list ?

Sorry, I wanted to write : With which javascript ?