Hiding result columns based on Radio Button selection

[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

 

[CoopperBackpack]

Hello @DiogoBem,

You are correct, the radio buttons have id that looks like id="Value1_10_....", id="Value1_11_....", etc. 

Please note that each id includes some dynamic digits as well, in your example with  id="Value1_10_323d54705b4c9c" it is 323d54705b4c9c.

So, if you try to get the element as var test= document.getElementById("Value1_10") you receive Null. You need to get element where id 'begins with' or 'contains' "Value1_10".

This external article can be helpful https://www.w3schools.com/cssref/css_selectors.asp

Please try using a slightly different syntax. For example, if I add the button to the search page as you tried, the following code works for me.

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

<script>

var test1= document.querySelector('[id^="Value1_10"]');
var test2=document.querySelector('[id^="Value1_11"]');
var test3=document.querySelector('[id^="Value1_12"]');
var test4=document.querySelector('[id^="Value1_13"]');

function myFunction() {
 if (test1.checked){
   alert('test1')
}
else if(test2.checked){
   alert('test2')
}
else if(test3.checked){
   alert('test3')
}
else if(test4.checked){
   alert('test4')
	}
}
</script>

This is how it looks on the DataPage (for better visualization):

[CoopperBackpack]

I would like to add that if you want to make some value a default one, please select this value and click the checkmark button.

You may learn more in this article https://howto.caspio.com/datapages/forms/form-element-types/

If you want to customize your DataPages with JS solutions, maybe these articles are helpful as well

https://howto.caspio.com/datapages/ajax-loading/

https://howto.caspio.com/release-notes/caspio-bridge-13-0/13-0-impacted-areas/

[DiogoBem]

 @CoopperBackpack,thank you for your help.

I don't know why, but it didn't work here using variables (test1, test2)... I had to call de queryselector inside the IF directly:

if(document.querySelector('[id^="Value1_10"]').checked==true) ....

This way it worked just fine..

I'm still struggling with being able to hide certain column based on the results of the radio button. I tried this:

 

<script type="text/javascript">

if (document.querySelector('[id^="Value1_10"]').checked==true)
{
alert("a")
<style>
#target table:nth-of-type(1) td:nth-of-type(1)  {display: none;}
#target table:nth-of-type(1) th:nth-of-type(1)  {display: none;}
#target table:nth-of-type(1) td:nth-of-type(2)  {display: none;}
#target table:nth-of-type(1) th:nth-of-type(2)  {display: none;}
</style>
}


if (document.querySelector('[id^="Value1_11"]').checked==true)
{
alert("b")
<style>
#target table:nth-of-type(1) td:nth-of-type(3)  {display: none;}
#target table:nth-of-type(1) th:nth-of-type(3)  {display: none;}
#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;}
</style>
}

if (document.querySelector('[id^="Value1_12"]').checked==true)
{
alert("c")
<style>
#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;}
</style>
}


</script>


</header>
<div id="target">
<header>

With this code, the alerts work fine but I'm not able to hide the columns correctly. The columns 1-6 are always hidden, independently from the Radio Button results.

Is it possible to do what I did, putting <style> inside a condition?

Do you have any suggestions?

[futurist]

On 12/16/2020 at 7:21 PM, DiogoBem said:

 @CoopperBackpack,thank you for your help.

I don't know why, but it didn't work here using variables (test1, test2)... I had to call de queryselector inside the IF directly:

if(document.querySelector('[id^="Value1_10"]').checked==true) ....

This way it worked just fine..

I'm still struggling with being able to hide certain column based on the results of the radio button. I tried this:

 

<script type="text/javascript">

if (document.querySelector('[id^="Value1_10"]').checked==true)
{
alert("a")
<style>
#target table:nth-of-type(1) td:nth-of-type(1)  {display: none;}
#target table:nth-of-type(1) th:nth-of-type(1)  {display: none;}
#target table:nth-of-type(1) td:nth-of-type(2)  {display: none;}
#target table:nth-of-type(1) th:nth-of-type(2)  {display: none;}
</style>
}


if (document.querySelector('[id^="Value1_11"]').checked==true)
{
alert("b")
<style>
#target table:nth-of-type(1) td:nth-of-type(3)  {display: none;}
#target table:nth-of-type(1) th:nth-of-type(3)  {display: none;}
#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;}
</style>
}

if (document.querySelector('[id^="Value1_12"]').checked==true)
{
alert("c")
<style>
#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;}
</style>
}


</script>


</header>
<div id="target">
<header>

With this code, the alerts work fine but I'm not able to hide the columns correctly. The columns 1-6 are always hidden, independently from the Radio Button results.

Is it possible to do what I did, putting <style> inside a condition?

Do you have any suggestions?

  Hi,

Jus to add, you may refer to this link on how to hide (or do any other stylings) multiple sibling elements all at once:

 

[Kurumi]

Hi - Just an update, here are the other ways for you to hide column in the Tabular Report:

Without Download/Sort Options:

table[id*='cbTable'] > tbody > tr[class*='cbResultSetTableHeader'] > th:nth-child(1), td[class*='cbResultSetData']:nth-child(1){

    display:none !important;
  
}

With Download/Sort Options:

table[id*='FreezeTabularHeaderObj'] > tr[data-cb-name="header"] > th:nth-child(1), td[class*='cbResultSetData']:nth-child(1), #target table:nth-of-type(1) th:nth-of-type(1), #target table:nth-of-type(2) th:nth-of-type(1){

    display:none !important;
  
}

Replace 1 with the position order of column to be hidden.