Jump to content

Hiding result columns based on Radio Button selection


Recommended Posts

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

 

Link to comment
Share on other sites

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):

KE8SRmK.png

Link to comment
Share on other sites

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.

4R3QO7H.png

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/

Link to comment
Share on other sites

 @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?

Link to comment
Share on other sites

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.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
 Share

×
×
  • Create New...