Poll with images instead of radio buttons

Aaron4osu · February 4, 2012

I'm trying to create a database driven poll to allow users to "like" or "dislike" each video on my site. But instead of radio buttons and a submit button I want to use images with jquery handling the submit when a choice is made.

I have found 2 tutorials that each accomplish part of what I want.

This tutorial has a poll which is perfect because I can pass in a poll id (which will be the same value as my video id) and it will load that video's poll.

http://www.webresourcesdepot.com/ajax-poll-script-with-php-mysql-jquery/

This tutorial replaces the radio buttons with images.

http://www.weblee.co.uk/2009/05/30/radio-button-replacement-with-style/

I have them both working separately on this page

http://aaronhaas.com/poll2/

I can't seem to figure out how to combine the two together. The poll script generates its html inside of a php function. In the code below I have commented out the line ( getPoll(1) ) that calls the function and replaced it with the html it generates to make it easier to see what is going on.

Another problem is each form has a different action so both actions somehow need to be combined together into a function. I was hoping someone might want to see if they can combine the two together and post it as a tutorial or demo.

<?php 
require("inc/db.php");
require("inc/functions.php"); 
?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Ajax Poll Script - Demo</title>


		<!-- styles and js for poll -->
<script src="inc/js/jquery-1.4.2.min.js" type="text/javascript"></script>
<script src="inc/js/poll.js" type="text/javascript"></script>
<style>
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 1em;
}
#pollWrap{
width: 550px;
margin-left:40px;
}
#pollWrap h3 {
display:none;
color:red;
font-size: 1em;
margin-bottom: 5px;
display:none;
}
#pollWrap ul {
margin: 0;
padding: 0 0 0 5px;

}
#pollWrap li {
padding: 0;
/*overflow:hidden;*/ /*for our lovely friend IE6 to behave nicely*/
font-size: 0.8em;
display: inline;

}
#pollWrap li span {
font-size: 0.7em;

}
.pollChart {
margin-left: 25px;
height: 10px;
width:1px;
/*Adding rounded corners to the graphs - Optional - START*/
-moz-border-radius-topright: 4px;
-moz-border-radius-bottomright: 4px;
-webkit-border-top-right-radius: 4px;
-webkit-border-bottom-right-radius: 4px;
/*Adding rounded corners to the graphs - Optional - END*/
}
#pollSubmit {
margin-top: 5px;
}
#pollMessage {
color:#C00;
font-size: 0.8em;
font-weight: bold;
}
</style>


		<!-- styles and js for image radio buttons -->
<link rel="stylesheet" type="text/css" href="css/radio.css">
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="js/radio-demo.js"></script>


</head>

<body>

<div id="greenlight">

<div id="options">

    	<ul id="list">
        	<li class="active"><a href="#" class="option1 active" id="link1"><span>Option</span></a></li>
        	<li><a href="#" class="option2" id="link2"><span>Option</span></a></li>
    	</ul>

</div> <!-- close options -->

<form action="step2.html" method="post" id="radioform">
	Green Light: <input name="option1" type="radio" value="option1" id="option1" checked="checked" /><br />
	Cancel: <input name="option1" type="radio" value="option2" id="option2" /><br />  
</form>

<!-- <p><a href="#" class="toggleform">Show Hidden Form Radion Buttons</a></p> -->



<?php 
	// getPoll(1); //$pollID
?>

<div id="pollWrap">
    <form name="pollForm" method="post" action="inc/functions.php?action=vote">
        <h3>Poll Question 1</h3>
        <ul>
            <li>
                <input name="pollAnswerID" id="pollRadioButton1" value="1" type="radio">
                Answer1 for Poll1
                <span id="pollAnswer1"></span>
		</li>
            <li class="pollChart pollChart1"></li>
            <li>
                <input name="pollAnswerID" id="pollRadioButton2" value="2" type="radio">
                Answer2 for Poll1
                <span id="pollAnswer2"></span>
            </li>
            <li class="pollChart pollChart2"></li>
        </ul>
        <input name="pollSubmit" id="pollSubmit" value="Vote" type="submit">
        <span id="pollMessage"></span>
        <img src="ajaxLoader.gif" alt="Ajax Loader" id="pollAjaxLoader">
    </form>
</div>


</div><!-- close greenlight -->

</body>
</html>

Sign In

Poll with images instead of radio buttons

Recommended Posts

Aaron4osu

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information