Develop Reference

Store - save - fetch/retreive array value (php)

I'm having a hard time of thinking how am I going to save the values taken from the checkbox (came from "modalForm").
I have 2 forms here. My "mainform" and "modalForm".
This codes are similar to my program, I just replace the values.
My program works like this. I have a search bar before this, searching unique id and after searching it, their details will be loaded here.
If you click the textbox, a modal will pop up containing checkboxes. If one checkbox is checked, its label beside it will be the one to be shown on the textbox. When two or more checkbox were checked, a word "multiple" will be shown in the UI.
Value(s) will be inserted/updated to the database.
In my case here, instead of label, value is the one showing on the textbox.
Can you help me how can I store the array that i used into database and how can I fetch their values once it was loaded again.
My working fiddle: https://jsfiddle.net/8bf3vjuk/
I'm having a hard time here because here are two forms.
testing.php
<form method="post" name="mainform" action="">
<label>Sports</label>
<a href="#modal" id="done"> <!-- when the input textbox was clicked, modal will pop up -->
<input disabled type="text" id="test" name="test" placeholder="test" value="">
<input class="hb_button3" type="submit" id="modalbutton" value="save"> <!-- once submit value taken on the checkbox will be save to the system database -->
</a>
</form>
<form method="post" name="modalForm" id="modalForm" action="testing.php">
<div class="modalwrapper" id="modal"> <!-- modal -->
<div class="modalcontainer">
<div class="modalcol1">
<label>Basketball </label>
<input type="checkbox" id="test_modal[]" name="test_modal[]" value="1">
<div class="clear"></div>
<label>Baseball </label>
<input type="checkbox" id="test_modal[]" name="test_modal[]" value="2">
<div class="clear"></div>
<label>Soccer </label>
<input type="checkbox" id="test_modal[]" name="test_modal[]" value="3">
<div class="clear"></div>
<label>Volleyball </label>
<input type="checkbox" id="test_modal[]" name="test_modal[]" value="4">
<div class="clear"></div>
<label>DOTA :)</label>
<input type="checkbox" id="test_modal[]" name="test_modal[]" value="5">
<div class="clear"></div>
<div class="savebutton">
<input class="btn1" id="submit" type="submit" value="Submit"/>
</div>
</div>
</div>
<div class="overlay"></div>
</div>
</form>
here is my styles.css
/* modal layout */
.modalwrapper {
top: 0;
left: 0;
opacity: 0;
position: absolute;
visibility: hidden;
box-shadow: 0 3px 7px rgba(0,0,0,.25);
box-sizing: border-box;
transition: all .4s ease-in-out;
-webkit-transition: all .4s ease-in-out;
-moz-transition: all .4s ease-in-out;
}
.modalwrapper:target {
opacity: 1;
visibility: visible
}
.overlay {
background-color: #000;
background: rgba(0,0,0,.8);
height: 100%;
left: 0;
position: fixed;
top: 0;
width: 100%;
z-index: 1;
}
.modalcontainer {
display: table;
background-color: #777;
position: relative;
z-index: 100;
color: #fff;
padding: 5px;
}
.modalcol1 { display: table-cell; }
.clear { clear: both; }
.modalwrapper input[type=checkbox] {
float: right;
margin-right: 20px;
}
.savebutton input[type=submit] {
float: right;
background-color: maroon;
color: #fff;
border: none;
padding: 5px 10px;
margin-top: 5px;
margin-right: 20px;
}
/* modal layout ends here */
my javascript code
$(document).ready(function(){
$("#done").click(function(e) {
// alert('ok');
$("#modal").fadeIn();
// e.preventDefault();
});
$("#submit").click(function(e) {
var checked = [];
i=0;
temp=""
$("input[name='test_modal[]']:checked").each(function ()
{ temp=$(this).val();
i++;
checked.push($(this).val());
});
if (i==1)
$("#test").val(temp);
else if (i>1)
$("#test").val('multiple');
else if (i==0)
$("#test").val('nothing');
$("#modal").fadeOut();
// alert($("#do").val())
e.preventDefault();
});
});
Hope you can help me guys. If you guys can suggest to replace my javascript by using any php statement like if condition, I will try to test it.
Many thanks.

