CODEWITHSUNDEEP
javascriptphpgravity-forms-plugin
Jaiden Fahey
Jaiden Fahey

Reputation: 35

Hide a div if Gravity form results return nothing

I have a Gravity form which is being used as an assessment. Users click checkboxes that are relevant to them and the confirmation page shows different groups they qualify for (due to the checkboxes that clicked).

If a group doesn't have any of its boxes checked, it won't appear on the submission page (the result is hidden).

I'm trying to also hide a div from appearing if XYZ group doesn't appear. For example, if result1 didn't have anything checked, I want to hide div id "myid".

I've been trialling and erroring in how to get this done with php but am still learning the language and feeling a bit lost. I found the JS code below and thought it could be a good indication of what I'm trying to achieve. I just don't know how to exactly get it.

 if($result111 = '') {
        document.getElementById("myid").style.display = 'none';
    }
    else
    {
        document.getElementById("myid").style.display = 'inline';
  }

Upvotes: 1

Views: 129

Answers (1)

D. Dimopoulos
D. Dimopoulos

Reputation: 315

I have created an example of the task you described:

<html>

    <head>
        <title>Hide div</title>
    </head>

    <body>
        <input type="checkbox" id="choice1" name="choice1" value="1" onclick="choiceEvent()"> Choice 1 <br>
        <input type="checkbox" id="choice2" name="choice2" value="1" onclick="choiceEvent()"> Choice 2 <br>
        <input type="checkbox" id="choice3" name="choice3" value="1" onclick="choiceEvent()"> Choice 3 <br>

        <div id="results" style="display:none">
            One of the checkboxes is pressed.
        </div>

        <script>
            function choiceEvent(){

                var choice1 = document.getElementById('choice1');
                var choice2 = document.getElementById('choice2');
                var choice3 = document.getElementById('choice3');

                if(choice1.checked || choice2.checked || choice3.checked){
                    document.getElementById('results').style.display = 'block';
                } else {
                    document.getElementById('results').style.display = 'none';
                }
            }
        </script>
    </body>

</html>

I hope it helps.

Upvotes: 1

Related Questions