js Multi-select for 3 Listboxes on same Submit datapage

[DesiLogi]

I've got 3 fields set as Listboxes on a Submit datapage. I'm using js to select multiple records and enter them comma delimited upon submission. The code works fine when doing it with one Listbox but I can't figure out how to get it to work for all three. Right now I'm just repeating the code for each listbox (with a different variable name for each) but it doesn't work. I imagine there's a more unified way to do this so the code covers all 3 Listboxes. Anyone have any ideas? 

Here's the code so far (it's obviously wrong to repeat the entire script 3 times, I just don't know how to unify it): 

<script type="text/javascript">
var v_state = "[@field:Field1]" ;
var o_state = document.getElementById("InsertRecordField1") ;
o_state.multiple = true ;

function f_listbox() {
if ( v_state.indexOf(",") > 0 ) {
for (var i=0 ; i < o_state.options.length; i++ ) {
if(o_state[i].value == v_state) {
o_state.remove(i);
break ;
}
}
var o_st = v_state.split(", ") ;
for (var j=0 ; j < o_st.length; j++) {
for (var i=0 ; i < o_state.options.length; i++ ) {
if(o_st[j]== o_state.options[i].value){
o_state.options[i].selected = true ;
break ;
}
}
}
}
}
//window.onload = f_listbox ;

document.addEventListener('DataPageReady', f_listbox());
</script>


<script type="text/javascript">
var v_state2 = "[@field:Field2]" ;
var o_state2 = document.getElementById("InsertRecordField2") ;
o_state2.multiple = true ;

function f_listbox2() {
if ( v_state2.indexOf(",") > 0 ) {
for (var i2=0 ; i2 < o_state2.options.length; i2++ ) {
if(o_state2[i2].value == v_state2) {
o_state2.remove(i2);
break ;
}
}
var o_st2 = v_state2.split(", ") ;
for (var j2=0 ; j2 < o_st2.length; j2++) {
for (var i2=0 ; i2 < o_state2.options.length; i2++ ) {
if(o_st2[j2]== o_state2.options[i2].value){
o_state2.options[i2].selected = true ;
break ;
}
}
}
}
}
//window.onload = f_listbox2 ;

document.addEventListener('DataPageReady', f_listbox2());
</script>

<script type="text/javascript">
var v_state3 = "[@field:Field3]" ;
var o_state3 = document.getElementById("InsertRecordField3") ;
o_state3.multiple = true ;

function f_listbox3() {
if ( v_state3.indexOf(",") > 0 ) {
for (var i3=0 ; i3 < o_state3.options.length; i3++ ) {
if(o_state3[i3].value == v_state3) {
o_state3.remove(i3);
break ;
}
}
var o_st3 = v_state3.split(", ") ;
for (var j3=0 ; j3 < o_st3.length; j3++) {
for (var i3=0 ; i3 < o_state3.options.length; i3++ ) {
if(o_st3[j3]== o_state3.options[i3].value){
o_state3.options[i3].selected = true ;
break ;
}
}
}
}
}
//window.onload = f_listbox3 ;

document.addEventListener('DataPageReady', f_listbox3());
</script>

 

[Vitalikssssss]

Hi @DesiLogi,

Try using the following script in the Footer of the Datapage:

<script type="text/javascript">
    
 function f_listbox(v_state) {
  if ( v_state.indexOf(",") > 0 ) {
   for (let i=0 ; i < o_state.options.length; i++ ) {
    if(o_state[i].value == v_state) {
     o_state.remove(i);
     break ;
    }
   }
   let o_st = v_state.split(", ") ;
   for (let j=0 ; j < o_st.length; j++) {
    for (let i=0 ; i < o_state.options.length; i++ ) {
     if(o_st[j]== o_state.options[i].value){
      o_state.options[i].selected = true ;
      break ;
     } 
    }
   }
  }
 }