How to disable other image when 2 image select out of 5?

In my website i want to add one feature to disable other image when user select 2 images.
In my website, i have 5 images. Form this 5 image user select max 2 no. of images.
When user select 2 images other 3 images are disable automatically.

See my demo on snippet.This is your answer, Hopefully it sends you in the right direction. Change js according to your need.Here I set length maximum 2.
if (+$("input[name=ItemGrp2]:checked").length > 2)
Use this code.
$( ".two" ).on( "change", function() {
if (+$("input[name=ItemGrp2]:checked").length > 2)
{
this.checked=false;
}
});
ul {
list-style-type: none;
}
li {
display: inline-block;
}
input[type="checkbox"][id^="cb"] {
display: none;
}
label {
border: 1px solid #fff;
padding: 10px;
display: block;
position: relative;
margin: 10px;
cursor: pointer;
}
label:before {
background-color: white;
color: white;
content: " ";
display: block;
border-radius: 50%;
border: 1px solid grey;
position: absolute;
top: -5px;
left: -5px;
width: 25px;
height: 25px;
text-align: center;
line-height: 28px;
transition-duration: 0.4s;
transform: scale(0);
}
label img {
height: 100px;
width: 100px;
transition-duration: 0.2s;
transform-origin: 50% 50%;
}
:checked + label {
border-color: #ddd;
}
:checked + label:before {
content: "✓";
background-color: grey;
transform: scale(1);
}
:checked + label img {
transform: scale(0.9);
box-shadow: 0 0 5px #333;
z-index: -1;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<ul>
<li><input class="two" name="ItemGrp2" type="checkbox" id="cb1" />
<label for="cb1"><img src="http://lorempixel.com/100/100" /></label>
</li>
<li><input class="two" name="ItemGrp2" type="checkbox" id="cb2" />
<label for="cb2"><img src="http://lorempixel.com/101/101" /></label>
</li>
<li><input class="two" name="ItemGrp2" type="checkbox" id="cb3" />
<label for="cb3"><img src="http://lorempixel.com/102/102" /></label>
</li>
<li><input class="two" name="ItemGrp2" type="checkbox" id="cb4" />
<label for="cb4"><img src="http://lorempixel.com/103/103" /></label>
</li>
</ul>

var $form = $('.form');
var $imgInputs = $form.find('.img-cb');
$imgInputs.on('change', function () {
var isMaxSelected = ($imgInputs.filter(':checked').length >= 2);
$imgInputs.not(':checked').prop('disabled', isMaxSelected);
});
.img-cb {
display: block;
position: absolute;
opacity: 0;
}
.img-cb:disabled + img {
opacity: 0.3;
}
.img-cb:checked + img {
outline: 1px solid red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-2.1.4.js"></script>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<form action="" class="form">
<label>
<input class="img-cb" type="checkbox">
<img src="http://placehold.it/150" alt="">
</label>
<label>
<input class="img-cb" type="checkbox">
<img src="http://placehold.it/150" alt="">
</label>
<label>
<input class="img-cb" type="checkbox">
<img src="http://placehold.it/150" alt="">
</label>
<label>
<input class="img-cb" type="checkbox">
<img src="http://placehold.it/150" alt="">
</label>
<label>
<input class="img-cb" type="checkbox">
<img src="http://placehold.it/150" alt="">
</label>
</form>
</body>
</html>

Create an event listener which increments a counter initialized to zero upon clicking an image, but only if the counter is not >=2. Also push the ids of the photos clicked (the object is passed along the event anyway)
If counter reaches 2, use jQuery/ native Javascript to hide the photos not in the id list. (This would require a continuous sequence of ids to be given to the photos and also knowledge of # of photos, which in this case is assumed to be 5 and never change dynamically)

Positioning text and the form on the parallel to each other (side by side) - HTML

I am trying to position a form and some paragraph texts on the left side by side so they are parallel to each other how ever I dont understand how I can do this
Currently I am trying to float the form to the right, however the social Icons then move from the bottom and position on the left of the screen
I want to position the ids: "myForm" and class "info" side by side
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Arshdeep Soni</title>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, inital-scale=1">
<link rel="stylesheet" type="text/css" href="reset.css"/>
<link rel="icon" type="image/png" href="images/ace.png"/>
<link rel="stylesheet" type="text/css" href="style.css"/>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="script.js">
</script>
<style type="text/css">
body {
background-color: black;
background-image: url();
color:white;
font-family: sans-serif;
}
#name {
color:white;
font-family: coolvetica;
font-size: 50px;
text-align: center;
padding-top: 60px;
letter-spacing: 6px;
font-weight: bolder;
text-transform: uppercase;
}
#magician {
color:white;
font-family: raleway;
font-size: 25px;
letter-spacing: 11px;
margin-top: 2%;
text-align: center;
}
hr {
border: 0;
height: 1px;
background: #333;
background-image: -webkit-linear-gradient(left, #ccc, #ffffff, #ccc);
background-image: -moz-linear-gradient(left, #ccc, #ffffff, #ccc);
background-image: -ms-linear-gradient(left, #ccc, #ffffff, #ccc);
background-image: -o-linear-gradient(left, #ccc, #ffffff, #ccc);
width:50%;
max-width: 100%;
}
#info {
}
#info h2 {
color:white;
font-family: Baron neue;
font-size: 30px;
padding: 30px 0px 0px 10px;
margin-right: 50%;
}
#info p {
font-family: sans-serif;
font-size: 15px;
padding-top: 10px;
padding-left: 10px;
margin-right: 50%;
}
#contact {
padding-left: 10px;
line-height: 1.7em;
margin-right: 50%;
}
#myForm {
top:0;
float:right;
}
</style>
</head>
<body>
<div class="header">
</div>
<span class="menu-Trigger" align="center" >☰ Menu</span>
<div class="nav-menu">
<ul>
<li>HOME</li>
<li><a href=#>VIDEOS</a></li>
<li><a href=#>IMAGES</a></li>
<li><a href=#>EVENTS</a></li>
<li><a href=#>TESTIMONIALS</a></li>
<li class="current">ENQUIRIES</li>
</ul>
</div>
<h1 id="name">Arshdeep Soni</h1>
<p id="magician">Magician</p>
<hr>
<div id="info">
<h2>Enquiries</h2>
<p id="contact">Phone: (+44)</p>
<email id="contact">Email: Bookings#ArshdeepSoni.com</email>
<p id="i"> For bookings please fill out the form below or email <a style="color:#01b2b2; text-decoration:none;"href="mailto: Bookings#ArshdeepSoni.com?" target="_top"> Bookings#ArshdeepSoni.com</b></a> and we will endeavour to get back to you within 48 hours.</p>
<form id="myForm" method="post" action="Contact.html" onsubmit="#">
<p>Your Name: </p>
<input type="text" name="name"/>
<p>Subject: </p>
<input type="text" name="subject"/></br>
<p>Your Email: </p>
<input type="text" name="email"/></br>
<p>Phone Number: </p>
<input type="text" name="number"/></br>
<p>Message: </p>
<textarea id="message"></textarea>
<input type="submit" value="Send"/>
</form>
</div>
<div class="main">
</div>
<div class="icons">
<a class="socialIcons" href="http://www.youtube.com" title="Subscribe on YouTube" alt="Arshdeep on YouTube"><img src="images/social/youtube.png"/></a>
<a class="socialIcons" href="http://www.instagram.com/ArshSoni" title="Subscribe!" alt="Arshdeep Soni"><img src="images/social/instagram.png" /></a>
<a class="socialIcons" href="http://www.facebook.com/MagicArsh" title="Arshdeep Soni on Facebook" alt="Facebook"><img src="images/social/fb.png" /></a>
<a class="socialIcons" href="http://twitter.com/ArshSoni" title="Follow Arshdeep on Twitter" alt="Twitter"><img src="images/social/twitter.png" /></a>
</div>
</body>
</html>

