I’m building a video gallery which spans over 15 pages so far. My pages consists of a thumb for each video clip. Each page contains between 200 to 300 thumbs. When the thumb it selected, it opens a modal with pic, description & play button to view video. I’m using a star rating module called StarRate which gives each thumb a set of 5 stars to rate the video. Each star is a radio button which you can select to give each thumb the desired rating. All works as intended, but I need ability to load the values of the radio buttons when the page loads from a local file. I also need it to save all values whenever a rating is changed, overwriting the original file so it will be updated when the page is opened later. This runs on local machine and isn’t on a server and only runs locally, so I have no database available to store and retrieve the values. I am a beginner so any help you can provide would be greatly appreciated 🙂
This is an example of my code:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<title>Video Gallery</title>
<link rel="stylesheet" type="text/css" href="assets/css/bootstrap.min.css" />
<link type="text/css" href="assets/StarRate/jquery-ui.min.css" rel="stylesheet" />
<link rel="stylesheet" type="text/css" href="assets/css/styles.css" />
<link rel="stylesheet" type="text/css" href="assets/css/thumbs_new.css" />
<link href='assets/StarRate/jquery.rating.css' type="text/css" rel="stylesheet"/>
<script type="text/javascript" src="assets/js/jquery-3.5.1.min.js"></script>
<script type="text/javascript" src="assets/js/bootstrap.bundle.min.js"></script>
<script type="text/javascript" src="assets/StarRate/jquery-ui.min.js"></script>
<script type="text/javascript" src="assets/js/pre_load_img.js"></script>
<script type="text/javascript" src="assets/js/rdm_bg_imgV2.js"></script>
<script type="text/javascript" src="assets/StarRate/jquery.MetaData.js"></script>
<script type="text/javascript" src="assets/StarRate/jquery.rating.js"></script>
</head>
<body>
<div id="wrapper">
!-- Page Header -->
<a name="pagetop" ></a>
<div id="banner" align="center"><img src="images/banner.png" width="75%" /></div>
<!-- Menu -->
<div align="center"><script type="text/javascript" src="assets/js/navmenu.js"></script></div>
<div id="content">
<div class="thumbContainer">
<button class="btn-thumb" id='pic10' href="#M1"></button>
<div class="starContainer">
<input class="hover-star" type="radio" name="m1" value="1" title="Very poor"/>
<input class="hover-star" type="radio" name="m1" value="2" title="Poor"/>
<input class="hover-star" type="radio" name="m1" value="3" title="OK"/>
<input class="hover-star" type="radio" name="m1" value="4" title="Good"/>
<input class="hover-star" type="radio" name="m1" value="5" title="Very Good"/>
</div>
</div>
<div class="thumbContainer">
<button class="btn-thumb" id='pic20' href="#M2"></button>
<div class="starContainer">
<input class="hover-star" type="radio" name="m2" value="1" title="Very poor"/>
<input class="hover-star" type="radio" name="m2" value="2" title="Poor"/>
<input class="hover-star" type="radio" name="m2" value="3" title="OK"/>
<input class="hover-star" type="radio" name="m2" value="4" title="Good"/>
<input class="hover-star" type="radio" name="m2" value="5" title="Very Good"/>
</div>
</div>
<div id="M1"class="modal"><div class="modal-content">
<div class="modal-header"><span class="close">×</span><h2>video 1</h2></div>
<div class="modal-body">
<div class="popupDivPic"><img src="images/posters/video1.jpg" /></div>
<div class="popupDivTxt">
<div class="genreBox">Educational</div>
<div class="DivTxtContainer">
<div class="DivTxtColumn1">Rating :<span class="ratingNUM">7.5</span></div>
<div class="DivTxtColumn2">Runtime :<span class="runtimeNUM">53min</span></div>
</div>
<a href="file:///O|videos/video1.mkv" title="Start video"><img src="images/playBTN2.gif" /></a><br/>
<p>description</p><br/>
</div>
</div>
<div class="modal-footer"></div>
</div></div>
<div id="M2"class="modal"><div class="modal-content">
<div class="modal-header"><span class="close">×</span><h2>video 2</h2></div>
<div class="modal-body">
<div class="popupDivPic"><img src="images/posters/video2.jpg" /></div>
<div class="popupDivTxt">
<div class="genreBox">Educational</div>
<div class="DivTxtContainer">
<div class="DivTxtColumn1">Rating :<span class="ratingNUM">5.5</span></div>
<div class="DivTxtColumn2">Runtime :<span class="runtimeNUM">45min</span></div>
</div>
<a href="file:///O|videos/video2.mkv" title="Start video"><img src="images/playBTN2.gif" /></a><br/>
<p>description</p><br/>
</div>
</div>
<div class="modal-footer"></div>
</div></div>
</div><!-- content closed -->
</div><!-- wrapper closed -->
<script type="text/javascript" src="assets/js/open_modal.js"></script>
<div class="footer"><h1><a href="#pagetop" >Back to top</a></h1></div>
<script type="text/javascript"> ChangeIt(); </script>
</body>
</html>
I’m able to retrieve the selected value of each selected star radio button using this code:
<!-- Submit button -->
<button type="button" onclick="displayRadioValue()">
Submit
</button>
<br>
<div id="result"></div>
<script>
function displayRadioValue() {
document.getElementById("result").innerHTML = "";
var ele = document.getElementsByTagName('input');
for (i = 0; i < ele.length; i++) {
if (ele[i].type = "radio") {
if (ele[i].checked)
document.getElementById("result").innerHTML
+= ele[i].name + " Value: "
+ ele[i].value + "<br>";
}
}
}
</script>
I can set the value on page load of a star radio button using this code:
<script>
$(function() {
var $radios = $('input:radio[name=m2]');
if($radios.is(':checked') === false) {
$radios.filter('[value=2]').prop('checked', true);
}
});
window.onload = function() {
if(!window.location.hash) {
window.location = window.location + '#loaded';
window.location.reload();
}
}
</script>