Unable to submit the form successfully using Javascript - javascript

Here is a code for Quiz app using HTML,CSS and JavaScript. You are given with a few questions and you need to choose one of the options from each question then click submit. The total score secured should be shown in the "You have scored ____ marks". However,there is no change in score when I click submit.
Here is the code for both HTML,CSS and Javascript. Please correct the code and let me know where I did wrong.
<!DOCTYPE html>
<html>
<head>
<title>Quiz Game</title>
</head>
<body>
<style>
.header{
text-align: center;
color:red;
margin-top:100px;
font-size: 100px;
}
.main{
border: solid 1px blue;
background-color: blue;
}
/* .options{
padding-left: 10px;
} */
.options li{
list-style-type: circle;
/* padding-left: 10px; */
font-size: 20px;
}
.result1{
border:2px solid black;
margin-left: 500px;
margin-right: 500px;
background-color: grey;
font-size: 20px;
color:red;
}
.span{
font-size: 50px;
color:salmon;
border:2px solid orangered;
}
</style>
<h1 class="header">QUIZ</h1>
<br>
<div class="main">
<div class="quiz-form">
<h3 style="color:white;padding-left:50px">Question 1</h3>
<br>
<p style="color:white;padding-left: 10px;font-size: 20px;">1) First Question</p>
<br>
<input type='radio' name='Q1' id='Option-1'value='Option 1' >
<label style="color:white;" for="Option-1">Option 1</label><br>
<br>
<input type='radio' name='Q1' id='Option-2' value='Option 2'>
<label style="color:white;" for="Option-2">Option 2</label><br>
<br>
</div>
<div class="quiz-form">
<h3 style="color:white;padding-left:50px">Question 2</h3>
<br>
<p style="color:white;padding-left: 10px;font-size: 20px;">2) Second Question</p>
<br>
<input type='radio' name='Q2' id='Option-3'value='Option 1' >
<label style="color:white;" for="Option-3">Option 1</label><br>
<br>
<input type='radio' name='Q2' id='Option-4' value='Option 2'>
<label style="color:white;" for="Option-4">Option 2</label><br>
<br>
</div>
<div class="quiz-form">
<h3 style="color:white;padding-left:50px">Question 3</h3>
<br>
<p style="color:white;padding-left: 10px;font-size: 20px;">3) Third Question</p>
<br>
<input type='radio' name='Q3' id='Option-5' value='Option 1'>
<label style="color:white;" for="Option-5">Option 1</label><br>
<br>
<input type='radio' name='Q3' id='Option-6'value='Option 2'>
<label style="color:white;" for="Option-6">Option 2</label><br>
<br>
</div>
<div class="quiz-form">
<h3 style="color:white;padding-left:50px">Question 4</h3>
<br>
<p style="color:white;padding-left: 10px;font-size: 20px;">4) Fourth Question</p>
<br>
<input type='radio' name='Q4' id='Option-7' value='Option 1'>
<label style="color:white;" for="Option-7">Option 1</label><br>
<br>
<input type='radio' name='Q4' id='Option-8' value='Option 2'>
<label style="color:white;" for="Option-8">Option 2</label><br>
<br> <br><br>
</div>
<div style="text-align:center">
<input type="submit" value="Submit" style="font-size:20px;">
</div>
</div>
<div class="result" style="text-align: center;">
<h1 class="result1" >Warning!! Clicking Submit will display the Result</h1>
<p style="font-size: 40px;color:green;">You have scored <span class="span"> 0% </span></p>
</div>
<script src="Quiz.js"></script>
</body>
</html>
Javascript :-
const correctAnswers=['Option 1','Option 2','Option 2','Option 1'];
const form = document.querySelector(".quiz-form");
let score=0;
form.addEventListener('submit',()=>{
form.preventDefault();
const userAnswers=[form.Q1.value,form.Q2.value,form.Q3.value,form.Q4.value];
userAnswers.forEach((answer,index)=>{
if(answer==correctAnswers[index]){
score+=20;
}
console.log(score);
});
const result=document.querySelector(".result")
result.querySelector("span").textContent= '${score}';
});

