Toggle radio button on javascript hide/show of div


Tags: javascript,php,html,css

Problem :

I've struggled with this one for a couple days and my lack of depth in JavaScript is getting the best of me. This project is in the "mock-up" stage. Briefly, the page starts with selecting a "series". Once selected we have several sections of "boxes" generated dynamically via PHP (eventually will come from database) with unique ID's for each box.

Each Box in each category can independently be turned on/off via hiding the box with a simple JavaScript change of the box div's css display value. This is done as the user will need a visual representation of what they are turning On or Off.

I need to keep track of each box's status as ON or OFF and when the user is done setting all the boxes as On or Off, they will submit the form (not coded yet) and the various radio button states will be acted on with future code not yet written. I am keeping track of this with a simple radio button "On" or "Off" for each box within each group. When the boxes are dynamically built, each group assigns a unique name for the radio button group for the box and a unique ID for each radio button within the box group.

I need the radio button to start with "On" checked for all boxes (i.e. all boxes are shown) and then if a box is clicked and hidden, the radio button for that box toggles from "On" to "Off" being checked. Then it toggles back to On if the box is shown again. Adding "checked" to the HTML radio button input does not work due to the JS, so it needs to be added via JS.

I understand how to change a single radio button state via JavaScript. Where I am struggling is how to set it up to deal with the dynamic boxes and act on each box as a unique action to set the initial state of "checked" for the "On" radio button and then swapping the values on hide/show. I know I probably need to use "this" in my JS, but... well, like I said, this is my weak area in JS and I'm am looking for guidance to learn.

Thanks in advance to everyone for helping to educate me!

HTML/PHP

<?php
/*Test Data */
$series140 = array(
    'st' => 2,
    'rt' => 3,
    'ibt' => 4,
    'dt' => 5,
    'lpjmh' => 6,
    'sjo' => 7,
    'mp' => 8,
    'mmo' => 9,
    'sd' => 8,
    'irp' => 7,
    'pl' => 6,
    'kl' => 5,
    'scbk' => 4,
    'dcbk' => 3,
    'ocgt' => 2
    );
$series220 = array(
    'st' => 2,
    'rt' => 3,
    'ibt' => 4,
    'dt' => 5,
    'lpjmh' => 6,
    'sjo' => 7,
    'mp' => 8,
    'mmo' => 9,
    'sd' => 8,
    'irp' => 7,
    'pl' => 6,
    'kl' => 5,
    'scbk' => 4,
    'dcbk' => 3,
    'ocgt' => 2
    );
$series240 = array(
    'st' => 2,
    'rt' => 3,
    'ibt' => 4,
    'dt' => 5,
    'lpjmh' => 6,
    'sjo' => 7,
    'mp' => 8,
    'mmo' => 9,
    'sd' => 8,
    'irp' => 7,
    'pl' => 6,
    'kl' => 5,
    'scbk' => 4,
    'dcbk' => 3,
    'ocgt' => 2
    );
$series440 = array(
    'st' => 2,
    'rt' => 3,
    'ibt' => 4,
    'dt' => 5,
    'lpjmh' => 6,
    'sjo' => 7,
    'mp' => 8,
    'mmo' => 9,
    'sd' => 8,
    'irp' => 7,
    'pl' => 6,
    'kl' => 5,
    'scbk' => 4,
    'dcbk' => 3,
    'ocgt' => 2
    );
$series540 = array(
    'st' => 2,
    'rt' => 3,
    'ibt' => 4,
    'dt' => 5,
    'lpjmh' => 6,
    'sjo' => 7,
    'mp' => 8,
    'mmo' => 9,
    'sd' => 8,
    'irp' => 7,
    'pl' => 6,
    'kl' => 5,
    'scbk' => 4,
    'dcbk' => 3,
    'ocgt' => 2
    );
$series640 = array(
    'st' => 2,
    'rt' => 3,
    'ibt' => 4,
    'dt' => 5,
    'lpjmh' => 6,
    'sjo' => 7,
    'mp' => 8,
    'mmo' => 9,
    'sd' => 8,
    'irp' => 7,
    'pl' => 6,
    'kl' => 5,
    'scbk' => 4,
    'dcbk' => 3,
    'ocgt' => 2
    );
