Multi Select In A Submission For Listbox And Cascading Listbox

[Master]

I am trying to separate my search and report in two pages, I have 3 virtual fields on my page one is listbox(virtual 3) and the other two are cascadings.

 

I cannot make this to work so when I multi select from listbox, it pulls up cascading values. It should also send the selection to next page separated by OR instead of "," . Here is my code:

<script type="text/javascript">
var o_els = new 
Array("cbParamVirtual3", "cbParamVirtual2", "cbParamVirtual1");
   for (var i = 0; i < o_els.length; i++) 
{     
document.getElementsByName(o_els[i])[0].multiple=true;}
function f_select(){for (var i = 0; i < o_els.length; i++) {var 
v_fn = document.getElementsByName(o_els[i])[0].value;function 
splitAndParse(){var result = "";var cleanResult = "";
for (var i = 0; i < x1[0].length; i++) {if (x1[0].options[i].selected) 
{result += "\""+x1[0].options[i].value+"\"" + " OR " ;}
if (x1[0].length > 4) { cleanResult = 
result.substring(0,(result.length-4)); 
}document.getElementsByName(o_els[i])[0].value = cleanResult;
}}}}
document.getElementById("caspioform").onsubmit=f_select;

</script>

[ShWolf]

Hi

 

Did you use two DataPages? Which types? And what is the goal you want to achieve?

 

If you are using Search and Report DataPage type, you can add several criteria for each field on the 'Configure Search Fields' step and change logical operator between criteria. Maybe this is what you need?

 

Please provide more information about your DataPages.

[Master]

I have a submission page as search and predefined report as explained here http://howto.caspio.com/tech-tips-and-articles/parameters/how-to-separate-search-page-and-results-page-into-two-different-webpages/

[Master]

Any updates on this?!

 

I need to know how I can have cascading based on a multi select list box so when I select multiple value from a listbox cascading will show options for selected values.

 

Any thoughts??

[Farnsbarnes]

I'm facing the same problem and actually submitted a post this morning asking the same question (sorry I missed yours).

 

I've found this all works perfectly with listboxes in a report, but not in a submission form.

 

I'm as intrigued as you are!

[linah]

Hi Master,

 

This solution might solve ( cascading based on a multi select list box).

if you have any questions let me know.

 

Table:

x

y

 

Form:

x > first Listbox. ex Values:(x0,x1,x2,x3,x4) 

y > text box that shows the result of selection from the cascaded virtual list box. if it shows wanted result make it hidden.

a,b > are two virtual listboxes. ex a Values:(a1,a2,a3) ex b Values:(b1,b2,b3,b4) 

 

Code description:

#1 get x,a,b and save them in variables x,a,b 

#2 a,b are hidden when the page load 

#3 function f is called on form change and submission

#4 The function:

      1.variable z was declared

      2.variable result value was declared to save the value of selected options in either a, or b virtual fields

      3.for loop that saves selected indexes in x listbox to z variable

      4. if condition of the possibility selection of x,

          so if index(z) of selected options in x was the "first, second, third,  first and second, first and third, second and third, first and second and third " display virtual listbox a and hide b and save selected values in a ", " between selected to resultValue,

else if index(z) of selected options in x was the "fourth, fifth, or fourth and fifth  "display virtual listbox a and hide b and save selected values in b with ", " between selected values to resultValue     

 

note: the indexes starts from zero so the in if condition z==option 

 

else hide a,b

            5. y equal resultValue - the last two chars which are ", "

 

Add Header & footer.

Code in the footer:

 

<SCRIPT LANGUAGE="JavaScript">

 

//#1

var x = document.getElementsByName("InsertRecordx")[0];

x.multiple = true ;  

 

var a=document.getElementById("cbParamVirtual1");

var b=document.getElementById("cbParamVirtual2");

 

a.multiple = true ;  

b.multiple = true ;

 

//#2

//hide a,b

a.style.display = "none";

b.style.display = "none";

 

 

 

function f()  { 

 

//#4

var resultValue="";//result of selected values from either a or b with "," between selected options

var z="";//index of selected values from x

 

   for (var i=0 ; i < x.options.length; i++ ) {

       if(x.options.selected){

          //z+=x.options.value +", ";

          z+=i +"";

       }

    }

 

 

if (z=="0" || z=="1" || z=="2" || z=="01" || z=="02" || z=="12" || z=="012")

{

a.style.display = 'block';

// hide b

b.style.display = 'none';

 

 

   for (var i=0 ; i < a.options.length; i++ ) {

       if(a.options.selected){

          resultValue+=a.options.value +", ";

       }

    }

}

else if (z=="3" || z=="4" || z=="34"){

 

b.style.display = 'block';

// hide a

a.style.display = 'none';

 

 

 for (var i=0 ; i < b.options.length; i++ ) {

       if(b.options.selected){

          resultValue+=b.options.value +", ";

       }

    }

 

 

}

 

else {

 

// hide a,b

b.style.display = 'none';

a.style.display = 'none';

 

}

 

document.getElementById("InsertRecordy").value = resultValue.slice(0,-2);

 

}

 

