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
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.
[CODE]<?php
require(“inc/db.php”);
require(“inc/functions.php”);
?>
<!-- styles and js for poll -->
<!-- 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>
<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>