You need a form element, just wrap the whole quiz in one.
Problem #2, preventDefault() is an event function not a element one, something like this:
form.addEventListener('submit', e => {
e.preventDefault();
// more things .....
});
Finally, you're not interpolating score correctly, use back-ticks, i.e.:
result.querySelector('span').textContent = `${score}`;
Here's a working example with the changes I suggested:
<html>
<head>
<title>Quiz Game</title>
</head>
<body>
<style>
.header {
text-align: center;
color: red;
margin-top: 100px;
font-size: 100px;
}
.main {
border: solid 1px blue;
background-color: blue;
}
/* .options{
padding-left: 10px;
} */
.options li {
list-style-type: circle;
/* padding-left: 10px; */
font-size: 20px;
}
.result1 {
border: 2px solid black;
margin-left: 500px;
margin-right: 500px;
background-color: grey;
font-size: 20px;
color: red;
}
.span {
font-size: 50px;
color: salmon;
border: 2px solid orangered;
}
</style>
<h1 class="header">QUIZ</h1>
<br />
<div class="main">
<form>
<div class="quiz-form">
<h3 style="color:white;padding-left:50px">Question 1</h3>
<br />
<p style="color:white;padding-left: 10px;font-size: 20px;">1) First Question</p>
<br />
<input type="radio" name="Q1" id="Option-1" value="Option 1" />
<label style="color:white;" for="Option-1">Option 1</label><br />
<br />
<input type="radio" name="Q1" id="Option-2" value="Option 2" />
<label style="color:white;" for="Option-2">Option 2</label><br />
<br />
</div>
<div class="quiz-form">
<h3 style="color:white;padding-left:50px">Question 2</h3>
<br />
<p style="color:white;padding-left: 10px;font-size: 20px;">2) Second Question</p>
<br />
<input type="radio" name="Q2" id="Option-3" value="Option 1" />
<label style="color:white;" for="Option-3">Option 1</label><br />
<br />
<input type="radio" name="Q2" id="Option-4" value="Option 2" />
<label style="color:white;" for="Option-4">Option 2</label><br />
<br />
</div>
<div class="quiz-form">
<h3 style="color:white;padding-left:50px">Question 3</h3>
<br />
<p style="color:white;padding-left: 10px;font-size: 20px;">3) Third Question</p>
<br />
<input type="radio" name="Q3" id="Option-5" value="Option 1" />
<label style="color:white;" for="Option-5">Option 1</label><br />
<br />
<input type="radio" name="Q3" id="Option-6" value="Option 2" />
<label style="color:white;" for="Option-6">Option 2</label><br />
<br />
</div>
<div class="quiz-form">
<h3 style="color:white;padding-left:50px">Question 4</h3>
<br />
<p style="color:white;padding-left: 10px;font-size: 20px;">4) Fourth Question</p>
<br />
<input type="radio" name="Q4" id="Option-7" value="Option 1" />
<label style="color:white;" for="Option-7">Option 1</label><br />
<br />
<input type="radio" name="Q4" id="Option-8" value="Option 2" />
<label style="color:white;" for="Option-8">Option 2</label><br />
<br />
<br /><br />
</div>
<div style="text-align:center">
<input type="submit" value="Submit" style="font-size:20px;" id="submit_button" />
</div>
</form>
</div>
<div class="result" style="text-align: center;">
<h1 class="result1">Warning!! Clicking Submit will display the Result</h1>
<p style="font-size: 40px;color:green;">You have scored <span class="span"> 0% </span></p>
</div>
<script>
const correctAnswers = ['Option 1', 'Option 2', 'Option 2', 'Option 1'];
const form = document.querySelector('form');
let score = 0;
form.addEventListener('submit', e => {
e.preventDefault();
const userAnswers = [form.Q1.value, form.Q2.value, form.Q3.value, form.Q4.value];
userAnswers.forEach((answer, index) => {
if (answer == correctAnswers[index]) {
score += 20;
}
console.log(score);
});
const result = document.querySelector('.result');
result.querySelector('span').textContent = `${score}`;
});
</script>
</body>
</html>

Related

how to use preventDefault() for specified form fields?