$series740 = array(
    'st' => 2,
    'rt' => 3,
    'ibt' => 4,
    'dt' => 5,
    'lpjmh' => 6,
    'sjo' => 7,
    'mp' => 8,
    'mmo' => 9,
    'sd' => 8,
    'irp' => 7,
    'pl' => 6,
    'kl' => 5,
    'scbk' => 4,
    'dcbk' => 3,
    'ocgt' => 2
    );
$series2100 = array(
    'st' => 2,
    'rt' => 3,
    'ibt' => 4,
    'dt' => 5,
    'lpjmh' => 6,
    'sjo' => 7,
    'mp' => 8,
    'mmo' => 9,
    'sd' => 8,
    'irp' => 7,
    'pl' => 6,
    'kl' => 5,
    'scbk' => 4,
    'dcbk' => 3,
    'ocgt' => 2
    );
$series3300 = array(
    'st' => 1,
    'rt' => 0,
    'ibt' => 4,
    'dt' => 5,
    'lpjmh' => 3,
    'sjo' => 1,
    'mp' => 2,
    'mmo' => 1,
    'sd' => 2,
    'irp' =>47,
    'pl' => 4,
    'kl' => 2,
    'scbk' => 3,
    'dcbk' => 3,
    'ocgt' => 2
    );

if (isset($_POST['build'])) {
    $series = $_POST['doorSeries'];
    switch ($series) {
        // BUILD SERIES FUNCTION TO PULL FROM DATABASE IN FUTURE CODE
        case 140:
        $series = $series140;
        break;
        case 220:
        $series = $series220;
        break;
        case 240:
        $series = $series240;
        break;
        case 440:
        $series = $series440;
        break;
        case 540:
        $series = $series540;
        break;
        case 640:
        $series = $series640;
        break;
        case 740:
        $series = $series740;
        break;
        case 2100:
        $series = $series2100;
        break;
        case 3300:
        $series = $series3300;
        break;
        default:
        echo "not a valid selection";
        exit;
        break;
    }
}
function seriesBlocks($blockType) {
    if (is_array($blockType)) {
        $category = '';
        foreach ($blockType as $key => $value) {
            $categoryName = $key;
            $category .= '<h1>' . $categoryName . ' ' . $value . '</h1>';
            // $category .= '<p>show all | hide all</p>';
            for ($i=0; $i < $value; $i++) {
                $blockName = $categoryName . 'Block' . $i;
                $category .= "<a href=javascript:ReverseDisplay('". $blockName ."') class='shopLink'>";
                $category .= 'Click to show/hide.';
                $category .= '<input type="radio" name="' . $blockName . '" id="' . $blockName . 'On" value="on" >On';
                $category .= '<input type="radio" name="' . $blockName . '" id="' . $blockName . 'Off" value="off">Off';
                $category .= '<div id="' . $blockName . '" class="shopBlock">';
                $category .= '<h1>' . $blockName . '</h1>';
                $category .= '<p>Blah Blah Blah</p>';
                $category .= '</div></a>';
            }
            $category .= '<div class="clearfix"></div>';
        }
    }
    return $category;
}

 ?>
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
<script type="text/javascript" src="javascript.js"></script>
<link rel="stylesheet" href="style.css">
    <title>Shop Drawings</title>
</head>
<body>

<!-- Testing area -->
<h1>Testing Area</h1>
<?php 
    print_r($series140);
 ?>
<div class="clearfix"></div>
<!-- End Testing Area -->
<br />

<form name="BuildShopDrawing" method="post" action="<?php echo $_SERVER['PHP_SELF']; ?>">
    <label for="doorSeries">Select Door Series to Build:</label>
    <select name="doorSeries" id="doorSeries">
        <option value="140">140</option>
        <option value="220">220</option>
        <option value="240">240</option>
        <option value="440">440</option>
        <option value="540">540</option>
        <option value="640">640</option>
        <option value="740">740</option>
        <option value="2100">2100</option>
        <option value="3300">3300</option>
    </select>
    <input type="submit" name="build" id="build" value="Start the Build">
