DesiLogi Posted September 27, 2019 Report Share Posted September 27, 2019 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> Quote Link to comment Share on other sites More sharing options...
Vitalikssssss Posted September 30, 2019 Report Share Posted September 30, 2019 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> wimtracking2 1 Quote Link to comment Share on other sites More sharing options...
DesiLogi Posted October 1, 2019 Author Report Share Posted October 1, 2019 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? Quote Link to comment Share on other sites More sharing options...
Vitalikssssss Posted October 1, 2019 Report Share Posted October 1, 2019 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 Quote Link to comment Share on other sites More sharing options...
DesiLogi Posted October 2, 2019 Author Report Share Posted October 2, 2019 (edited) 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. Quote Link to comment Share on other sites More sharing options...
Vitalikssssss Posted October 2, 2019 Report Share Posted October 2, 2019 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 Quote Link to comment Share on other sites More sharing options...
DesiLogi Posted October 2, 2019 Author Report Share Posted October 2, 2019 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. Quote Link to comment Share on other sites More sharing options...
DesiLogi Posted October 2, 2019 Author Report Share Posted October 2, 2019 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. Quote Link to comment Share on other sites More sharing options...
wimtracking2 Posted November 25, 2019 Report Share Posted November 25, 2019 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 Quote Link to comment Share on other sites More sharing options...
wimtracking2 Posted December 3, 2019 Report Share Posted December 3, 2019 I did get this answered through another post: https://forums.caspio.com/messenger/465/?tab=comments#comment-831 Quote Link to comment Share on other sites More sharing options...
DesiLogi Posted December 5, 2019 Author Report Share Posted December 5, 2019 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> Quote Link to comment Share on other sites More sharing options...
wimtracking2 Posted December 11, 2019 Report Share Posted December 11, 2019 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? Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.