I have a task to use preventDefault() on a form I created before using HTML and CSS. I am not sure how to use preventDefault() and how to use it only for the fields my task asks.
The fields which need to go through the preventDefault() process are name, email address, address and postcode, the 'keep me informed' box is not checked.
form{
background-color: rgb(190, 231, 190);
padding: 5pt;
margin: 0 auto;
width:30%;
border: 1pt solid black;
}
legend{
background-color: rgb(134, 97, 28);
margin: auto;
padding-inline: 20%;
padding-top: 2pt;
padding-bottom: 2pt;
color: white;
}
fieldset{
padding: 10pt;
}
#p1, #p3{
background-color: white;
padding: 5pt;
}
#p3{
padding-left: 30%;
padding-right: 25%;
}
#p3 input{
background-color: rgb(134, 97, 28);
border-radius: 7pt;
color: white;
padding: 5pt;
width: 75pt;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Topic 4, Exercise 4 (Miguel Divo)</title>
</head>
<body>
<form>
<fieldset>
<legend>Shirt Order Form</legend>
<p>
<label>Shirt Size</label>
</p>
<p>
<select name="shirt_size" >
<option>Choose Size</option>
<option>XS</option>
<option>S</option>
<option>M</option>
<option>L</option>
<option>XL</option>
</select>
</p>
<p>
<label>Sleeves</label>
</p>
<p>
<input type="radio" name="sleeve" value="1" >Short<br>
<input type="radio" name="sleeve" value="2" >Long<br>
</p>
<p>
<label>Choose Shirt Colour</label>
</p>
<p>
<input type="color" name="colourChoice" >
</p>
<p>
<label>Quantity</label>
</p>
<p>
<input type="number" name="quantity" >
</p>
<p>
<label>Date Requested</label>
</p>
<p>
<input type="date" name="date" >
</p>
</fieldset>
<br>
<fieldset>
<p>
<label>Name</label>
</p>
<p>
<input type="text" name="name" >
</p>
<p>
<label>Email</label>
</p>
<p>
<input type="email" name="email" >
</p>
<p>Telephone Number</p>
<p>
<input type="text" name="phone"
pattern="[4]{2}[-][0-9]{3}[-][0-9]{3}[-][0-9]{4}" > Example: 44-207-882-1234
</p>
</fieldset>
<br>
<fieldset>
<p>
<label>Address</label>
</p>
<p>
<input type="text" name="address" >
</p>
<p>
<label>City</label>
</p>
<p>
<input type="text" name="city" list="cities" >
<datalist id="cities">
<option>Birmingham</option>
<option>Glasgow</option>
<option>London</option>
<option>Manchester</option>
</datalist>
</input>
</p>
<p>
<label>Postcode</label>
</p>
<p>
<input type="text" name="postcode" >
</p>
</fieldset>
<br>
<p id="p1">
Please keep me informed about future shirt designs<input type="checkbox" name="accept">
</p>
<p id="p3">
<input type="submit">
<input type="reset" value="Clear Form">
</p>
</form>
<script src="preventDefault.js"></script>
</body>
</html>
If you want to prevent form submission using preventDefault when the specific fields are not filled out
window.addEventListener("load", function() {
const orderForm = document.getElementById("orderForm")
orderForm.addEventListener("submit", function(event) {
if (orderForm.querySelector("[name=accept]").checked) {
const valid = ["name", "email", "address", "address", "postcode"]
.filter(fieldName => orderForm.querySelector("[name=" + fieldName + "]").value === "").length === 0; // count empty
if (!valid) {
console.log("empty fields")
event.preventDefault()
}
}
})
})
form {
background-color: rgb(190, 231, 190);
padding: 5pt;
margin: 0 auto;
width: 30%;
border: 1pt solid black;
}
legend {
background-color: rgb(134, 97, 28);
margin: auto;
padding-inline: 20%;
padding-top: 2pt;
padding-bottom: 2pt;
color: white;
}
fieldset {
padding: 10pt;
}
#p1,
#p3 {
background-color: white;
padding: 5pt;
}
#p3 {
padding-left: 30%;
padding-right: 25%;
}
#p3 input {
background-color: rgb(134, 97, 28);
border-radius: 7pt;
color: white;
padding: 5pt;
width: 75pt;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Topic 4, Exercise 4 (Miguel Divo)</title>
</head>
<body>
<form id="orderForm">
<fieldset>
<legend>Shirt Order Form</legend>
<p>
<label>Shirt Size</label>
</p>
<p>
<select name="shirt_size">
<option>Choose Size</option>
<option>XS</option>
<option>S</option>
<option>M</option>
<option>L</option>
<option>XL</option>
</select>
</p>
<p>
<label>Sleeves</label>
</p>
<p>
<input type="radio" name="sleeve" value="1">Short<br>
<input type="radio" name="sleeve" value="2">Long<br>
</p>
<p>
<label>Choose Shirt Colour</label>
</p>
<p>
<input type="color" name="colourChoice">
</p>
<p>
<label>Quantity</label>
</p>
<p>
<input type="number" name="quantity">
</p>
<p>
<label>Date Requested</label>
</p>
<p>
<input type="date" name="date">
</p>
</fieldset>
<br>
<fieldset>
<p>
<label>Name</label>
</p>
<p>
<input type="text" name="name">
</p>
<p>
<label>Email</label>
</p>
<p>
<input type="email" name="email">
</p>
<p>Telephone Number</p>
<p>
<input type="text" name="phone" pattern="[4]{2}[-][0-9]{3}[-][0-9]{3}[-][0-9]{4}"> Example: 44-207-882-1234
</p>
</fieldset>
<br>
<fieldset>
<p>
<label>Address</label>
</p>
<p>
<input type="text" name="address">
</p>
<p>
<label>City</label>
</p>
<p>
<input type="text" name="city" list="cities">
<datalist id="cities">
<option>Birmingham</option>
<option>Glasgow</option>
<option>London</option>
<option>Manchester</option>
</datalist>
</input>
</p>
<p>
<label>Postcode</label>
</p>
<p>
<input type="text" name="postcode">
</p>
</fieldset>
<br>
<p id="p1">
Please keep me informed about future shirt designs<input type="checkbox" name="accept">
</p>
<p id="p3">
<input type="submit">
<input type="reset" value="Clear Form">
</p>
</form>
<script src="preventDefault.js"></script>
</body>
</html>
this can also be achieved by simply adding required on each of the tags in question
window.addEventListener("load", function() {
const orderForm = document.getElementById("orderForm")
orderForm.querySelector("[name=accept]").addEventListener("change", function() {
const req = this.checked;
["name", "email", "address", "address", "postcode"].forEach(fieldName =>
orderForm.querySelector("[name=" + fieldName + "]").required = req);
})
})
form {
background-color: rgb(190, 231, 190);
padding: 5pt;
margin: 0 auto;
width: 30%;
border: 1pt solid black;
}
legend {
background-color: rgb(134, 97, 28);
margin: auto;
padding-inline: 20%;
padding-top: 2pt;
padding-bottom: 2pt;
color: white;
}
fieldset {
padding: 10pt;
}
#p1,
#p3 {
background-color: white;
padding: 5pt;
}
#p3 {
padding-left: 30%;
padding-right: 25%;
}
#p3 input {
background-color: rgb(134, 97, 28);
border-radius: 7pt;
color: white;
padding: 5pt;
width: 75pt;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Topic 4, Exercise 4 (Miguel Divo)</title>
</head>
<body>
<form id="orderForm">
<fieldset>
<legend>Shirt Order Form</legend>
<p>
<label>Shirt Size</label>
</p>
<p>
<select name="shirt_size">
<option>Choose Size</option>
<option>XS</option>
<option>S</option>
<option>M</option>
<option>L</option>
<option>XL</option>
</select>
</p>
<p>
<label>Sleeves</label>
</p>
<p>
<input type="radio" name="sleeve" value="1">Short<br>
<input type="radio" name="sleeve" value="2">Long<br>
</p>
<p>
<label>Choose Shirt Colour</label>
</p>
<p>
<input type="color" name="colourChoice">
</p>
<p>
<label>Quantity</label>
</p>
<p>
<input type="number" name="quantity">
</p>
<p>
<label>Date Requested</label>
</p>
<p>
<input type="date" name="date">
</p>
</fieldset>
<br>
<fieldset>
<p>
<label>Name</label>
</p>
<p>
<input type="text" name="name">
</p>
<p>
<label>Email</label>
</p>
<p>
<input type="email" name="email">
</p>
<p>Telephone Number</p>
<p>
<input type="text" name="phone" pattern="[4]{2}[-][0-9]{3}[-][0-9]{3}[-][0-9]{4}"> Example: 44-207-882-1234
</p>
</fieldset>
<br>
<fieldset>
<p>
<label>Address</label>
</p>
<p>
<input type="text" name="address">
</p>
<p>
<label>City</label>
</p>
<p>
<input type="text" name="city" list="cities">
<datalist id="cities">
<option>Birmingham</option>
<option>Glasgow</option>
<option>London</option>
<option>Manchester</option>
</datalist>
</input>
</p>
<p>
<label>Postcode</label>
</p>
<p>
<input type="text" name="postcode">
</p>
</fieldset>
<br>
<p id="p1">
Please keep me informed about future shirt designs<input type="checkbox" name="accept">
</p>
<p id="p3">
<input type="submit">
<input type="reset" value="Clear Form">
</p>
</form>
<script src="preventDefault.js"></script>
</body>
</html>
you can do this:
<html>
<head>
<title>ejemplo de preventDefault</title>
<script type="text/javascript">
function stopDefAction(evt) {
evt.preventDefault();
}
</script>
</head>
<body>
<p>click on the box.</p>
<form>
<input type="checkbox" onclick="stopDefAction(event);"/>
<label for="checkbox">Select</label>
</form>
</body>
</html>
reference: https://developer.mozilla.org/es/docs/Web/API/Event/preventDefault

