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

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

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 () {

     });

   });

 });

0 Kudos
Reply
7 Replies
ahmad84
Nintex Newbie

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

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.

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

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

0 Kudos
Reply
emha
Nintex Newbie

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

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 -  

0 Kudos
Reply
ahmad84
Nintex Newbie

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

When I write this:

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

Shows me:

 

But when I write this:

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

It shows me:

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

HTML - Options

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

0 Kudos
Reply
emha
Nintex Newbie

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

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);
Reply
ahmad84
Nintex Newbie

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

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. 

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 == 

0 Kudos
Reply
emha
Nintex Newbie

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

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);}
})‍‍‍‍‍‍‍
‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍
0 Kudos
Reply
ahmad84
Nintex Newbie

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

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);
});
    });
        });

           });‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍
0 Kudos
Reply