How to populate radio button, multi checkbox and multi line text box based on Lookup field

  • 14 December 2018
  • 7 replies
  • 17 views
A
Badge +3

Is anybody out there who could guide me please? With the help of this post "(javascript) How do I populate data into fields based on a selection picked in a look up column? " I was able to populate single line text box, drop down and date fields but I am stuck with radio button, multi checkbox and multi line text box fields to get populated based on lookup field change. Radio button and Multi checkbox fields are getting values though, I test it with "alert" as you can see below.

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

   var obj = NWF$("#" + LookupProject);

obj.change(function () {

   var clientContext = SP.ClientContext.get_current();

   var web = clientContext.get_web();

   var oList = clientContext.get_web().get_lists().getByTitle("DetailReport");

   var listItem = oList.getItemById(itemID);

 clientContext.load(listItem, "Name", "Project", "Department", "StartDate", "RadioButton", "MultiCheckbox", "MultiLineTB");

clientContext.executeQueryAsync(function () {

document.getElementById(varName).value = listItem.get_item('Name'); document.getElementById(varProject).value = listItem.get_item('Project'); document.getElementById(varDepartment).value=listItem.get_item('Department'); document.getElementById(varStartDate).value=listItem.get_item('StartDate').format('MM/dd/yyyy'); 

document.getElementById(varRadioButton).value=listItem.get_item('RadioButton');

alert(NWF$('#' + varRadioButton).val()); // This is showing me right value but it is not checking the radio button.

I tried

listItem.get_item('RadioButton').prop('checked', true);‍‍‍‍

 and IF

if (NWF$('#' + varRadioButton).is(':checked') === false){
NWF$('#' + varRadioButton).prop('checked', true);}‍‍‍‍‍‍

but its not working

document.getElementById(varMultiCheckbox).value=listItem.get_item('MultiCheckbox'); //same issue as above 

document.getElementById(varMultiLineTB).value=listItem.get_item('MultiLineTB'); // Not working obviously }, function () {

     });

   });

 });

7 replies

A
Badge +3

I got to the point where I am using If else to mark the varRadioButton button as selected with JS because I know with

document.getElementById(varRadioButton).value=listItem.get_item('RadioButton');‍
alert(NWF$('#' + varRadioButton).val());‍‍‍‍

This code // I was getting right value but it wasn't marking it as checked.

So now I have lengthy code but it is working.

Here when I came to MultiCheckbox with the help of Chad Davis I was able to get the label value of MultiCheckbox. 

Multiple Choice Checkbox Value "alert" but I am still trying to figure out how can I mark them as checked.

221750_pastedImage_7.png

If I put alert to see if my control is picking the value then answer is yes.

document.getElementById(varMultiCheckbox).value=listItem.get_item('MultiCheckbox');‍
alert(NWF$('#' + varMultiCheckbox).val());‍‍‍‍

it shows me

221748_pastedImage_5.png

But I don't know how can I make it mark as selected.

E
Userlevel 5
Badge +14

choice control rendered as radio options

NWF$('#'+varRadioButton).find(':radio[value="xxx"]').prop('checked',true)‍‍‍

choice control rendered as checkboxes with multiple selection

//single option
NWF$('#'+varMultiCheckbox).find(':checkbox[value="Option 1"]').prop("checked",true);



//multiple options
NWF$('#'+varMultiCheckbox).find(':checkbox[value="Option 1"]').prop("checked",true);
NWF$('#'+varMultiCheckbox).find(':checkbox[value="Option 2"]').prop("checked",true);
// or 
NWF$('#'+varMultiCheckbox).find(':checkbox[value="Option 1"], :checkbox[value="Option 2"]').prop("checked",true)‍‍‍‍‍‍‍‍‍‍‍;‍‍‍‍‍‍‍‍‍‍

for multiline textbox it may differ whether it's simple plain text or rich text control.

see a solution for both options in following thread -  

A
Badge +3

When I write this:

NWF$(document).ready(function () {
NWF$('#' + varMultiCheckbox).find(':checkbox').prop('checked',true);
});‍‍‍

Shows me:

221760_pastedImage_5.png

 

But when I write this:

NWF$(document).ready(function () {
NWF$('#' + varMultiCheckbox).find(':checkbox[value="Option 1"]').prop('checked',true);
});‍‍‍

It shows me:

221761_pastedImage_6.png

Issue:

My HTML code is not capturing the "value" of Multi choice option at input level and I don't know why?

as you can see below in screen shot "HTML- Options" it says 

<input value="on"/>‍

and this is not usual. I confirmed in this post where Davis have different HTML generated when he performed same action.

Why DOM explorer shows value="on" for all the MultiChoice options 

HTML - MultiChoiceControl