You should move "myForm" outside of the "info" div like this
<div id="info">
<h2>Enquiries</h2>
<p id="contact">Phone: (+44)</p>
<email id="contact">Email: Bookings#ArshdeepSoni.com</email>
<p id="i"> For bookings please fill out the form below or email <a style="color:#01b2b2; text-decoration:none;"href="mailto: Bookings#ArshdeepSoni.com?" target="_top"> Bookings#ArshdeepSoni.com</b></a> and we will endeavour to get back to you within 48 hours.</p>
</div>
<form id="myForm" method="post" action="Contact.html" onsubmit="#">
<p>Your Name: </p>
<input type="text" name="name"/>
<p>Subject: </p>
<input type="text" name="subject"/></br>
<p>Your Email: </p>
<input type="text" name="email"/></br>
<p>Phone Number: </p>
<input type="text" name="number"/></br>
<p>Message: </p>
<textarea id="message"></textarea>
<input type="submit" value="Send"/>
</form>
And your CSS for those elements should look like this
#myForm {
display:inline-block;
}
#info {
width: 50%; // Adjust to your liking
float:left;
}
https://jsfiddle.net/srf9w1w3/

You colud use box model in css to do that, please check the code below in the snippet
#media (min-width: 500px) {
.row:after {
content: " ";
display: table;
clear: both;
}
.column-half {
float: left;
width: 50%;
padding: 0 20px;
box-sizing: border-box;
border:solid 1px #ccc;
}
}
.clearfix:after {
content: "";
display: table;
clear: both;
}
.dcenter {
display:block;
text-align:center;
padding:5px;
}
<div class="row">
<div class="column-half">
HTML INFO HERE
</div>
<div class="column-half">
FORM CODE HERE
</div>
</div>
<div class="clearfix"></div>
<div class="dcenter">icons here</div>

