Jump to content
  • 0

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


DiogoBem
 Share

Question

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

3 answers to this question

Recommended Posts

  • 0

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:

image.png.09cb70802225e2e9efa43f51a433c9ce.png

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!

 

 

 

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
Answer this question...

×   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...