P2PU via YQL HTMLSTRING
HTML
<script src="https://github.com/jquery/jquery-tmpl/raw/master/jquery.tmpl.min.js"></script>
<script src="http://github.com/malsup/form/raw/master/jquery.form.js"></script>
<script id="template" type="text/x-jquery-tmpl">
<label for="${title}">
<img src="${image}" width="125px" height="90px">
</label>
<input type="radio" id="${title}" name="_fid_6" value="${title}" style="display:none;">
</script>
<h1>What is your favorite Jonny Quest episode?</h1>
<form id="myform" action="https://www.quickbase.com/db/bgjhuwees" method="get">
<input type="hidden" name="act" value="API_AddRecord">
<div id="info"></div>
<input type="submit" value="Submit Favorite Episode">
</form>
CSS
img {
border: 2px solid black;
}
JavaScript
function complete() {
window.open("https://www.quickbase.com/db/bgjhuwees?a=q&qid=5&ifv=1","Survey Summary");
}
var options = {complete: complete};
$("#myform").ajaxForm(options);
var queryurl = "https://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20htmlstring%20where%20url%3D'http%3A%2F%2Fwww.prezzibenzina.it%2Fdistributori%2F14605'%20and%20xpath%3D'%2F%2Fdiv%5B%40id%3D%22station%22%5D'&format=json&diagnostics=true&env=store%3A%2F%2Fdatatables.org%2Falltableswithkeys&callback=";
var url;
var title;
var image;
var episodes=[];
$.getJSON(queryurl ,function(data) {
var div= data.query.results.div;
for (idiv=0; idiv<div.length; idiv++) {
url=div[idiv].table.tr.td[0].a.href;
title=div[idiv].table.tr.td[0].a.img.alt;
image=div[idiv].table.tr.td[0].a.img.src;
episodes.push({
title: title,
url: url,
image: image
});
}
//console.log(episodes);
$("#template").tmpl(episodes).appendTo("#info");
$("img").click(function(){
$("img").css("border","2px solid black");
$(this).css("border","2px solid red");
});
});