Created a button using a Tutorial on Intellij what is wrong with the code?

as the title suggests. what im trying to do is get my button to show or hide the above text ( on my Tutorial Quiz page), by clicking the button. So what happens is the text shows. but when i click the button it will not hide.
Here is my html code for "Tutorial Quiz" Page
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Tutorial Quiz</title>
<link rel="stylesheet" href="css/normalize.css">
<link href='http://fonts.googleapis.com/css?family=Changa+One|Open+Sans:400,400italic,700,700italic,800' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/main.css">
<script src="quizconfig.js">
</script>
<script>
var actualchoices=new Array()
document.cookie="ready=yes"
</script>
</head>
<body>
<header>
<a href="Tutorial Quiz.html" id="logo">
<h1>Webprograming Quiz</h1>
<h2>by Chris Moore</h2>
</a>
<nav>
<ul>
<li>Home</li>
<li>Tutorial</li>
<li>Quiz</li>
<li>Feedback</li>
</ul>
</nav>
</header>
<div id="wrapper">
<p align="center">
<form method="POST" name="myquiz">
<font face="Arial"><big><big>General Knowledge Quiz</big></big></font></p>
<div class="qheader">1) What is the colour of Irn-Bru</div>
<div class="qselections">
<input type="radio" value="a" name="question1">a) Orange.<br>
<input type="radio" value="b" name="question1">b) Red.<br>
<input type="radio" value="c" name="question1">c) Green.<br>
<input type="radio" value="d" name="question1">d) Purple.<br>
</div>
<div id="target"> This is the hint you want to hide</div>
<button type="button" id="toggle">Get Hint</button>
<script>
var button = document.getElementById ("toggle");
var target = document.getElementById("target");
var bool = true;
function displayToggle() {
if (bool) {
target.setAttribute("class", "hide");
bool = false;
} else {
target.setAttribute("class", "show");
bool = true;
}
}
button.addEventListener("click",displayToggle, false);
</script>
<br>
<div class="qheader">
2) What is the world's most common religion?</div>
<div class="qselections">
<input type="radio" value="a" name="question2">a) Christianity<br>
<input type="radio" value="b" name="question2">b) Buddhism<br>
<input type="radio" value="c" name="question2">c) Hinduism<br>
<input type="radio" value="d" name="question2">d) Muslim<br>
</div>
<br>
<div class="qheader">
3) Which city ranks as the world's most populous city (2002)?</div>
<div class="qselections">
<input type="radio" value="a" name="question3">a) New York (US)<br>
<input type="radio" value="b" name="question3">b) Mexico City (Mexico)<br>
<input type="radio" value="c" name="question3">c) Tokyo (Japan)<br>
<input type="radio" value="d" name="question3">d) Shanghai (China)<br>
</div>
<br>
<div class="qheader">
4) What is the second largest country (in size) in the world?</div>
<div class="qselections">
<input type="radio" value="a" name="question4">a) USA<br>
<input type="radio" value="b" name="question4">b) China<br>
<input type="radio" value="c" name="question4">c) Canada<br>
<input type="radio" value="d" name="question4">d) Russia<br>
</div>
<br>
<div class="qheader">
5) As of January 2003, how much is Microsoft Chairman Bill Gates's net worth?</div>
<div class="qselections">
<input type="radio" value="a" name="question5">a) 10 million US<br>
<input type="radio" value="b" name="question5">b) 10 billion US<br>
<input type="radio" value="c" name="question5">c) 35 billion US<br>
<input type="radio" value="d" name="question5">d) 50 billion US<br>
</div>
<br>
<div class="qheader">
6) Which country below is not one of the members of the UN security council (Jan 2003)?</div>
<div class="qselections">
<input type="radio" value="a" name="question6">a) USA<br>
<input type="radio" value="b" name="question6">b) China<br>
<input type="radio" value="c" name="question6">c) Germany<br>
<input type="radio" value="d" name="question6">d) France<br>
</div>
<br>
<form>
<div align="center">
<input type="button" value="Grade Me!" name="B1" onClick="gradeit()"> <input type="button" value="Reset" name="B2" onClick="document.myquiz.reset()"></div>
</form>
<footer>
<img src="img/twitter-wrap.png" alt="Twitter Logo" class="social-icon">
<img src="img/facebook-wrap.png" alt="Twitter Logo" class="social-icon">
<p>© 2014 Chris Moore.</p>
</footer>
</div>
</body>
</html>
Here of my Javascript for making a feedback page
//Enter total number of questions:
var totalquestions=6
//Enter the solutions corresponding to each question:
var correctchoices=new Array()
correctchoices[1]='c' //question 1 solution
correctchoices[2]='a' //question 2 solution, and so on.
correctchoices[3]='c'
correctchoices[4]='c'
correctchoices[5]='c'
correctchoices[6]='c'
/////Don't edit beyond here//////////////////////////
function gradeit(){
var incorrect=null
for (q=1;q<=totalquestions;q++){
var thequestion=eval("document.myquiz.question"+q)
for (c=0;c<thequestion.length;c++){
if (thequestion[c].checked==true)
actualchoices[q]=thequestion[c].value
}
if (actualchoices[q]!=correctchoices[q]){ //process an incorrect choice
if (incorrect==null)
incorrect=q
else
incorrect+="/"+q
}
}
if (incorrect==null)
incorrect="a/b"
document.cookie='q='+incorrect
if (document.cookie=='')
alert("Your browser does not accept cookies. Please adjust your browser settings.")
else
window.location="Feedback.html"
}
function showsolution(){
var win2=window.open("","win2","width=200,height=350, scrollbars")
win2.focus()
win2.document.open()
win2.document.write('<title>Solution</title>')
win2.document.write('<body bgcolor="#FFFFFF">')
win2.document.write('<center><h3>Solution to Quiz</h3></center>')
win2.document.write('<center><font face="Arial">')
for (i=1;i<=totalquestions;i++){
for (temp=0;temp<incorrect.length;temp++){
if (i==incorrect[temp])
wrong=1
}
if (wrong==1){
win2.document.write("Question "+i+"="+correctchoices[i].fontcolor("red")+"<br>")
wrong=0
}
else
win2.document.write("Question "+i+"="+correctchoices[i]+"<br>")
}
win2.document.write('</center></font>')
win2.document.write("<h5>Note: The solutions in red are the ones to the questions you had incorrectly answered.</h5><p align='center'><small><a href='http://www.javascriptkit.com' target='_new'>JavaScript Kit quiz script</a></small>")
win2.document.close()
}
Here is my main.css
/*************************
GENERAL
**************************/
body {
font-family: 'Open Sans' , sans-serif;
}
#wrapper {
max-width: 940px;
margin: 0 auto;
padding: 0 5%;
}
#img {
max-width: 940px;
margin: 0 auto;
padding: 0 5%;
}
a {
text-decoration: none;
}
img {
max-width: 100%;
}
/*************************
HEADING
**************************/
header {
float: left;
margin: 0 0 30px 0;
padding: 5px 0 0 0;
width: 100%;
}
#logo {
text-align: center;
margin: 0;
}
h1 {
font-family: 'Changa One', sans-serif;
margin: 15px 0;
font-size: 1.75em;
font-weight: normal;
line-height: 0.8em;
}
h2 {
font-size: 0.75em;
margin: -5px 0 0;
font-weight: normal;
}
/*************************
Navigation
**************************/
nav {
text-align: center;
padding: 10px 0;
margin: 20px 0 0 ;
}
nav ul {
list-style: none;
margin: 0 10px;
padding: 0;
}
nav li {
display: inline-block;
}
nav a {
font-weight: 800;
padding: 15px 10px;
}
/*************************
FOOTER
**************************/
footer {
font-size: 0.75em;
text-align: center;
clear: both;
padding-top:50px;
color:#F5F5F5;
}
.social-icon {
width: 30px;
height: 30px;
margin: 0 5px;
}
/*************************
PAGE: Images
**************************/
#gallery {
margin: 0;
padding: 0;
list-style: none;
}
#gallery li {
float: left;
width: 28%;
margin:2.5%;
background-color: #f5f5f5;
color:#bdc3c7;
}
#gallery li a p {
margin: 0;
padding: 0.5%;
font-size: 1em;
color: #bdc3c7
}
#gallery1 {
margin: 0;
padding: 0;
list-style: none;
}
#gallery1 li {
float: center;
width: 50%;
margin:2.5%;
background-color: #f5f5f5;
color:#bdc3c7;
}
#gallery1 li a p {
margin: 0;
padding: 0.5%;
font-size: 1em;
color: #000
}
#gallery2 {
margin: 0;
padding-left: 330px;
list-style: none;
}
#gallery2 li {
float: left;
width: 28%;
margin:1%;
background-color: #A0A8A8;
color:#bdc3c7;
}
#gallery2 li a {
margin: 0%;
padding: 0.5%;
font-size: 1em;
color: #000
}
#gallery3 {
margin: 0;
padding-left: 210px;
list-style: none;
}
#gallery3 li {
float: left;
width: 28%;
margin:1%;
background-color: #A0A8A8;
color:#bdc3c7;
}
#gallery3 li a {
margin: 0%;
padding: 0.5%;
font-size: 1em;
color: #000
}
/*************************
COLORS
**************************/
/* site body */
body {
background-color:#A0A8A8;
color: #000000;
}
/* green header */
header {
background: #959E9E;
border-color: #A6B4B5;
}
/* nav background on mobile devices */
nav{
background: #959E9E;
}
/* logo text */
h1, h2 {
color:#F5F5F5;
}
/* links */
a {
color: #6ab47b;
}
/* nav link */
nav a, nav a:visited {
color: #fff;
}
/* selected nav link */
nav a.selected, nav a:hover {
color:#4D4D4D;
}
/*HINT SHOW/HIDE*/
.hide{
display: hidden;
}
.show {
display: block;
}
Here is my feedback page ( working as intended)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Tutorial Feedback</title>
<link rel="stylesheet" href="css/normalize.css">
<link href='http://fonts.googleapis.com/css?family=Changa+One|Open+Sans:400,400italic,700,700italic,800' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<header>
<a href="Feedback.html" id="logo">
<h1>Feedback</h1>
<h2>by Chris Moore</h2>
</a>
<nav>
<ul>
<li>Home</li>
<li>Tutorial</li>
<li>Quiz</li>
<li>Feedback</li>
</ul>
</nav>
</header>
<p align="center"><strong><font face="Arial">
<script src="quizconfig.js">
</script>
<big>Instant Quiz Results</big></font></strong></p>
<div align="center"><center>
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="100%"><form method="POST" name="result"><table border="0" width="100%" cellpadding="0" height="116">
<tr>
<td height="25" bgcolor="#A0A8A8"><strong><font face="Arial"># of questions you got right:</font></strong></td>
<td height="25"><p><input type="text" name="p" size="24"></td>
</tr>
<tr>
<td height="17" bgcolor="#B2B9B9"><strong><font face="Arial">The questions you got wrong:</font></strong></td>
<td height="17"><p><textarea name="T2" rows="3" cols="24" wrap="virtual"></textarea></td>
</tr>
<tr>
<td height="25" bgcolor="#B2B9B9"><strong><font face="Arial">Grade in percentage:</font></strong></td>
<td height="25"><input type="text" name="q" size="8"></td>
</tr>
</table>
</form>
</td>
</tr>
</table>
</center></div>
<form method="POST"><div
align="center"><center><p>
<script>
var wrong=0
for (e=0;e<=2;e++)
document.result[e].value=""
var feedback=document.cookie.split(";")
for (n=0;n<=feedback.length-1;n++){
if (feedback[n].charAt(1)=='q')
parse=n
}
var incorrect=feedback[parse].split("=")
incorrect=incorrect[1].split("/")
if (incorrect[incorrect.length-1]=='b')
incorrect=""
document.result[0].value=totalquestions-incorrect.length+" out of "+totalquestions
document.result[2].value=(totalquestions-incorrect.length)/totalquestions*100+"%"
for (temp=0;temp<incorrect.length;temp++)
document.result[1].value+=incorrect[temp]+", "
</script>
<input type="button" value="Take the quiz again" name="B1"
onClick="location.href='Tutorial Quiz.html'"> <input type="button" value="View solution" name="B2"
onClick="showsolution()"></p>
</center></div>
</form>
<footer>
<img src="img/twitter-wrap.png" alt="Twitter Logo" class="social-icon">
<img src="img/facebook-wrap.png" alt="Twitter Logo" class="social-icon">
<p>© 2014 Chris Moore.</p>
</footer>
</body>
</html>

