Changing results columns based on Radio Button selection on the search form.

[DiogoBem]

Hi, 

I'm really new to Caspio and I've been struggling with a situation. 

A have a search form with a Radio button which contain 3 boxes (Company | Constructions | Massive Construction).  I'd like to hide certain columns based on the selection of this radio button.

For example: If I select Company and click "search", I'd like to hide columns 4,5,7 and 8 of the results page and if I select Constructions to hide columns 9,10,11 and 12.

I tried the following code inserted to the Header:

<script type="text/javascript">

var radios = document.getElementsById("Value1_1");
    for(i = 0; i < radios.length; i++) {
        if(radios[i].checked) {
            var filter = radios[i].value;
        }
    }


if (filter=='Company')
{
<style>
#target table:nth-of-type(1) td:nth-of-type(4)  {display: none;}
#target table:nth-of-type(1) th:nth-of-type(4)  {display: none;}
#target table:nth-of-type(1) td:nth-of-type(5)  {display: none;}
#target table:nth-of-type(1) th:nth-of-type(5)  {display: none;}
#target table:nth-of-type(1) td:nth-of-type(6)  {display: none;}
#target table:nth-of-type(1) th:nth-of-type(6)  {display: none;}
#target table:nth-of-type(1) td:nth-of-type(7)  {display: none;}
#target table:nth-of-type(1) th:nth-of-type(7)  {display: none;}
#target table:nth-of-type(1) td:nth-of-type(8)  {display: none;}
#target table:nth-of-type(1) th:nth-of-type(8)  {display: none;}

</style>
}

else if (filtro=='Consctruction')
{
<style>
#target table:nth-of-type(1) td:nth-of-type(9)  {display: none;}
#target table:nth-of-type(1) th:nth-of-type(9)  {display: none;}
#target table:nth-of-type(1) td:nth-of-type(10)  {display: none;}
#target table:nth-of-type(1) th:nth-of-type(10)  {display: none;}
#target table:nth-of-type(1) td:nth-of-type(11)  {display: none;}
#target table:nth-of-type(1) th:nth-of-type(11)  {display: none;}
#target table:nth-of-type(1) td:nth-of-type(10)  {display: none;}
#target table:nth-of-type(1) th:nth-of-type(10)  {display: none;}

</style>

</script>

 <div id="target">
   
   

and I added "</div> to the Footer

I thought that maybe the problem was the communication between the Search part of the form and the result (they are in the same DataPage).

So I tried something really simple to see if I could just display the results I'm getting from document.getElementsByName("Value1_1") and I get nothing. 

I tried inserting the following code in the Header, as well as in the Footer and only got "Undefined" as result:

<button onclick="myFunction()">Valor</button>

<script>

var test= document.getElementById("Value1_10").value
var test2=document.getElementById("Value1_11").value
var test3=document.getElementById("Value1_12").value
var test4=document.getElementById("Value1_1").value

if (document.getElementById("Value1_10").checked){
var test5="a"
}

if (document.getElementById("Value1_11").checked){
var test6="a"
}

if (document.getElementById("Value1_12").checked){
var test7="a"
}

if (document.getElementById("Value1_1").checked){
var test8="a"
}

function myFunction() {
  alert(test);
alert(test2);
alert(test3);
alert(test4);
alert(test5);
alert(test6);
alert(test7);
alert(test8);
}
</script>

I really have no idea what I'm doing wrong. I checked the html code of the Search Form and the Radio Button is really named as "Value1_1":

For example:  <input type="radio" name="Value1_1" id="Value1_10_323d54705b4c9c" value="Company">  

I also tried changing getElementById to ByName without success either.

 

I would also like to have the first field (Company) of the Radio button selected when I open the form and this first search already performed (displaying the results for the Company search). Is there a way to do it? 

Any help would be tremendously appreciated.

Thanks

 

[astroboy]

Hello there, have you already tried to implement this workflow using rules? If not, you may want to give it a try and see if that works. Here's a HowTo article for reference: https://howto.caspio.com/datapages/forms/conditional-forms/

[PotatoMato]

Hello @DiogoBem, just to add a comment from astroboy, Caspio has a Youtube tutorial regarding conditional forms. I hope this helps you out.

 

- PotatoMato

 

[futurist]

Hi @DiogoBem,

Based on your workflow, I tried this with two DataPages, one Search Form and one Report DataPage.

On the Search Form, I used a radio button that has three options for users to choose from: Field_3, Field_4. Field_5. I also added an All option if the user chooses to view all of them. This is a virtual field. I chose Radio Button as form element, then on the values, I set them up this way:

On the Same DataPage, on the Destination and Messaging, I selected "Go to a new page" then added the deployed URL of the Results Page, followed by the following syntax:

?Field=[@cbParamVirtual1]

where "Field" is the name I chose for this parameter, and [@cbParamVirtual1] is the value of the option I chose from the radio buttons.

Now, on the Report DataPage, on the Configure Results Page Fields, make sure that the fields you need are present. So in my case, Field_3, Field_4, Field_5 are present.

Add a Header and Footer. Select the Header and disable the HTML editor. Paste the following code:

<style>

th:nth-child(3), td:nth-child(3), th:nth-child(4), td:nth-child(4), th:nth-child(5), td:nth-child(5){
display:none;
}

</style>

This would be responsible for initially hiding the fields Field_3, Field_4, and Field_5. Make sure to change the numbers on the nth-child to that of the order at which the fields you need came in. So in my case, Field_3 is the third column, Field_4 is the fourth column, and Field_5 is the fifth column.

 

On the Footer, disable the HTML editor as well and paste the following:

 

<script type="text/javascript">
document.addEventListener('DataPageReady', function (event) {

if('[@Field]'=="Field_3"){

document.querySelector("th:nth-child(3)").style.display = "block";

document.querySelector("td:nth-child(3)").style.display = "block";

}

else if('[@Field]' =="Field_4"){

document.querySelector("th:nth-child(4)").style.display = "block";

document.querySelector("td:nth-child(4)").style.display = "block";
}else if('[@Field]' =="Field_5"){

document.querySelector("th:nth-child(5)").style.display = "block";

document.querySelector("td:nth-child(5)").style.display = "block";
}

else{
document.querySelector("th:nth-child(3)").style.display = "revert";

document.querySelector("td:nth-child(3)").style.display = "revert";

document.querySelector("th:nth-child(4)").style.display = "revert";

document.querySelector("td:nth-child(4)").style.display = "revert";

document.querySelector("th:nth-child(5)").style.display = "revert";

document.querySelector("td:nth-child(5)").style.display = "revert";
}

});
</script>

 

Wherein [@Field] refers to the parameter from the search form, which I named "FIeld". So going back to the Search Form, if a user chooses "Field_4" it's going to place the value connected to that option (Which is also 'Field_4') on the URL we placed on the Destination and Messaging of the Submission form, then shows the Field_4 column and its cells. Same goes for the other options.

Sample DP: https://c1hch576.caspio.com/dp/db26a000f2bb04008ec74fb8949a

 

Hope this helps!

 

 

 

[futurist]

 Hi,

Jus to add, you may refer to this link on how to apply CSS (such as hiding) multiple sibling elements all at once: