Javascript: “if” form get value is “on”

Question

I'm having trouble making this script function correctly.

I am trying to make the value of a form input show or hide different sections on the action page.

For example, the html code below shows that all header text starts as hidden, but the javascript function should unhide the section based on the GET value of the form.

As a result, to show the "custom" section, the link would be http://domain.tld/action.php?custom=on

Here are the sections that need to be shown / hidden based on form values.

<div id="customsection" onload="javascript:customCheck();" style="display:none" class="custom">
    <h1>Custom Text</h1>
</div>

<div id="whitesection" onload="javascript:whiteCheck();"  style="display:none" class="white">
    <h1>White Text</h1>
</div>

<div id="colorsection" onload="javascript:colorCheck();"  style="display:none" class="color">
    <h1>Colored Text</h1>
</div>

Here are my script functions:

function customCheck() {
    if ($_GET['custom'] == 'on') {
        document.getElementById('customsection').style.display = 'block';
    }
    else document.getElementById('customsection').style.display = 'none';

}
function colorCheck() {
    if ($_GET['color'] == 'on') {
        document.getElementById('colorsection').style.display = 'block';
    }
    else document.getElementById('colorsection').style.display = 'none';

}
function whiteCheck() {
    if ($_GET['white'] == 'on') {
        document.getElementById('whitesection').style.display = 'block';
    }
    else document.getElementById('whitesection').style.display = 'none';

}

What is wrong with the script / how can I fix this?

Thanks in advance!

Answer 1

** Put this in your head tags of your page so it will run once your html is loaded **

You may want to look into isset() php function so you can check if the $_GET is set or not

<script>
    $(document).ready(function(){

        // --------------------------------------------------------
        // Just for convienience, set the gets as javascript variables 
        // so the bottom functions are cleaner
        // --------------------------------------------------------

        var custom = "<?php echo $_GET['custom']; ?>";
        var color = "<?php echo $_GET['color']; ?>";
        var white = "<?php echo $_GET['white']; ?>";

        // --------------------------------------------------------
        // On document load run these 3 functions
        // --------------------------------------------------------

        customCheck();
        colorCheck();
        whiteCheck();

        // --------------------------------------------------------
        // Create functions
        // --------------------------------------------------------
        function customCheck() {
            if (custom == 'on') {

                document.getElementById('customsection').style.display = 'block';
            }   else {
                document.getElementById('customsection').style.display = 'none';
            }
        }

        function colorCheck() {
            if (color == 'on') {
            document.getElementById('colorsection').style.display = 'block';
            } else {
                document.getElementById('colorsection').style.display = 'none';
            }
        }

        function whiteCheck() {
            if (white == 'on') {
                document.getElementById('whitesection').style.display = 'block';
            } else {
                document.getElementById('whitesection').style.display = 'none';
            }
        }

        // --------------------------------------------------------

    });
</script>

This goes wherever your HTML is within your body.

<div id="customsection" style="display:none" class="custom">
    <h1>Custom Text</h1>
</div>

<div id="whitesection" style="display:none" class="white">
    <h1>White Text</h1>
</div>

<div id="colorsection" style="display:none" class="color">
    <h1>Colored Text</h1>
</div>