It looks like you are missing the braces on your function definition:
<script>
var button = document.getElementById ("toggle")
var target = document.getElementById("target")
var bool = true;
function displayToggle() { // Added '{' here
if (bool) {
target.setAttribute("class", "hide");
bool = false;
} else {
target.setAttribute("class", "show");
bool = true;
}
} // Added this line
button.addEventListener("click",displayToggle, false);
</script>
It looks like your css may be different than what you originally posted as well. Try updating your .hide class:
/*HINT SHOW/HIDE*/
.hide{
display: none;
}

click function works with no label but not with a label

I have some JS for some radio buttons that works with no label wrapped around the radio buttons, but as soon as I add my label class to the radio buttons to style the radio buttons according to my theme, it stops working.
Here is the JS
$("#bn_only_yes").click(function(){
$("#bn_yes").attr("checked", "checked");
});
And here is the code it works fine with
<!-- IF B_BN_ONLY -->
<br />
<b>{L_30_0063}</b>
<br />
<input type="radio" name="buy_now_only" value="n" {BN_ONLY_N} id="bn_only_no">
{L_029}
<input type="radio" name="buy_now_only" value="y" {BN_ONLY_Y} id="bn_only_yes">
{L_030}
<!-- ENDIF -->
<!-- IF B_BN -->
<br />
<b>{L_496}</b>
<br />
<input type="radio" name="buy_now" id="bn_no" value="no" {BN_N}>
{L_029}
<input type="radio" name="buy_now" id="bn_yes" value="yes" {BN_Y}>
{L_030}
<input type="text" name="buy_now_price" id="bn" size="10" value="{BN_PRICE}">
{CURRENCY}
<!-- ENDIF -->
And here is the code that adds the label class styling to my inputs but the JS code stops working
<!-- IF B_BN_ONLY -->
<br />
<b>{L_30_0063}</b>
<br />
<label class="tz-radiobutton">
<input type="radio" name="buy_now_only" value="n" {BN_ONLY_N} id="bn_only_no">
{L_029}
</label>
<label class="tz-radiobutton">
<input type="radio" name="buy_now_only" value="y" {BN_ONLY_Y} id="bn_only_yes">
{L_030}
</label>
<!-- ENDIF -->
<!-- IF B_BN -->
<br />
<b>{L_496}</b>
<br />
<label class="tz-radiobutton">
<input type="radio" name="buy_now" id="bn_no" value="no" {BN_N}>
{L_029}
</label>
<label class="tz-radiobutton">
<input type="radio" name="buy_now" id="bn_yes" value="yes" {BN_Y}>
{L_030}
</label>
<input type="text" name="buy_now_price" id="bn" size="10" value="{BN_PRICE}">
{CURRENCY}
<!-- ENDIF -->
I have even tried adding the input ID to the label but it still won't work.
Anyone have any ideas how I can include the label class in the JS as well as the input ID.
ADDING TZ-RADIOBUTTON CSS
header, footer, article, nav, #tz-hmenu-bg, .tz-sheet, .tz-hmenu a, .tz-vmenu a, .tz- slidenavigator > a, .tz-checkbox:before, .tz-radiobutton:before
{
-webkit-background-origin: border !important;
-moz-background-origin: border !important;
background-origin: border-box !important;
header, footer, article, nav, #tz-hmenu-bg, .tz-sheet, .tz-slidenavigator > a, .tz- checkbox:before, .tz-radiobutton:before
{
display: block;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
label.tz-radiobutton:before
{
background: #FFFFFF;
-webkit-border-radius:8px;
-moz-border-radius:8px;
border-radius:8px;
border:1px solid #8496A4;
margin:0 auto;
width:16px;
height:16px;
display: inline-block;
vertical-align: top;
content: ' ';
}
label.tz-radiobutton
{
cursor: pointer;
font-size: 13px;
font-family: Arial, 'Arial Unicode MS', Helvetica, Sans-Serif;
font-weight: normal;
font-style: normal;
line-height: 16px;
display: inline-block;
color: #323C43 !important;
position: relative;
}
.tz-radiobutton>input[type="radio"]
{
vertical-align: baseline;
margin: 0 5px 0 0;
}
label.tz-radiobutton.active:before
{
background: #FFFFFF;
-webkit-border-radius:8px;
-moz-border-radius:8px;
border-radius:8px;
border:1px solid #8496A4;
margin:0 auto;
width:16px;
height:16px;
display: inline-block;
}
label.tz-radiobutton.hovered:before
{
background: #FFFFFF;
-webkit-border-radius:8px;
-moz-border-radius:8px;
border-radius:8px;
border:1px solid #8496A4;
margin:0 auto;
width:16px;
height:16px;
display: inline-block;
}
label.tz-radiobutton input[type="radio"]
{
display: none;
}
label.tz-radiobutton.tz-checked:after
{
content: url('../images/radiobuttonicon.png');
position: absolute;
line-height: 12px;
left: 2px;
top: 2px;
}

Seeing your CSS I guess you want to add a style to the label of #btn_yes on click: label.tz-radiobutton.tz-checked:after {} and display an icon with it.
1) In the CSS you've posted is a closing } missing in the line above header, footer, ....
2) To get the style working you need to add a class tz-checked to the label:
$("#bn_only_yes").click(function(){
$("#bn_yes").parent().addClass('tz-checked');
});
The third FIDDLE.
And if you want to set the attribute checked on the checkbox too:
$("#bn_only_yes").click(function(){
$("#bn_yes").attr('checked', 'checked').parent().addClass('tz-checked');
});

You will never see the checked input because of
label.tz-radiobutton input[type="radio"] {
display: none;
}