document.addEventListener('DataPageReady', function (event) {

let v_state = ["CompanyName", "FirstName", "LastName"]; //Field names goes here 
let o_state = [];

 v_state.forEach(function(el) {
    if (el !== null) {
            o_state.push(document.getElementById("EditRecord"+el));
    }
 });

 o_state.forEach(function(el){

    if (el !== null) {
        el.multiple = true;
    }
 });

f_listbox(v_state);

});

</script>

 

[DesiLogi]

Hi Vitaliksssss,

Thanks for the help with this, very much appreciated. I'm not sure if I have this right, though. I put the field names in the section: 

let v_state = ["Tags", "Tag_Areas", "Tag_Projects"]; //Field names goes here 

but now it's not letting me select multiple values for any of those listboxes. The code doesn't look like it should be: let v_state = ["[@field:Tags]", "[@field:Tag_Areas]", "[@field:Tag_Projects]"];  so I'm not sure where to look. 

Normally, on a Mac, you have to hold down the Command key to multi-select. Is there some other method to do that with this code? 

[Vitalikssssss]

Hi @DesiLogi,

Please send me an exported copy of the Datapage along with dependencies via private message, so I could have a close look.

In the interim, you may import the Datapage which I`ve created while working on JS solution. 

It works fine on Mac. I can select multiple items by holding Command key. 

Regards,

vitalikssssss

CaspioData_2019-Oct-01_0958.zip

[DesiLogi]

Hi Vitaliksssss, 

Thanks very much for offering to take a look at the datapage. Unfortunately I can't attach a file to a private msg  on  this forum so I made stripped down copy of the datapage and its dependancies to post here. In the meantime I'll give your attached version a shot. Very much appreciate your looking into it!

CaspioData_2019-Oct-02_0008.zip

Ah, I see part of the problem- when I looked at your example datapage I see that it's a Details page, and therefore the code has 'edit' for the the function. My datapage is a Submission datapage so it needs to have 'insert' instead. I changed it to 'insert' and it allows to multi-select records in the Listboxes. 

However, it only saves the last Listboxes selections. So if the user selects values in the 1st listbox, goes to the 2nd listbox and selects some values there, then goes to the 3rd listbox and selects multiple values, on Submit it will only save the 3rd listboxes values to the new record. This is odd because the 1st and 2nd listboxes still show the highlighted records before Submission. Not sure what's going on with that. 

Edited October 2, 2019 by DesiLogi
Updated post after testing.

[Vitalikssssss]

Hi @DesiLogi,

You have made a small error in the field names reference in JS.

You should have used Tags_Areas and Tags_Projects in the JS code.

The code will work just fine as soon as you apply above changes.

Regards,

vitalikssssss

[DesiLogi]

Ah, I see what happened. The demo datapage I'd uploaded to this thread I'd set up separately and spelled the fields differently (with an 's') but the code I'd pasted into it was from my production datapage. On the production datapage the field spellings match up and it still doesn't work.  Sorry about that confusion. Still not sure why I can't get it to save all 3 selected choices. 

 

[DesiLogi]

Ah, I see what happened. The demo datapage I'd uploaded to this thread I'd set up separately and spelled the fields differently (with an 's') but the code I'd pasted into it was from my production datapage. On the production datapage the field spellings match up and it still doesn't work.  Sorry about that confusion. Still not sure why I can't get it to save all 3 selected choices. 

EDIT:

Hi Vitaliksssss,

Ok, I got it now. Your code does work perfectly after all. The issue is that I had a Rule to show/hide the listboxes (so the user has a cleaner UI). So when they user selects records in the first listbox and uses a Virtual field Radio Button to hide it and show the 2nd listbox, it does 'save' the 1st listboxes selections in that they are highlighted, but upon Submission it does not save that listbox's choices if it's been hidden. 

So essentially the code works great, the problem is show/hiding the listboxes and retaining the values selected in all listboxes. Is there anyway to deal with that or is it necessary to just keep all the listboxe's visible (cluttered though they'll be). That said, many thanks for your help and digging through this with me- much appreciated. 

[wimtracking2]

On 9/30/2019 at 8:21 AM, Vitalikssssss said:

Hi @DesiLogi,

Try using the following script in the Footer of the Datapage:

<script type="text/javascript">
    
 function f_listbox(v_state) {
  if ( v_state.indexOf(",") > 0 ) {
   for (let i=0 ; i < o_state.options.length; i++ ) {
    if(o_state[i].value == v_state) {
     o_state.remove(i);
     break ;
    }
   }
   let o_st = v_state.split(", ") ;
   for (let j=0 ; j < o_st.length; j++) {
    for (let i=0 ; i < o_state.options.length; i++ ) {
     if(o_st[j]== o_state.options[i].value){
      o_state.options[i].selected = true ;
      break ;
     } 
    }
   }
  }
 }

document.addEventListener('DataPageReady', function (event) {

let v_state = ["CompanyName", "FirstName", "LastName"]; //Field names goes here 
let o_state = [];

 v_state.forEach(function(el) {
    if (el !== null) {
            o_state.push(document.getElementById("EditRecord"+el));
    }
 });

 o_state.forEach(function(el){

    if (el !== null) {
        el.multiple = true;
    }
 });

f_listbox(v_state);

});

</script>

 

Hi @Vitalikssssss

 

This solution is working for me on an update submission form. Thank you. Is there a way that it can be altered to pre-select the listbox options individually as stored in the database rather than selecting one option summarizing the data in the table.  See attached images. 

Caspio1.png shows how the field currently shows up in the update form based on the current data in the table. I would like it to display as shown in caspio2.png.  Can this be done? Thank you

[wimtracking2]

I did get this answered through another post: https://forums.caspio.com/messenger/465/?tab=comments#comment-831

[DesiLogi]

Hi Wimtracking2,

Glad you got it answered-I was just about to post what might be a solution: 

This code in the footer will highlight the choices selected in the listbox (my field is called 'AssignedTo'.

<script type="text/javascript">
var v_state = "[@field:Assigned_To]" ;
var o_state = document.getElementById("EditRecordAssigned_To") ;
o_state.multiple = true ;

function f_listbox() {
if ( v_state.indexOf(",") > 0 ) {
for (var i=0 ; i < o_state.options.length; i++ ) {
if(o_state[i].value == v_state) {
o_state.remove(i);
break ;
}
}
var o_st = v_state.split(", ") ;
for (var j=0 ; j < o_st.length; j++) {
for (var i=0 ; i < o_state.options.length; i++ ) {
if(o_st[j]== o_state.options[i].value){
o_state.options[i].selected = true ;
break ;
}
}
}
}
}
//window.onload = f_listbox ;

document.addEventListener('DataPageReady', f_listbox());
</script>

 

[wimtracking2]

On 12/5/2019 at 1:38 PM, DesiLogi said:

Hi Wimtracking2,

Glad you got it answered-I was just about to post what might be a solution: 

This code in the footer will highlight the choices selected in the listbox (my field is called 'AssignedTo'.

<script type="text/javascript">
var v_state = "[@field:Assigned_To]" ;
var o_state = document.getElementById("EditRecordAssigned_To") ;
o_state.multiple = true ;

function f_listbox() {
if ( v_state.indexOf(",") > 0 ) {
for (var i=0 ; i < o_state.options.length; i++ ) {
if(o_state[i].value == v_state) {
o_state.remove(i);
break ;
}
}
var o_st = v_state.split(", ") ;
for (var j=0 ; j < o_st.length; j++) {
for (var i=0 ; i < o_state.options.length; i++ ) {
if(o_st[j]== o_state.options[i].value){
o_state.options[i].selected = true ;
break ;
}
}
}
}
}
//window.onload = f_listbox ;

document.addEventListener('DataPageReady', f_listbox());
</script>

 

Hi @DesiLogi

 

Is there anyway to use this same solution, but for the user to multi-select from checkboxes rather than the listbox?