how to make checkbox activated divs hide when radio button selected

mcfmullen · September 10, 2011

My question is a little more involved than appears n the surface so I am providing you with my code so you can test this yourselves:

I have two checkboxes: Show Likes and Show Dislikes which when deselected, hide all likes or all dislikes.

Every post has a pair of radio buttons: like and dislike. The user makes his selection for each post and then can use the checkboxes to hide/show his dislikes and likes.

This works quite well in my code. My code also sends the likes/dislikes to my database (check.php) so I can implement a memory of each like/dislike. This isn't for now, but the ajaxdiv simply displays the user's selection so I know it is actually sending info to check.php.

My problem is, when either checkbox is deselected and the user makes a radio button choice on a post, that post does not hide automatically. I need to have ajax implemented so that when I deselect Show Likes and then like a post, that post should disappear right away instead of forcing me to double click the checkbox again. You'll see what I mean if you try it out.

So can anyone help me ajaxify my radio buttons?

FYI: Why am I not using jQuery? Because my simple mind can't wrap around it and no one is able to give me a working translation of my code. I'm not asking for handouts, but I just don't understand jQuery, the manual makes no sense to me.

test.php:

function toggleLayer(formObj)
{
    var showLikes = document.getElementById('show_likes').checked;
    var showDislikes = document.getElementById('show_dislikes').checked;

    var postIndex = 1;
    while(document.getElementById('post_'+postIndex))
    {
        var liked = radioGroupValue(formObj.elements['like_'+postIndex])
        var display = ((!showLikes && liked==='1') || (!showDislikes && liked==='0')) ? 'none' : '';
        document.getElementById('post_'+postIndex).style.display = display;
        postIndex++;
    }
}

function do_submit() 
{
             document.forms['myform'].submit();
}
</script>

<script language="javascript" type="text/javascript">
<!-- 
//Browser Support Code
function ajaxFunction(){
var ajaxRequest;  // The variable that makes Ajax possible!

try{
// Opera 8.0+, Firefox, Safari
ajaxRequest = new XMLHttpRequest();
} catch (e){
// Internet Explorer Browsers
try{
    ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
    try{
        ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
    } catch (e){
        // Something went wrong
        alert("Your browser broke!");
        return false;
    }
}
}
// Create a function that will receive data sent from the server
ajaxRequest.onreadystatechange = function(){
if(ajaxRequest.readyState == 4){
    var ajaxDisplay = document.getElementById('ajaxDiv');
    ajaxDisplay.innerHTML = ajaxRequest.responseText;
}
}
var entered=null;
var arr=document.getElementsByName("like_1");
for(var i=0;i<arr.length;i++){
if(arr[i].checked){
    entered=arr[i].value;
    break;
}
}
var queryString = "?entered=" + entered;
ajaxRequest.open("GET", "check.php" + queryString, true);
ajaxRequest.send(null); 
}

//-->
</script>


</head>
<body>

<form name="myform" action="check.php" method="post">
    <fieldset>
        <legend>Unhide Layer Form</legend>
        <ul>
            <p><input id="show_likes" name="show_likes" type="checkbox" value="1" checked="checked" onclick="toggleLayer(this.form);" /><label for="b1">Show Likes:</label> </p>
            <p><input id="show_dislikes" name="show_dislikes" type="checkbox" value="1" checked="checked" onclick="toggleLayer(this.form);" /><label for="b1">Show Disikes:</label> </p>
        </ul>

    <label>Email:</label>

        <input type="email" />  
    </fieldset>
<br><br>

    <fieldset>
        <legend>Posts</legend>

<div id="post_1" class="post">
    <b>Post #1</b><br>
    Content of post #1<br>
    <p><input type="radio" name="like_1" value="1" onclick="ajaxFunction();" onchange="ajaxFunction();" /><label for="like1a">Like</label></p> <p><input type="radio" name="like_1" value="0" onclick="ajaxFunction();" onchange="ajaxFunction();" /><label for="like1b"> Dislike</label></p>
</div>
    </form>
</fieldset>

<div id='ajaxDiv'>Your result will display here</div>
</body>

For the curious, check.php:

<?php
echo 'Value selected: ' . $_GET['entered'];
?>

Sign In

how to make checkbox activated divs hide when radio button selected

Recommended Posts

mcfmullen

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information