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

    form not showing up properly in chrome and IE6

    How do I get a link to ignore hover on mouseover?

    How to hide header on scroll down, show on scroll up like linkedin menu

    How to create different and unique ID for some class in css?

    how to remove content border in Modal Window

    How to reload CSS when using Less.js

    How to get Floating DIVs inside fixed-width DIV to continue horizontally?

    CSS how to change color of a specific primary-panel in a if-block

    How to insert line breaks in HTML documents using CSS

    How to assign a Css class on an item based on click

    Bootstrap glyphicon/nav bar showing popup window

    how can css reset :hover to default state?

    How to add CSS to a specific div class - WordPress

    How can i make this css star smaller?

    How to hide classes on some pages in WordPress?

    Does anyone know how Pinterest.com's layout works?

    How to vertically center an element, that has a float, with CSS or JavaScript

    CSS, IE7… how to not move down the content

    How to enqueue second stylesheet in Wordpress child theme?

    How to reuse a css background sprite for icons of different sizes?

    How to prevent opening multiple popup windows?

    how to properly use CSS Class and ID [closed]

    CSS: How to change tooltip position to align to triggering element (rest of code working)

    How do I evenly space these links within my navbar div?

    How to make a curve on a rectangle's top in css? only in top edge

    How do I use CSS to select for a tag with arbitrary name attribute?

    How to create straight corners with CSS border-radius? [duplicate]

    How to implement a drag and swap effect in CSS and JS [closed]

    How to wait a while before adding elements in css? javascript?

    Image, src, href in same span. How to locate? Webdriver, css locator