Multi-Select Checkboxes are usually composed of several <input> elements of type="checkbox".
This means that your code which targets <option> elements just needs a slight tweak.
try the following:
NWF$(document).ready(function() {
var opt = NWF$("#" + chkStaffNames);
opt.change(function() {
/* cycle through all the options to find the selected ones */
var selectedNames = "";
opt.find("input:checkbox:checked").each(function() {
selectedNames += this.value + ";";
});
NWF$("#" + multiAssignedStaff).val(selectedNames);
});
});
Let me know if it works!
Hi, thank you so much. Unfortuately, it did not work. I really have no idea why. Maybe it's something to do with the fact the options come from a stored proc?
Without seeing the html structure of the options in question, it's going to be hard to say. It don't think it coming from a stored proc has anything to do with it, unless perhaps the event handler is being attached at a time when the control is not fully / correctly loaded, and therefore is referencing something not there.
Loading your form, opening the Dev Console in your browser, and running the following line:
NWF$("#" + chkStaffNames)
should at least show you whether or not it's returning anything. If it is, then simply explore the HTML, and if you have further questions, post a few screenshots here and we should be able to determine the next steps.
Thank you! This is what I get, however I don't really know what I'm looking for:
To be honest, our developer left and now it's up to me to try and fix this form..
Trial By Fire eh? Not the best way to learn, but let's see what we can do!
For now let's just see if we can't get the full html of the control in question. It would also be handy to have a screenshot of the actual control on the form as it's being rendered (even if you need to blank out the data being returned). I'm not entirely sure if you're using a SQL Control or something else. Do you know?
No matter, when you use the code below and it returns what you've shown you can click on the returned elements to highlight them in the HTML code and in the Browser window:
In the HTML window, if you scroll up a bit, you should be able to hover over the elements, and see when you reach the outermost <div> element of the Control in question:
Once you find that outermost element, Right Click on it, then go to Copy, then go to Copy outerHTML:
Now you have the entire HTML contents of the Control copied. If there is sensitive data that you can't share with the outside world, please first paste the contents into a text editor, and change the values to something arbitrary (Option 1, Option 2, Option 3, etc.), and then copy it all back. Once you're happy with what's copied, paste it here in your reply so that we can see all of the html. This way it should be relatively simple to write some good code since I know for certain how the control's laid out.
You can say that again! Thank you so much.
There are nearly 200 options, so I cut it down to 3:
<div class="nf-form-label nf-section nf-filler-control nf-filler-highlightonvalidationerror nf-resizable nf-resizable" formcontrolid="d62d2cfc-14e3-4d2b-98c7-da011cf6eaef" data-controlname="" data-uniqueid="7733d5bf-11c6-4bdc-a430-79c3065a796c" style="overflow: visible; height: 1077px; width: 850px; top: 785px; left: 0px; z-index: 100;" data-controlid="d62d2cfc-14e3-4d2b-98c7-da011cf6eaef" data-formcontroltypeid="7733d5bf-11c6-4bdc-a430-79c3065a796c" data-enabled="True"><div class="nf-filler-control-border"><div class="nf-filler-control-inner"><div title="" data-selectvaluemask="Select Leader Here" class=" nf-dataaccess" data-displaytype="checkboxlist" data-controlreadonly="false" data-repeatlayout="table" style="font-family:arial;font-size:10pt;text-align:left;" name="433a93b5-d779-4dfa-8105-7532d5b24ed4" data-controlenabled="true" data-repeatdirection="vertical" data-displayvalues="Name 1;#Name 1;#Name 2;#Name 2;#Name 3;#Name 3" data-controlcssclass="" data-repeatcolumns="5"><table id="ctl00_PlaceHolderMain_ctl00_ctl00_ListForm2_formFiller_FormView_ctl78_fc50f977_82ea_468b_8757_9a65e518ae27" name="ctl00$PlaceHolderMain$ctl00$ctl00$ListForm2$formFiller$FormView$ctl78$fc50f977_82ea_468b_8757_9a65e518ae27" class=" nf-client-control " data-use-attribute-as-value="data-nfChoiceValue" style="width: 100%;"><tbody><tr><td><span data-nfchoicevalue="Name 1;#Name 1"><input id="ctl00_PlaceHolderMain_ctl00_ctl00_ListForm2_formFiller_FormView_ctl78_fc50f977_82ea_468b_8757_9a65e518ae27_0" type="checkbox" data-type="checkbox" name="d62d2cfc-14e3-4d2b-98c7-da011cf6eaef$0" value="Name 1" formcontrolid="d62d2cfc-14e3-4d2b-98c7-da011cf6eaef" data-com.bitwarden.browser.user-edited="yes"><label for="ctl00_PlaceHolderMain_ctl00_ctl00_ListForm2_formFiller_FormView_ctl78_fc50f977_82ea_468b_8757_9a65e518ae27_0">Name 1</label></span></td><td><span data-nfchoicevalue="Name 2;#Name 2"><input id="ctl00_PlaceHolderMain_ctl00_ctl00_ListForm2_formFiller_FormView_ctl78_fc50f977_82ea_468b_8757_9a65e518ae27_43" type="checkbox" data-type="checkbox" name="d62d2cfc-14e3-4d2b-98c7-da011cf6eaef$43" value="Name 2" formcontrolid="d62d2cfc-14e3-4d2b-98c7-da011cf6eaef"><label for="ctl00_PlaceHolderMain_ctl00_ctl00_ListForm2_formFiller_FormView_ctl78_fc50f977_82ea_468b_8757_9a65e518ae27_43">Name 2</label></span></td><td><span data-nfchoicevalue="Name 3;#Name 3"><input id="ctl00_PlaceHolderMain_ctl00_ctl00_ListForm2_formFiller_FormView_ctl78_fc50f977_82ea_468b_8757_9a65e518ae27_86" type="checkbox" data-type="checkbox" name="d62d2cfc-14e3-4d2b-98c7-da011cf6eaef$86" value="Name 3" formcontrolid="d62d2cfc-14e3-4d2b-98c7-da011cf6eaef"><label for="ctl00_PlaceHolderMain_ctl00_ctl00_ListForm2_formFiller_FormView_ctl78_fc50f977_82ea_468b_8757_9a65e518ae27_86">Name 3</label></span></td></tr></tbody></table><input name="ctl00$PlaceHolderMain$ctl00$ctl00$ListForm2$formFiller$FormView$ctl78$fc50f977_82ea_468b_8757_9a65e518ae27_hid" type="text" id="ctl00_PlaceHolderMain_ctl00_ctl00_ListForm2_formFiller_FormView_ctl78_fc50f977_82ea_468b_8757_9a65e518ae27_hid" class=" nf-multiselect nf-associated-control" style="display:none;" formcontrolid="d62d2cfc-14e3-4d2b-98c7-da011cf6eaef"><span id="ctl00_PlaceHolderMain_ctl00_ctl00_ListForm2_formFiller_FormView_ctl78_fc50f977_82ea_468b_8757_9a65e518ae27_loading" style="display: none;">Loading...</span></div></div></div></div>
Alrighty this is good html! Excellent work!
Also you can probably remove that image of the Control's Settings, just to be on the safe side as DB names could be useful to jerks who aren't Mega 😉
I will write up some code that might be of use but will need a little time to test it so see you back here in maybe 10 minutes.
Alright. I have some new code. Let's give this a shot:
/*
Instead of using the jQuery On Ready event, I'm going to use
the Nintex Forms event that will run once the Form has fully loaded.
Based on other info I know that this event won't always fire when the
SQL control has been populated, but I can at least know that the
Control's HTML is essentially there, which is useful.
*/
NWF.FormFiller.Events.RegisterAfterReady(function () {
/*
The ID passed back from the Control is to a hidden input element
which *might* hold all of the values selected, but wouldn't trigger
any change event. So instead of handling the change on that element
we I'm going to go to the outer container <div> of the Control
itself. Because events bubble up from the source (starting element
of the event), anytime an input is checked, it *should* bubble up the
stack and trigger our handler.
*/
var opt = NWF$("#" + chkStaffNames).closest(".nf-filler-control");
opt.change(function() {
/* cycle through all the options to find the selected ones */
var selectedNames = "";
opt.find("input:checkbox:checked").each(function() {
selectedNames += this.value + ";";
});
NWF$("#" + multiAssignedStaff).val(selectedNames);
});
});
I've included the explanation for what's going on in the code. For code without comments see:
NWF.FormFiller.Events.RegisterAfterReady(function () {
var opt = NWF$("#" + chkStaffNames).closest(".nf-filler-control");
opt.change(function() {
var selectedNames = "";
opt.find("input:checkbox:checked").each(function() {
selectedNames += this.value + ";";
});
NWF$("#" + multiAssignedStaff).val(selectedNames);
});
});
I believe that this should work. Let me know what you see on your end!
Thank you so much for your help and you explanations - it worked perfectly! I'm very grateful 🙂
Ok, it works until I connect the multiline textbox to the Sharepoint list item. When I do that, nothing is written to the multiline textbox. Any ideas?
Do you mean that the code stops pushing text into the multiline text box, or do you mean that the textbox is being updated, but doesn't *save* the values to the now connected column?
Also, is this a different text box than the one it was working on? If so, then remember that this code is working off of the JavaScript ID that is being exposed in the Control's Advanced Settings. There you can set whether or not you'd like to push the ID of the control to a Named Variable. In the code I made, I'm using the name you had used earlier multiAssignedStaff however, if you have created a new multiline text box, you'd need to give it's Javascript ID a new variable name and change that value to match in the code.
Hi, I mean the code stops pushing test to the multiline textbox.
It's the same textbox. All I do is connect it to a column, and it stops pushing the text.
This works:
This doesn't:
That genuinely doesn't make any sense to me as in my own testing I couldn't replicate the issue. Do me a favor and, without deleting anything, create a new multiline text box. Associate it to the column in question, and go into the advanced section of its settings to assign it's ID to a named javascript variable (of your choice, but not the same name as the other one). Go into the code and change the variable used to push the value to the MultiLine box with the old variable to the new one.
See if *that* works.
Also be sure to disconnect the old / existing ML text box from the column.
If it doesn't work, then maybe there is a restriction on the Column in its settings, or another bit of code that is doing *something* on submit (though that second scenario seems more unlikely with how this seems to be acting)
No matter, we'll just have to troubleshoot one step at a time.
No luck... I also made a new multiline column in the list and connected it to that. It did the same thing. There is no other code in the custom javascript box.
Can we get around it by simply grabbing the contents of the multiline textbox from within the workflow by changing: @StaffNameAttending = {ItemProperty:AttendingStaff}.
Having it in the list is not essential. The whole form will be redone eventually.
This is the whole workflow: (Execute SQL)
exec [spProfessionalLearningRegister]
@Title = '{ItemProperty:Title}',
@StaffNameAttending = {ItemProperty:AttendingStaff}
@StaffNameLeader = '{ItemProperty:Recorder}',
@OutProLearning = '{ItemProperty:OutProfLearn}',
@AlignBGS = '{ItemProperty:AlignBGS}',
@AITSLStandards = '{ItemProperty:AITSLStandards}',
@DateStart = '{ItemProperty:Date}',
@DateEnd = '{ItemProperty:DateEnd}',
@Created = '{ItemProperty:Created}',
@CreatedBy = '{ItemProperty:Author}',
@ModifiedBy = '{ItemProperty:Editor}'
If i set the multiline to RichText, the same thing happens. Nothing is printed to the box, even if it is not connected to a column. I thought I would simply need to set the column to plain text too, but that didn't work.
EDIT: Actually, I think that did it. I just needed to refresh the form. Looks like it needed both settings to be plain text. Strange. Thank you so much for your help Mega!
Ah! well very good a few toggles to the settings seems to have things in working order now!
Good luck on your journey of learning this stuff, and don't forget to post whenever you run into a roadblock!
