Like/dislike buttons - Harder than it sounds!

mcfmullen · August 25, 2011

So I want to have a pair of radio buttons: 'Like' and 'Dislike' that the user can select. Each pair of radio buttons is to be attached to a unique post-id div.

I also want a pair of check boxes: "Hide Liked" and "Hide Disliked".

What I want to do is have the user be able to select whether he likes or dislikes each post and when he checks off 'Hide Liked', all the posts attached to the radio buttons marked 'Like' disappear. The same for "Hide Disliked".

This is the code I have so far but the problem is that the checkbox turns the radio button On and Off and obviously, I want them to work individually so that when the box is checked, the radio buttons remains On or Off as per the user's selection. Furthermore, how can I get the javascript to take into account all Div IDs (they will be numbered) that get added in the future as new posts are made/old posts are deleted?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-NZ">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Unhide on checkboxes/radio buttons</title>
    <script type="text/javascript">
    function toggleLayer(val)
    {
        if(val == 'on' || val === true)
        {
            document.getElementById('a1').checked = true;
            document.getElementById('layer1').style.display = 'block';
        }
        else if(val == 'off' || val === false)
        {
            document.getElementById('a2').checked = true;
            document.getElementById('layer1').style.display = 'none';
        }
    }
    </script>
</head>
<body>
    <form action="" method="post">
        <fieldset>
            <legend>Unhide Layer Form</legend>
            <ul>
                <li><label for="a1">On</label> <input id="a1" name="switcher" type="radio" value="off" checked="checked" onclick="toggleLayer(this.checked);" /> <label for="a2">Off</label> <input id="a2" name="switcher" type="radio" value="off" onclick="toggleLayer(!this.checked);" /></li>
                <li><label for="b1">Check Me:</label> <input id="b1" name="b1" type="checkbox" value="off" checked="checked" onclick="toggleLayer(this.checked);" /></li>
            </ul>
        </fieldset>
    </form>
    <div id="layer1">You can now see this.</div>
</body>
</html>

Psycho · August 25, 2011

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-NZ">
<head>
    <style>
    .post { border-bottom: 1px solid black; margin-bottom: 10px; }
</style>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Unhide on checkboxes/radio buttons</title>
    <script type="text/javascript">

function radioGroupValue(groupObj)
{
	//Check if there is only one option (i.e. not an array)
	if (!groupObj.length)
	{
		return (groupObj.checked) ? groupObj.value : false;
	}

	//Multiple options, iterate through each option
	for (var i=0; i<groupObj.length; i++)
	{
		if (groupObj[i].checked)
		{
			return groupObj[i].value;
		}
	}

	//No option was selected
	return false;
}


    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++;
	}
    }
    </script>
</head>
<body>
    <form action="" method="post">
        <fieldset>
            <legend>Unhide Layer Form</legend>
            <ul>
                <li><label for="b1">Show Likes:</label> <input id="show_likes" name="show_likes" type="checkbox" value="1" checked="checked" onclick="toggleLayer(this.form);" /></li>
			<li><label for="b1">Show Disikes:</label> <input id="show_dislikes" name="show_dislikes" type="checkbox" value="1" checked="checked" onclick="toggleLayer(this.form);" /></li>
		</ul>
        </fieldset>
<br><br>

<div id="post_1" class="post">
    <b>Post #1</b><br>
	Content of post #1<br>
	<input type="radio" name="like_1" value="1">Like <input type="radio" name="like_1" value="0" onclick="toggleLayer(this.form);"> Dislike
</div>
<div id="post_2" class="post">
    <b>Post #2</b><br>
	Content of post #2<br>
	<input type="radio" name="like_2" value="1">Like <input type="radio" name="like_2" value="0" onclick="toggleLayer(this.form);"> Dislike
</div>
<div id="post_3" class="post">
    <b>Post #3</b><br>
	Content of post #3<br>
	<input type="radio" name="like_3" value="1">Like <input type="radio" name="like_3" value="0" onclick="toggleLayer(this.form);"> Dislike
</div>
<div id="post_4" class="post">
    <b>Post #4</b><br>
	Content of post #4<br>
	<input type="radio" name="like_4" value="1">Like <input type="radio" name="like_4" value="0" onclick="toggleLayer(this.form);"> Dislike
</div>
<div id="post_5" class="post">
    <b>Post #5</b><br>
	Content of post #5<br>
	<input type="radio" name="like_5" value="1">Like <input type="radio" name="like_5" value="0" onclick="toggleLayer(this.form);"> Dislike
</div>
<div id="post_6" class="post">
    <b>Post #6</b><br>
	Content of post #6<br>
	<input type="radio" name="like_6" value="1">Like <input type="radio" name="like_6" value="0" onclick="toggleLayer(this.form);"> Dislike
</div>
<div id="post_7" class="post">
    <b>Post #7</b><br>
	Content of post #7<br>
	<input type="radio" name="like_7" value="1">Like <input type="radio" name="like_7" value="0" onclick="toggleLayer(this.form);"> Dislike
</div>
</form>
</body>
</html>

mcfmullen · August 25, 2011

PERFECT! This is exactly what I was trying to accomplish but now the hard part, how am I to make it so the information is remembered when the user returns to the website at a later date?

Psycho · August 26, 2011

Pull the data from the database and when you create the input fields set their values accordingly. For example, for the posts I would assume you are pulling the data from a database query and creating the post text and the radio button options in a while loop. Here is an example of how you could create the radiio buttons and select the appropriate one.

$postIndex = 0;
while($row = mysql_fetch_assoc($result))
{
    $postIndex++;
    $likeChecked = ($row['like']==1) ? ' checked="checked"' : '';
    $dislikeChecked = ($row['like']==0) ? ' checked="checked"' : '';

    echo "<div id=\"post_{$postIndex}\" class=\"post\">\n";
    echo "    <b>{$row['title']}</b><br>\n";
    echo "{$row['post_content']}<br>\n";
    echo "    <input type=\"radio\" name=\"like_{$postIndex}\" value=\"1\" onclick=\"toggleLayer(this.form);\"{$likeChecked}>Like\n";
    echo "    <input type=\"radio\" name=\"like_{$postIndex}\" value=\"0\" onclick=\"toggleLayer(this.form);\"{$dislikeChecked}> Dislike\n";
    echo "</div>\n";
}

mcfmullen · August 26, 2011

I was suggested that perhaps localStorage might be a better option but no method of implementing it seems to work. All it does is kill my checkboxes.

In your example, how would the radio buttons send their values to the database? I can see how their value are set from the database. does toggleLayer send as well as receive?

Psycho · August 26, 2011

In your example, how would the radio buttons send their values to the database? I can see how their value are set from the database. does toggleLayer send as well as receive?

I didn't put anything in to save changes to the Like/Dislike options. Since this will happen in real-time you will need to implement AJAX to save those selections without refreshing the page. Sorry, but I'm not going to write all this for you.

Sign In

Like/dislike buttons - Harder than it sounds!

Recommended Posts

mcfmullen

Link to comment

Share on other sites

Psycho

Link to comment

Share on other sites

mcfmullen

Link to comment

Share on other sites

Psycho

Link to comment

Share on other sites

mcfmullen

Link to comment

Share on other sites

Psycho

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information