Display one slide at a time in custom HTML slideshow

I'm trying to get my slideshow to present one image at a time. At the moment it shows all the selected images at once; I want one image shown at a time, like in a traditional slideshow with prev/next buttons. I feel like this is really simple and I'm over-thinking things. I've looked at tons of examples but my issue seems to be different from most because in my case the slideshow is different each time -- the images in the slideshow are based off user selected input, therefore the next or previous slide will most likely always be unique, dependent on the topics the user selected.
Anyone have any suggestions? Here is what I have:
$(document).ready(function() {
$("#view-content").on("click", function(e) {
for (var i = 0; i < 20; i++) {
if ($('#topic' + i).prop('checked')) {
$('.topic' + i).show();
} else {
$('.topic' + i).hide();
}
}
});
});
.column {
float: left;
width: 33.33%;
}
.row:after {
content: "";
display: table;
clear: both;
}
input[type=checkbox] {}
.topic {
width: 200px;
height: 3em;
line-height: 3em;
background: #ccc;
border-radius: 50px;
text-align: center;
vertical-align: middle;
}
button {
border-radius: 50px;
border: none;
width: 10em;
height: 3em;
line-height: 3em;
}
.view {
display: block;
margin: 0 auto;
}
.selectall {
display: none;
}
.slideshow {
overflow: auto;
white-space: nowrap;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<h1>Topics</h1>
<h4>Or choose from popular search terms: </h4>
<div class="row">
<button type="button">term1</button>
<button type="button">term2</button>
<button type="button">term3</button>
<button type="button">term4</button>
<button type="button">term5</button>
<button type="button">term6</button>
<button type="button">term7</button>
<button type="button">term8</button>
<button type="button">term9</button>
<button type="button">term10</button>
</div>
<hr>
<div class="row">
<div class="column">
<div class="topic">
<input type="checkbox" id="topic1" />
<label for="topic1">Topic 1</label>
</div>
<br/>
<div class="topic">
<input type="checkbox" id="topic2" />
<label for="topic2">Topic 2</label>
</div>
<br/>
<div class="topic">
<input type="checkbox" id="topic3" />
<label for="topic3">Topic 3</label>
</div>
<br/>
<div class="topic">
<input type="checkbox" id="topic4" />
<label for="topic4">Topic 4</label>
</div>
<br/>
<div class="topic">
<input type="checkbox" id="topic5" />
<label for="topic5">Topic 5</label>
</div>
</div>
<div class="column">
<div class="topic">
<input type="checkbox" id="topic6" />
<label for="topic6">Topic 6</label>
</div>
<br/>
<div class="topic">
<input type="checkbox" id="topic7" />
<label for="topic7">Topic 7</label>
</div>
<br/>
<div class="topic">
<input type="checkbox" id="topic8" />
<label for="topic8">Topic 8</label>
</div>
<br/>
<div class="topic">
<input type="checkbox" id="topic9" />
<label for="topic9">Topic 9</label>
</div>
<br/>
<div class="topic">
<input type="checkbox" id="topic10" />
<label for="topic10">Topic 10</label>
</div>
</div>
<div class="column">
<div class="topic">
<input type="checkbox" id="topic11" />
<label for="topic11">Topic 11</label>
</div>
<br/>
<div class="topic">
<input type="checkbox" id="topic12" />
<label for="topic12">Topic 12</label>
</div>
<br/>
<div class="topic">
<input type="checkbox" id="topic13" />
<label for="topic13">Topic 13</label>
</div>
<br/>
<div class="topic">
<input type="checkbox" id="topic14" />
<label for="topic14">Topic 14</label>
</div>
<br/>
<div class="topic">
<input type="checkbox" id="topic15" />
<label for="topic15">Topic 15</label>
</div>
</div>
</div>
<br/>
<button type="button" class="view" id="view-content">View Content</button>
<div class="slideshow">
<img class="topic1 selectall" src="https://i.imgur.com/Kf2zBCB.jpg" />
<img class="topic2 selectall" src="https://i.imgur.com/Sd44gRr.jpg" />
<img class="topic3 selectall" src="https://i.imgur.com/5t6Qp5y.jpg" />
<img class="topic4 selectall" src="https://i.imgur.com/5vyPC7P.jpg" />
<img class="topic5 selectall" src="https://i.imgur.com/H400nzy.jpg" />
<img class="topic6 selectall" src="https://i.imgur.com/MXVqtDe.jpg" />
<img class="topic7 selectall" src="https://i.imgur.com/OtjnTqO.jpg" />
<img class="topic8 selectall" src="https://i.imgur.com/OtjnTqO.jpg" />
<img class="topic9 selectall" src="https://i.imgur.com/OtjnTqO.jpg" />
<img class="topic10 selectall" src="https://i.imgur.com/OtjnTqO.jpg" />
<img class="topic11 selectall" src="https://i.imgur.com/OtjnTqO.jpg" />
<img class="topic12 selectall" src="https://i.imgur.com/OtjnTqO.jpg" />
<img class="topic13 selectall" src="https://i.imgur.com/OtjnTqO.jpg" />
<img class="topic14 selectall" src="https://i.imgur.com/OtjnTqO.jpg" />
<img class="topic15 selectall" src="https://i.imgur.com/OtjnTqO.jpg" />
</div>
You have a standard slideshow, regardless of the fact that only some images are shown. The markup is still the same -- the only different is display: none is applied to some images.
Depending on the type of slideshow you want, you just need to add in some arrows for the user to click on before your first image and after your last image, possibly with pseudo-classes :before:-first-of-type and :after:last-of-type.
Alternatively, you could just usea little bit of extra JavaScript / jQuery to get things working:
$(".slideshow > img:gt(0)").hide();
setInterval(function() {
$('.slideshow > img:first')
.fadeOut(1000)
.next()
.fadeIn(1000)
.end()
.appendTo('.slideshow');
}, 3000);
Which will hide all slides, then fade in the slides one after another, and can be seen in the following:
$(document).ready(function() {
$("#view-content").on("click", function(e) {
for (var i = 0; i < 20; i++) {
if ($('#topic' + i).prop('checked')) {
$('.topic' + i).show();
} else {
$('.topic' + i).hide();
}
}
$(".slideshow > img:gt(0)").hide();
setInterval(function() {
$('.slideshow > img:first')
.fadeOut(1000)
.next()
.fadeIn(1000)
.end()
.appendTo('.slideshow');
}, 3000);
});
});
.column {
float: left;
width: 33.33%;
}
.row:after {
content: "";
display: table;
clear: both;
}
input[type=checkbox] {}
.topic {
width: 200px;
height: 3em;
line-height: 3em;
background: #ccc;
border-radius: 50px;
text-align: center;
vertical-align: middle;
}
button {
border-radius: 50px;
border: none;
width: 10em;
height: 3em;
line-height: 3em;
}
.view {
display: block;
margin: 0 auto;
}
.selectall {
display: none;
}
.slideshow {
overflow: auto;
white-space: nowrap;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<h1>Topics</h1>
<h4>Or choose from popular search terms: </h4>
<div class="row">
<button type="button">term1</button>
<button type="button">term2</button>
<button type="button">term3</button>
<button type="button">term4</button>
<button type="button">term5</button>
<button type="button">term6</button>
<button type="button">term7</button>
<button type="button">term8</button>
<button type="button">term9</button>
<button type="button">term10</button>
</div>
<hr>
<div class="row">
<div class="column">
<div class="topic">
<input type="checkbox" id="topic1" />
<label for="topic1">Topic 1</label>
</div>
<br/>
<div class="topic">
<input type="checkbox" id="topic2" />
<label for="topic2">Topic 2</label>
</div>
<br/>
<div class="topic">
<input type="checkbox" id="topic3" />
<label for="topic3">Topic 3</label>
</div>
<br/>
<div class="topic">
<input type="checkbox" id="topic4" />
<label for="topic4">Topic 4</label>
</div>
<br/>
<div class="topic">
<input type="checkbox" id="topic5" />
<label for="topic5">Topic 5</label>
</div>
</div>
<div class="column">
<div class="topic">
<input type="checkbox" id="topic6" />
<label for="topic6">Topic 6</label>
</div>
<br/>
<div class="topic">
<input type="checkbox" id="topic7" />
<label for="topic7">Topic 7</label>
</div>
<br/>
<div class="topic">
<input type="checkbox" id="topic8" />
<label for="topic8">Topic 8</label>
</div>
<br/>
<div class="topic">
<input type="checkbox" id="topic9" />
<label for="topic9">Topic 9</label>
</div>
<br/>
<div class="topic">
<input type="checkbox" id="topic10" />
<label for="topic10">Topic 10</label>
</div>
</div>
<div class="column">
<div class="topic">
<input type="checkbox" id="topic11" />
<label for="topic11">Topic 11</label>
</div>
<br/>
<div class="topic">
<input type="checkbox" id="topic12" />
<label for="topic12">Topic 12</label>
</div>
<br/>
<div class="topic">
<input type="checkbox" id="topic13" />
<label for="topic13">Topic 13</label>
</div>
<br/>
<div class="topic">
<input type="checkbox" id="topic14" />
<label for="topic14">Topic 14</label>
</div>
<br/>
<div class="topic">
<input type="checkbox" id="topic15" />
<label for="topic15">Topic 15</label>
</div>
</div>
</div>
<br/>
<button type="button" class="view" id="view-content">View Content</button>
<div class="slideshow">
<img class="topic1 selectall" src="https://i.imgur.com/Kf2zBCB.jpg" />
<img class="topic2 selectall" src="https://i.imgur.com/Sd44gRr.jpg" />
<img class="topic3 selectall" src="https://i.imgur.com/5t6Qp5y.jpg" />
<img class="topic4 selectall" src="https://i.imgur.com/5vyPC7P.jpg" />
<img class="topic5 selectall" src="https://i.imgur.com/H400nzy.jpg" />
<img class="topic6 selectall" src="https://i.imgur.com/MXVqtDe.jpg" />
<img class="topic7 selectall" src="https://i.imgur.com/OtjnTqO.jpg" />
<img class="topic8 selectall" src="https://i.imgur.com/OtjnTqO.jpg" />
<img class="topic9 selectall" src="https://i.imgur.com/OtjnTqO.jpg" />
<img class="topic10 selectall" src="https://i.imgur.com/OtjnTqO.jpg" />
<img class="topic11 selectall" src="https://i.imgur.com/OtjnTqO.jpg" />
<img class="topic12 selectall" src="https://i.imgur.com/OtjnTqO.jpg" />
<img class="topic13 selectall" src="https://i.imgur.com/OtjnTqO.jpg" />
<img class="topic14 selectall" src="https://i.imgur.com/OtjnTqO.jpg" />
<img class="topic15 selectall" src="https://i.imgur.com/OtjnTqO.jpg" />
</div>

Change the value of a variable when an image is selected

I want to select one image among four of them. And then the variable that i have should be increased. If i select other image then the variable should change and take the value of that image. Here is the code i have so far that does not work
HTML
<div class="checkbox">
<input type="checkbox" name="paroxi" value="10"><br>
</div>
CSS
.checkbox{
width: 23px;
height: 21px;
background: black;
visibility:hidden;
}
.checked{
background: red;
visibility:block;
}
JAVASCRIPT
$(".checkbox").click(function(){
$(this).toggleClass('checked')
});
If you wanna keep the checkboxes, guess to post price value later, than you can do it this way:
$('.image-selection input').on('change', function(e) {
$('.selected-value').text( $('.image-selection input:checked').val() );
}).trigger('change');
.image-selection input {
display: none;
}
.image-selection input:checked + img {
box-shadow: 0 0 5px rgba(0, 0, 0, .4);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="image-selection">
<label for="checkbox-1">
<input id="checkbox-1" name="image-input" type="radio" value="10" checked="checked" />
<img src="http://placehold.it/150x150" />
</label>
<label for="checkbox-2">
<input id="checkbox-2" name="image-input" type="radio" value="20" />
<img src="http://placehold.it/150x150" />
</label>
<label for="checkbox-3">
<input id="checkbox-3" name="image-input" type="radio" value="30" />
<img src="http://placehold.it/150x150" />
</label>
<label for="checkbox-4">
<input id="checkbox-4" name="image-input" type="radio" value="40" />
<img src="http://placehold.it/150x150" />
</label>
</div>
<p>Price: <span class="selected-value"></span></p>
Also on JSFiddle.

Show div if no results are found

I have this code. http://jsfiddle.net/n3EmN/171/
How do I show a div when some checkboxes are checked, and there is no result found, and hide that div when results are found? For example, when I check checkbox "red" and checkbox "africa", there is no result found, so now I have to show a div, how do I do that?
HTML
<div class="flowers-wrap">
<h3 style="font-size:14px; font-weight:normal;">Available Flowers</h3>
<p style="font-size:12px;"><strong>Filter flowers by colour:</strong></p>
<form>
<label style="font-size:12px;">
<input type="checkbox" name="fl-colour" value="red" id="red" /> Red</label>
<br>
<label style="font-size:12px;">
<input type="checkbox" name="fl-colour" value="yellow" id="yellow" /> Yellow</label>
<br>
<label style="font-size:12px;">
<input type="checkbox" name="fl-colour" value="pink" id="pink" /> Pink</label>
<br>
<label style="font-size:12px;">
<input type="checkbox" name="fl-colour" value="purple" id="purple" /> Purple</label>
<br>
<label style="font-size:12px;">
<input type="checkbox" name="fl-colour" value="green" id="green" /> Green</label>
<br>
<label style="font-size:12px;">
<input type="checkbox" name="fl-colour" value="other" id="other" /> Other</label>
</form>
<p style="font-size:12px;"><strong>Filter flowers by size:</strong></p>
<form>
<label style="font-size:12px;">
<input type="checkbox" name="fl-size" value="tiny" id="tiny" /> Tiny</label>
<br>
<label style="font-size:12px;">
<input type="checkbox" name="fl-size" value="small" id="small" /> Small</label>
<br>
<label style="font-size:12px;">
<input type="checkbox" name="fl-size" value="medium" id="medium" /> Medium</label>
<br>
<label style="font-size:12px;">
<input type="checkbox" name="fl-size" value="large" id="large" /> Large</label>
<br>
<label style="font-size:12px;">
<input type="checkbox" name="fl-size" value="giant" id="giant" /> Giant</label>
</form>
</div>
<div class="continents-wrap">
<h3 style="font-size:14px; font-weight:normal;">Available Continents</h3>
<div class="continents" style="font-size:12px;">
<div>Africa
<input type="checkbox" name="fl-cont" value="africa" id="africa" />
</div>
<div>Europe
<input type="checkbox" name="fl-cont" value="europe" id="europe" />
</div>
<div>Asia
<input type="checkbox" name="fl-cont" value="asia" id="asia" />
</div>
<div>North America
<input type="checkbox" name="fl-cont" value="north-america" id="north-america" />
</div>
<div>South America
<input type="checkbox" name="fl-cont" value="south-america" id="south-america" />
</div>
<div>Antarctica
<input type="checkbox" name="fl-cont" value="antarctica" id="antarctica" />
</div>
<div>Australasia
<input type="checkbox" name="fl-cont" value="australasia" id="australasia" />
</div>
</div>
</div>
<div class="flowers">
<div class="flower" data-id="aloe" data-category="green small medium africa">Aloe</div>
<div class="flower" data-id="lavendar" data-category="purple green medium africa europe">Lavender</div>
<div class="flower" data-id="stinging-nettle" data-category="green large africa europe asia">Stinging Nettle</div>
<div class="flower" data-id="gorse" data-category="green yellow large europe">Gorse</div>
<div class="flower" data-id="hemp" data-category="green large asia">Hemp</div>
<div class="flower" data-id="titan-arum" data-category="purple other giant asia">Titan Arum</div>
<div class="flower" data-id="golden-wattle" data-category="green yellow large australasia">Golden Wattle</div>
<div class="flower" data-id="purple-prairie-clover" data-category="purple green other medium north-america">Purple Prairie Clover</div>
<div class="flower" data-id="camellia" data-category="pink other large north-america">Camellia</div>
<div class="flower" data-id="scarlet-carnation" data-category="red medium north-america">Scarlet Carnation</div>
<div class="flower" data-id="indian-paintbrush" data-category="red medium north-america">Indian Paintbrush</div>
<div class="flower" data-id="moss-verbena" data-category="purple other small south-america">Moss Verbena</div>
<div class="flower" data-id="climbing-dayflower" data-category="blue tiny south-america">Climbing Dayflower</div>
<div class="flower" data-id="antarctic-pearlwort" data-category="green yellow large antarctica">Antarctic Pearlwort</div>
</div>
CSS
body {
font-family: 'Arial';
color: #646464;
}
.continents-wrap {
float: left;
width: 20%;
margin: 0 5% 0 0;
padding: 0;
}
.flowers-wrap {
float: left;
width: 20%;
margin: 0 5% 0 0;
padding: 0;
position: relative;
}
.flowers {
float: left;
width: 50%;
}
.flowers div {
float: left;
width: 90%;
height: 68px;
line-height: 68px;
padding: 0 5%;
background: #eee;
margin: 0 0 1px;
position: relative;
}
JS
var $filterCheckboxes = $('input[type="checkbox"]');
$filterCheckboxes.on('change', function() {
var selectedFilters = {};
$filterCheckboxes.filter(':checked').each(function() {
if (!selectedFilters.hasOwnProperty(this.name)) {
selectedFilters[this.name] = [];
}
selectedFilters[this.name].push(this.value);
});
// create a collection containing all of the filterable elements
var $filteredResults = $('.flower');
// loop over the selected filter name -> (array) values pairs
$.each(selectedFilters, function(name, filterValues) {
// filter each .flower element
$filteredResults = $filteredResults.filter(function() {
var matched = false,
currentFilterValues = $(this).data('category').split(' ');
// loop over each category value in the current .flower's data-category
$.each(currentFilterValues, function(_, currentFilterValue) {
// if the current category exists in the selected filters array
// set matched to true, and stop looping. as we're ORing in each
// set of filters, we only need to match once
if ($.inArray(currentFilterValue, filterValues) != -1) {
matched = true;
return false;
}
});
// if matched is true the current .flower element is returned
return matched;
});
});
$('.flower').hide().filter($filteredResults).show();
});
You can check the length attribute of the results from the jQuery selector. Since the jQuery selector finds an array of elements, you can check the length attribute of the jQuery object.
if ($filteredResults.length == 0) {
$("#divID").show();
} else {
$("#divID").hide();
}

How to disable all checkboxes on load, and enable them one by one as file is selected to upload?

just need to disable the checkboxes on page load and enable them as the user selects a file to upload. For example, image is selected by user to upload for desktop so the sizes for desktop get enabled. Probably with javascript.
<html>
<head>
<title>Wallpaper Uploading Script</title>
<style type="text/css">
.formatting{
font-family: Arial;
font-size: .8em;
}
label{
display: block;
float: left;
width: 150px;
padding: 0 0px;
margin: 0 0px 0;
text-align: right;
}
form input, form textarea{
margin: 2px 0 2px 2px;
}
.checkbox{
text-align: left;
display: block;
padding: 2px;
}
</style>
<script type="text/javascript">
</script>
</head>
<body class="formatting">
<p>Select a file to Upload: </p>
<form action="../php/get_uploaded_wall.php" method="POST" enctype="multipart/form-data">
<fieldset>
<label for="wall_name">Wall Name:</label>
<input type="text" name="wall_name" size="50" /><br />
<label for="thumbnail_path">Thumbnail path:</label>
<input type="file" name="thumbnail_path" size="100" /><br />
<label for="desktop_path">Desktop path:</label>
<input id="desktop_path" type="file" name="desktop_path" size="100" /><br />
<label for="phone_path">Phone path:</label>
<input type="file" name="phone_path" size="100" /><br />
<label for="tablet_path">Tablet path:</label>
<input type="file" name="tablet_path" size="100" /><br />
<label for="desktop_dimension_id">Desktop dimensions:</label>
<label class="checkbox" id="desktop_checkbox">
<input type="checkbox" name="1366x768"> 1366x768<br />
<input type="checkbox" name="1280x800"> 1280x800<br />
<input type="checkbox" name="1920x1080"> 1920x1080<br />
<span></span>
</label>
<label for="phone_dimensions_id">Phone dimensions:</label>
<label class="checkbox" id="phone_checkbox">
<input type="checkbox" name="640x960"> 640x960<br />
<input type="checkbox" name="640x1136"> 640x1136<br />
<input type="checkbox" name="960x720"> 960x720<br />
</label>
<label for="tablet_dimensions_id" id="tablet_checkbox">Tablet dimensions:</label>
<label class="checkbox">
<input type="checkbox" name="1024x768"> 1024x768<br />
<input type="checkbox" name="2048x1536"> 2048x1536<br />
</label>
</fieldset>
<br />
<fieldset>
<input type="submit" value="Upload Wall" />
<input type="reset" value="Clear" />
</fieldset>
</form>
</body>
</html>
Here is my solution. You can view it here in Jfiddle.
The javascript I used relies on jQuery. You can see it below:
$(window).ready( function () {
$('.desktopCB').attr('disabled', '');
$('.phoneD').attr('disabled', '');
$('.tabletD').attr('disabled', '');
});
$('#desktop_path').on('change', function () {
$('.desktopCB').removeAttr('disabled');
});
$('input[name=phone_path]').on('change', function () {
$('.phoneD').removeAttr('disabled');
});
$('input[name=tablet_path]').on('change', function () {
$('.tabletD').removeAttr('disabled');
});

Categories

Resources