221784_pastedImage_9.png

HTML - Options

221785_pastedImage_13.png

I am using SharePoint 2010 with Nintex Development License version: 1.11.3.0 sad.png

E
Userlevel 5
Badge +14

I do not have experience with SP/NF2010, but it looks quite strange. I've never seen anything like this on SP/NF2013.

don't you (maybe accidentally) set 'value' property to the value of 'on' on your own somewhere in your custom code?

can you maybe test with very simple form with just single choice control and no custom script(s)?

if that's really the model that get's generated on NF2010 then something like this might work for you

NWF$('#' + varMultiCheckbox + ' span[data-nfchoicevalue="Option 1"] input:checkbox').prop('checked',true);‍
A
Badge +3

Looks like we are almost there for this one. You were missing 1 very small piece ".find".

NWF$('#'+varMultiCheckbox).find('span[data-nfChoiceValue="Option 1"] input:checkbox').prop('checked',true);‍‍‍

So, this is now working. happy.png

but how to put that in java with if condition and "Contains" function. This is not working.

if (NWF$('#' + varMultiCheckbox).val().contains("Option 1")){
    NWF$('#'+varMultiCheckbox).find('span[data-nfChoiceValue="Option 1"] 
    input:checkbox').prop('checked',true);‍‍}

‍if (NWF$('#' + varMultiCheckbox).val().contains("Option 2")){
    NWF$('#'+varMultiCheckbox).find('span[data-nfChoiceValue="Option 2"] 
    input:checkbox').prop('checked',true);‍‍}

‍if (NWF$('#' + varMultiCheckbox).val().contains("Option 3")){
    NWF$('#'+varMultiCheckbox).find('span[data-nfChoiceValue="Option 3"] 
    input:checkbox').prop('checked',true);‍‍}

‍if (NWF$('#' + varMultiCheckbox).val().contains("Option 4")){
    NWF$('#'+varMultiCheckbox).find('span[data-nfChoiceValue="Option 4"] 
    input:checkbox').prop('checked',true);‍‍}

Else(NWF$('#' + varMultiCheckbox).val().contains("Not Applicable")){
    NWF$('#'+varMultiCheckbox).find('span[data-nfChoiceValue="Not Applicable"] 
    input:checkbox').prop('checked',true);‍‍}‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Because there could be multiple values at a same time so I cannot use == 

E
Userlevel 5
Badge +14

You were missing 1 very small piece ".find".

a space character right in front of 'span' acts as a find, have you noticed it?

This is not working.

just off top of my head without any testing...

//varCheckboxOptionsFromRemoteList => populated from remote list query result (array of strings expected)
//varMultiCheckbox => js variable assigned to choice control

var varCheckboxOptionsFromRemoteList= <populate from remote list query>; 

NWF$(varCheckboxOptionsFromRemoteList.split(',')).each(function(idx,opt){
    NWF$('#'+varMultiCheckbox + ' span[data-nfChoiceValue="' + opt + '"] input:checkbox').prop('checked',true);}
})‍‍‍‍‍‍‍
‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍
A
Badge +3

a space character right in front of 'span' acts as a find, have you noticed it?

You are right, I didn't noticed that. It is working like a charm. 

with my limited knowledge of JS I tried putting this code together but it doesn't work. I am sure that I am missing something. Can you please have a look and guide?

NWF$(document).ready(function () {
        var obj = NWF$("#" + LookupProject);

obj.change(function () {
        var clientContext = SP.ClientContext.get_current();
        var web = clientContext.get_web();
        var oList = clientContext.get_web().get_lists().getByTitle("DetailReport");
        var itemID =  this.value.split(";")[0];
        var listItem = oList.getItemById(itemID);

clientContext.load(listItem, "Name", "Project", "Department", "StartDate", "MultiCheckbox", "MultiLineTB");

clientContext.executeQueryAsync(function () {
     var varCheckboxOptionsFromRemoteList= <populate from remote list query>;

          document.getElementById(varName).value = listItem.get_item('Name'); 
          document.getElementById(varProject).value = listItem.get_item('Project'); 
          document.getElementById(varDepartment).value=listItem.get_item('Department'); 
          document.getElementById(varStartDate).value=listItem.get_item('StartDate').format('MM/dd/yyyy'); 
          document.getElementById(varMultiCheckbox).value=listItem.get_item('MultiCheckbox');
                NWF$(varCheckboxOptionsFromRemoteList.split(',')).each(function(idx,opt){
                   NWF$('#'+varMultiCheckbox + ' span[data-nfChoiceValue="' + opt + '"] input:checkbox').prop('checked',true);
});
    }); 
        });

           });‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Reply


View our Community Site Map

Nintex Community Sitemap
Terms & ConditionsCookie settings