</form>

    <?php 
    if ($_POST) {
        echo seriesBlocks($series);
        echo $series;
    }
 ?>

</body>
</html>

JavaScript

function ReverseDisplay(d) {
    if(document.getElementById(d).style.display == "none") { 
        document.getElementById(d).style.display = "block";
        document.getElementById(d + "On").checked = true;
     }
    else {
        document.getElementById(d).style.display = "none";
        document.getElementById(d + "Off").checked = true;
    }
}

CSS

.shopLink {
    display: block;
    float: left;
    background-color: #ccc;
    margin: 10px;
}
.clearfix {
    clear: both;
}
h1 {
    margin-bottom: 0;
}


Solution :

Kept at it and got the light bulb to go on.

Changed JS to:

function reverseDisplay(d) {
    if(document.getElementById(d).style.display == "none") { 
        document.getElementById(d).style.display = "block";
        document.getElementById(d + "On").checked = true;
     }
    else {
        document.getElementById(d).style.display = "none";
        document.getElementById(d + "Off").checked = true;
    }
}

After that, set the default of the "On" radio button to "checked" in the dynamically created HTML so just the PHP function changed to:

function seriesBlocks($blockType) {
    if (is_array($blockType)) {
        $category = '';
        foreach ($blockType as $key => $value) {
            $categoryName = $key;
            $category .= '<h1>' . $categoryName . ' ' . $value . '</h1>';
            // $category .= '<p>show all | hide all</p>';
            for ($i=0; $i < $value; $i++) {
                $blockName = $categoryName . 'Block' . $i;
                $category .= "<a href=javascript:reverseDisplay('". $blockName ."') class='shopLink'>";
                $category .= 'Click to show/hide.';
                $category .= '<input type="radio" name="' . $blockName . '" id="' . $blockName . 'On" value="on" checked>On';
                $category .= '<input type="radio" name="' . $blockName . '" id="' . $blockName . 'Off" value="off">Off';
                $category .= '<div id="' . $blockName . '" class="shopBlock">';
                $category .= '<h1>' . $blockName . '</h1>';
                $category .= '<p>Blah Blah Blah</p>';
                $category .= '</div></a>';
            }
            $category .= '<div class="clearfix"></div>';
        }
    }
    return $category;

All is working as desired now.

Thank you to everyone for your assist. Most of the comments lead me in directions that helped me figure this out. Greatly Appreciated!


    CSS Howto..

    How to set multiple css using jquery animate function

    How to have background between two handles of jQuery Slider using css gradient

    How to identify element using link name in a onclick html tag?

    How to ensure dynamic CSS is loaded first before AJAX content?

    How to make gridview in asp.net scrollable?

    how to center UL in my page?

    How can I vertically centre bullets that bracket headers

    How to set overlay on a page according to page height using CSS

    How to prevent “jerking” of page in browser

    How to hide/show the content of a div with dynamic height?

    How to create a Line Item with vertical middle aligned text?

    How to align div in body to stay with specific height and width

    How to make all divs same height, based on text content?

    How to override priority in CSS classes?

    How to make bootstrap 3 navbar not wrap

    How to style JavaScript created text using CSS's @font-face

    How to shift element upwards to it's variable height using css

    How to set custom fonts in JavaFX Scene Builder using CSS

    How to draw child element's border outside its parent in CSS (or simulate this effect)?

    How to persist local CSS change to server record?

    How do I correct this CSS fluid layout glitch?

    How to set the added elements by jQuery to the behind of other element

    How to create four even and fluid css columns?

    How to format XML file with CSS?

    How to build some basic tiles with Title and Description?

    How does a CSS rule override another CSS rule?

    How to make a gallery

    HTML/CSS how to temporarily highlight a section of a page [duplicate]

    How to add a class to select_tag in Ruby on Rails

    How can I give an image a black opaque overlay?