//#3

 /* On submitting the webform, the function f is executed */

 document.getElementById("caspioform").onsubmit=f;

document.getElementById("caspioform").onchange=f; 

</SCRIPT>

[Farnsbarnes]

Hi Linah

 

Thanks for this and the time you spent.   Can you explain a little more?  I'm still unclear in how to apply this.  You seem to have 2 tables and 4 virtual fields (assuming that 'text box' is a virtual field?), but I'm also confused with which parent listbox and child cascading listbox are actually displayed to the User, and which are hidden.  What would really help is a simplified example that we could work through.  Is it possible to post one?

 

Many thanks

[linah]

Hi Farnsbarnes,

 

how about we take Ice cream and topping as en example (although its not a very good example i think it may simplify things), so the user is going to make an order. first, he will choose the flavor of the ice cream scoops form a list, then topping list will be shown based on the type of flavor he chose.

 

 

let's say the ice cream shop gives free choices of toppings with each type of ice cream flavor, and they can choose 1 or more topping. as the list below the free topping is listed based on the ice cream flavor. if the customer chose one or more flavor in the same category the co-responding list will be shown and if the customer chose multiple scoops with a mix of the two categories another list of toppings will be show which contains the all available toppings. 

 

Ice-cream                                    Toppings

strawberry,apple,mango               banana, strawberry, raspberry jam

vanilla,chocolate                           chocolate chip, chocolate fudge, strawberry

         

so in this scenario creating cascading list box based on another list box is not applicable, because the selected values in first list box won't concatenate until after submission.

 

This solution is not efficient  but some how solves the problem.

if you have any questions don hesitate to ask.

 

 

 

Implementation as follows:

 

Create Table named Order: That has icecream and toppings as attributes

 

Create Form based on table order which has the following fields,

icecream > type as list box with values (strawberry,apple,mango, vanilla,chocolate)

toppings > hidden (value of toppings will be set in the back end)

 

3 virtual list box fields, that will  hidden and shown in the back end based on selected flavor [we are doing this method because we couldn't find a solution to filter the options of the toppings based on the selected values of the icecream, so we have created three virtual fields each contain options of a certain scenario, if the user chose form category 1 show virtual1 and if from category 2 show virtual2 and if mix show virtual3  ]

virtual 1 > banana, strawberry, raspberry jam

virtual 2 >chocolate chip, chocolate fudge, strawberry

virtual 3 >banana, strawberry, raspberry jam, chocolate chip, chocolate fudge, strawberry

 

Code in the footer:

note: z equal the index of the selected option in icecream so if the user selects strawberry z=0, strawberry and apple z= 01,..etc all possible selection that might be selected to show virtual1

 

<SCRIPT LANGUAGE="JavaScript">

 

var icecream = document.getElementsByName("InsertRecordicecream")[0];

icecream.multiple = true ;  

 

var v1=document.getElementById("cbParamVirtual1");

var v2=document.getElementById("cbParamVirtual2");

var v3=document.getElementById("cbParamVirtual3");

 

v1.multiple = true ;  

v2.multiple = true ;

v3.multiple = true ;

 

 

//hide a,b

v1.style.display = "none";

v2.style.display = "none";

v3.style.display = "none";

 

 

function f()  { 

 

 

var toppingsValue="";//result of selected values from either a or b with "," between selected options

var z="";//index of selected values from icecream

 

   for (var i=0 ; i < icecream.options.length; i++ ) {

       if(icecream.options.selected){

          //z+=icecream.options.value +", ";

          z+=i +"";

       }

    }

 

 

if (z=="0" || z=="1" || z=="2" || z=="01" || z=="02" || z=="12" || z=="012")

{

v1.style.display = 'block';

// hide 

v2.style.display = 'none';

 v3.style.display = 'none';

 

   for (var i=0 ; i < v1.options.length; i++ ) {

       if(v1.options.selected){

          toppingsValue+=v1.options.value +", ";

       }

    }

}

else if (z=="3" || z=="4" || z=="34"){

 

v2.style.display = 'block';

// hide 

v1.style.display = 'none';

 v3.style.display = 'none';

 

 for (var i=0 ; i < v2.options.length; i++ ) {

       if(v2.options.selected){

          toppingsValue+=v2.options.value +", ";

       }

    }

 

 

}

 

 

else {

 

v3.style.display = 'block';

 

 

 for (var i=0 ; i < v3.options.length; i++ ) {

       if(v3.options.selected){

          toppingsValue+=v3.options.value +", ";

       }

    }

 

// hide v1,v2

v1.style.display = 'none';

v2.style.display = 'none';

 

}

 

document.getElementById("InsertRecordtoppings").value = toppingsValue.slice(0,-2);

 

}

 

 

 /* On submitting the webform, the function f is executed */

 document.getElementById("caspioform").onsubmit=f;

document.getElementById("caspioform").onchange=f; 

</SCRIPT>