Fixing the position of apply button in Multi-Select Checkbox - javascript

I have designed multi-select checkbox by using some code snippets.
However, I don't want user to scroll down to the list to select the apply button.
In the Following Snapshot, There is no apply button unless user scroll bottom of the list.
What I am trying to achieve is to show the scroll bar between Select Measure and Apply Button.
JsFiddle
var expanded = false;
function showCheckboxes() {
var checkboxes = document.getElementById("checkboxes");
if (!expanded) {
checkboxes.style.display = "block";
expanded = true;
} else {
checkboxes.style.display = "none";
expanded = false;
}
}
function closebox() {
var checkboxes = document.getElementById("checkboxes");
$(checkboxes).delay(5000).fadeIn();
checkboxes.style.display = "none";
}
function sleep(miliseconds) {
var currentTime = new Date().getTime();
while (currentTime + miliseconds >= new Date().getTime()) {}
}
function getvalues() {
var str = '';
var checks = document.getElementsByClassName('checks');
for (i = 0; i < checks.length; i++) {
if (checks[i].checked === true) {
str += checks[i].value + " ";
}
}
alert(str);
}
function getvalue() {
var str = '';
var checks = document.getElementsByClassName('checks');
alert(checks[0].checked);
}
.multiselect {
width: 180px;
}
.selectBox {
/* position: relative; */
position: relative
}
.selectBox select {
width: 100%;
font-weight: bold;
}
.overSelect {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
}
#checkboxes {
display: none;
line-height: 0px;
height: 100px;
padding: 0px;
border: 1px #dadada solid;
overflow-y: scroll;
overflow-x: hidden;
}
#checkboxes::-webkit-scrollbar {
width: 6px;
}
#checkboxes::-webkit-scrollbar-thumb {
background-color: grey;
outline: 1px solid slategrey;
border-radius: 4px;
}
select {
background-color: #e6e6e6;
border: thin solid #e6e6e6;
border-radius: 4px;
display: inline-block;
font: inherit;
line-height: 1em;
padding: 0.5em 3.5em 0.5em 1em;
margin: 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
-webkit-appearance: none;
-moz-appearance: none;
width: 100%;
cursor: pointer;
outline: 0;
color: #7b7b7b;
}
.selectBox:after {
content: "\f13a";
font-family: "FontAwesome";
padding: 10px 0px 10px 2px;
position: absolute;
right: 10px;
top: 0;
color: #7b7b7b;
font-size: 15px;
z-index: 1;
text-align: center;
width: 10%;
height: 100%;
pointer-events: none;
box-sizing: border-box;
}
label {
cursor: pointer;
color: #666;
display: block;
margin: 0px 4px 2px -29px;
padding: 3px;
}
input[type="checkbox"] {
display: none;
}
input[type="checkbox"]+.label-text:before {
content: "\f096";
font-family: "FontAwesome";
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
-webkit-font-smoothing: antialiased;
width: 1em;
display: inline-block;
margin-right: 5px;
}
input[type="checkbox"]:checked+.label-text:before {
content: "\f14a";
color: #06a3e9;
}
input[type="checkbox"]:disabled+.label-text {
color: #aaa;
}
input[type="checkbox"]:disabled+.label-text:before {
content: "\f0c8";
color: #ccc;
}
.submit {
background: #ff8080;
color: #008080;
padding: 10px 5px 5px;
border: 0;
width: 100%;
font-size: 14px;
cursor: pointer;
text-align: center;
}
ul {
padding: 0px 0px 2px 34px;
}
li {
list-style: none;
padding: 0px;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<div class="multiselect">
<div class="selectBox" onclick="showCheckboxes()">
<select class="round">
<option>Select Measure</option>
</select>
<div class="overSelect"></div>
</div>
<div id="checkboxes">
<ul>
<li> <label> <input type="checkbox" name="" class="checks" value="1" onchange="closebox()"><span class="label-text">Item One</span></label></li>
<li><label> <input type="checkbox" name="" class="checks" value="2"><span class="label-text">Item Two</span></label></li>
<li><label> <input type="checkbox" name="" class="checks" value="3" ><span class="label-text">Item Three</span></label></li>
<li><label> <input type="checkbox" name="" class="checks" value="4" ><span class="label-text">Item Four</span></label></li>
<li> <label> <input type="checkbox" name="" class="checks" value="5" ><span class="label-text">Item Five</span></label></li>
<li><label> <input type="checkbox" name="" class="checks" value="6" ><span class="label-text">Item Six</span></label></li>
</ul>
<label> <input type="submit" class="submit round" value="APPLY"></label>
</div>
</div>
</form>
<button onclick="getvalues()"> Get Values </button>
/


You can move the label out of the checkboxes, so when you scroll - you will scroll only the checkboxes:
var expanded = false;
function showCheckboxes() {
var checkboxes = document.getElementById("checkboxes-container");
if (!expanded) {
checkboxes.style.display = "block";
expanded = true;
} else {
checkboxes.style.display = "none";
expanded = false;
}
}
function closebox() {
var checkboxes = document.getElementById("checkboxes-container");
$(checkboxes).delay(5000).fadeIn();
checkboxes.style.display = "none";
}
function sleep(miliseconds) {
var currentTime = new Date().getTime();
while (currentTime + miliseconds >= new Date().getTime()) {}
}
function getvalues() {
var str = '';
var checks = document.getElementsByClassName('checks');
for (i = 0; i < checks.length; i++) {
if (checks[i].checked === true) {
str += checks[i].value + " ";
}
}
alert(str);
}
function getvalue() {
var str = '';
var checks = document.getElementsByClassName('checks');
alert(checks[0].checked);
}
.multiselect {
width: 180px;
}
.selectBox {
/* position: relative; */
position: relative
}
.selectBox select {
width: 100%;
font-weight: bold;
}
.overSelect {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
}
#checkboxes-container {
display: none;
height: 120px;
}
#checkboxes {
line-height: 0px;
height: 80px;
padding: 0px;
border: 1px #dadada solid;
overflow-y: scroll;
overflow-x: hidden;
}
#checkboxes::-webkit-scrollbar {
width: 6px;
}
#checkboxes::-webkit-scrollbar-thumb {
background-color: grey;
outline: 1px solid slategrey;
border-radius: 4px;
}
select {
background-color: #e6e6e6;
border: thin solid #e6e6e6;
border-radius: 4px;
display: inline-block;
font: inherit;
line-height: 1em;
padding: 0.5em 3.5em 0.5em 1em;
margin: 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
-webkit-appearance: none;
-moz-appearance: none;
width: 100%;
cursor: pointer;
outline: 0;
color: #7b7b7b;
}
.selectBox:after {
content: "\f13a";
font-family: "FontAwesome";
padding: 10px 0px 10px 2px;
position: absolute;
right: 10px;
top: 0;
color: #7b7b7b;
font-size: 15px;
z-index: 1;
text-align: center;
width: 10%;
height: 100%;
pointer-events: none;
box-sizing: border-box;
}
label {
cursor: pointer;
color: #666;
display: block;
margin: 0px 4px 2px -29px;
padding: 3px;
}
input[type="checkbox"] {
display: none;
}
input[type="checkbox"]+.label-text:before {
content: "\f096";
font-family: "FontAwesome";
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
-webkit-font-smoothing: antialiased;
width: 1em;
display: inline-block;
margin-right: 5px;
}
input[type="checkbox"]:checked+.label-text:before {
content: "\f14a";
color: #06a3e9;
}
input[type="checkbox"]:disabled+.label-text {
color: #aaa;
}
input[type="checkbox"]:disabled+.label-text:before {
content: "\f0c8";
color: #ccc;
}
.submit {
background: #ff8080;
color: #008080;
padding: 10px 5px 5px;
border: 0;
width: 100%;
font-size: 14px;
cursor: pointer;
text-align: center;
}
ul {
padding: 0px 0px 2px 34px;
}
li {
list-style: none;
padding: 0px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">
<form>
<div class="multiselect">
<div class="selectBox" onclick="showCheckboxes()">
<select class="round">
<option>Select Measure</option>
</select>
<div class="overSelect"></div>
</div>
<div id="checkboxes-container">
<div id="checkboxes">
<ul>
<li> <label> <input type="checkbox" name="" class="checks" value="1" onchange="closebox()"><span class="label-text">Item One</span></label></li>
<li><label> <input type="checkbox" name="" class="checks" value="2"><span class="label-text">Item Two</span></label></li>
<li><label> <input type="checkbox" name="" class="checks" value="3" ><span class="label-text">Item Three</span></label></li>
<li><label> <input type="checkbox" name="" class="checks" value="4" ><span class="label-text">Item Four</span></label></li>
<li> <label> <input type="checkbox" name="" class="checks" value="5" ><span class="label-text">Item Five</span></label></li>
<li><label> <input type="checkbox" name="" class="checks" value="6" ><span class="label-text">Item Six</span></label></li>
</ul>
</div>
<label> <input type="submit" class="submit round" value="APPLY"></label>
</div>
</div>
</form>
<button onclick="getvalues()"> Get Values </button>

Related

Form input checkbox and file type isn't functioning

I'm trying to make a form for adding a blog page.
I have title form, date form, content form, checkbox for blog category form and image form for the topic image.
When I try to fill the form, only the 3 of the 4 checkbox forms that worked and when I click upload image it won't show the file selector.
Here's the screenshot:
Form screenshot
This is what I'm trying to achieve:
Form screenshot
I've tried to browse for solution but my English isn't very good for browsing, I don't know the keyword to search for the solution.
Please help, I've stuck on this for 3 hours.
Here's the full code:
let blogs = []
function addBlog(event) {
event.preventDefault()
let inputName = document.getElementById("inputProjectName").value
let inputContent = document.getElementById("inputDescription").value
let inputImage = document.getElementById("inputImage")
const projectDate = {
startDate: document.getElementById("inputStartDate").value,
endDate: document.getElementById("inputEndDate").value
}
image = URL.createObjectURL(image.files[0])
let cardIcons = {
html: document.querySelector('input[name="checkHtml"]').checked,
css: document.querySelector('input[name="checkCss"]').checked,
nodeJs: document.querySelector('input[name="checkNode"]').checked,
reactJs: document.querySelector('input[name="checkReact"]').checked
}
let blog = {
title: inputName,
date: projectDate,
content: inputContent,
icons: cardIcons,
image: inputImage
}
blogs.push(blog)
console.table(blogs)
}
/* FORM */
.mpi-title {
width: 100%;
margin: 50px 0px;
font-size: 30px;
text-align: center;
font-family: 'Lato', sans-serif !important;
font-weight: 700;
}
.mpi-form-container {
display: flex;
justify-content: center;
}
.mpi-form {
width: 540px;
display: flex;
justify-content: center;
}
.mpi-form label {
font-size: 25px;
font-weight: bold;
}
.mpi-form .mpi-name input,
.mpi-date input {
width: 100%;
height: 50px;
padding: 5px;
box-sizing: border-box;
font-size: 20px;
font-weight: 400;
padding-bottom: 5px;
margin-top: 5px;
margin-bottom: 20px;
border: 1px solid #c4c4c4;
border-radius: 8px;
box-shadow: 0 5px 5px rgb(0 0 0 / 26%);
}
.mpi-date {
flex-grow: 1;
display: flex;
gap: 10px;
}
.mpi-date .date-start {
flex: 50%;
}
.mpi-date .date-end {
flex: 50%;
}
[type="date"]::-webkit-datetime-edit {
opacity: 0;
}
[type="date"]::-webkit-calendar-picker-indicator {
opacity: 0;
width: 100%;
}
.mpi-desc textarea {
width: 100%;
font-size: 20px;
font-weight: 400;
padding: 8px;
margin-top: 5px;
margin-bottom: 20px;
border: 1px solid #c4c4c4;
box-sizing: border-box;
border-radius: 8px;
height: 200px;
}
.mpi-check {
display: flex;
gap: 120px;
margin: 20px 0px;
}
.mpi-check label {
font-size: 20px;
}
.check-left {
display: flex;
flex-direction: column;
row-gap: 20px;
}
.check-right {
display: flex;
flex-direction: column;
row-gap: 20px;
}
.check-label {
display: block;
position: relative;
padding-left: 35px;
color: #514a4a;
margin-bottom: 12px;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.check-label input {
position: absolute;
opacity: 0;
cursor: pointer;
height: 0;
width: 0;
}
.checkmark {
position: absolute;
top: 0;
left: 0;
height: 25px;
width: 25px;
background-color: white;
border-radius: 5px;
box-shadow: 0 5px 5px rgb(0 0 0 / 26%);
}
.check-label:hover input~.checkmark {
background-color: #ccc;
}
.check-label input:checked~.checkmark {
background-color: #2196F3;
}
.checkmark:after {
content: "";
position: absolute;
display: none;
}
.check-label input:checked~.checkmark:after {
display: block;
}
.check-label .checkmark:after {
left: 9px;
top: 5px;
width: 5px;
height: 10px;
border: solid white;
border-width: 0 3px 3px 0;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}
.mpi-image {
overflow: hidden;
height: 50px;
width: 100%;
font-size: 20px;
font-weight: 400;
box-sizing: border-box;
margin-top: 5px;
margin-bottom: 20px;
background: #f4f3f3;
border: 1px solid #c4c4c4;
border-radius: 8px;
cursor: pointer;
padding-right: 8px;
box-shadow: 0 10px 10px rgb(0 0 0 / 26%);
}
.mpi-image label {
width: 100%;
height: 50px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: space-between;
}
.mpi-choose {
margin-top: -2px;
border-radius: 8px;
align-items: center;
padding: 13px 10px 13px 10px;
background-color: #e4e4e4;
color: #b2abab;
}
.mpi-attach {
padding-right: 10px;
}
.mpi-submit button {
margin-top: 30px;
float: right;
padding: 10px 30px;
border: none;
border-radius: 25px;
background-color: var(--btn);
color: white;
font-size: 15px;
font-weight: bold;
cursor: pointer;
margin-bottom: 110px;
}
.mpi-submit button:hover {
background-color: var(--btn-hover)
}
/* x FORM */
<div class="mpi-form">
<!--MP = My Project Input-->
<form onsubmit="addBlog(event)">
<div class="mpi-name">
<label for="inputProjectName">Project Name</label>
<input type="text" id="inputProjectName">
</div>
<div class="mpi-date">
<div class="date-start">
<label for="inputStartDate">Start Date</label>
<input type="date" id="inputStartDate">
</div>
<div class="date-end">
<label for="inputEndDate">End Date</label>
<input type="date" id="inputEndDate">
</div>
</div>
<div class="mpi-desc">
<label for="inputDescription">Description</label>
<textarea name="inputDescription" id="inputDescription"></textarea>
</div>
<div class="mpi-check-cont">
<label for="checkTitle">Technologies</label>
<div class="mpi-check">
<div class="check-left">
<div>
<label for="checkHtml" class="check-label">HTML
<input type="checkbox" id="checkHtml" name="checkHtml"check>
<span class="checkmark"></span>
</label>
</div>
<div>
<label for="checkNode" class="check-label">Node Js
<input type="checkbox" id="checkNode" name="checkNode">
<span class="checkmark"></span>
</label>
</div>
</div>
<div class="check-right">
<div>
<label for="checkCss" class="check-label">CSS
<input type="checkbox" id="checkCss" name="checkCss">
<span class="checkmark"></span>
</label>
</div>
<div>
<label for="reactJs" class="check-label">React Js
<input type="checkbox" id="checkReact" name="checkReact">
<span class="checkmark"></span>
</label>
</div>
</div>
</div>
</div>
<div>
<label>Upload Image</label>
<div class="mpi-image">
<label for="input-blog-image">
<div class="mpi-choose">Choose</div>
<div class="mpi-attach"><i class="fa-solid fa-paperclip"></i></div>
</label>
<input type="file" id="inputImage" hidden />
</div>
</div>
<div class="mpi-submit">
<button type="submit">Submit</button>
</div>
</form>
Thanks

The very first mistake is you have added different id than for
<label for="reactJs" class="check-label">React Js
<input type="checkbox" id="checkReact" name="checkReact">
<span class="checkmark"></span>
</label>
Here for value is reactJs but input id is checkReact
Second mistake is same as above
<label for="input-blog-image">
<div class="mpi-choose">Choose</div>
<div class="mpi-attach"><i class="fa-solid fa-paperclip"></i></div>
</label>
<input type="file" id="inputImage" hidden />
label for value is input-blog-image but input id is inputImage
Make those changes, will work fine.
let blogs = []
function addBlog(event) {
event.preventDefault()
let inputName = document.getElementById("inputProjectName").value
let inputContent = document.getElementById("inputDescription").value
let inputImage = document.getElementById("inputImage")
const projectDate = {
startDate: document.getElementById("inputStartDate").value,
endDate: document.getElementById("inputEndDate").value
}
image = URL.createObjectURL(image.files[0])
let cardIcons = {
html: document.querySelector('input[name="checkHtml"]').checked,
css: document.querySelector('input[name="checkCss"]').checked,
nodeJs: document.querySelector('input[name="checkNode"]').checked,
reactJs: document.querySelector('input[name="checkReact"]').checked
}
let blog = {
title: inputName,
date: projectDate,
content: inputContent,
icons: cardIcons,
image: inputImage
}
blogs.push(blog)
console.table(blogs)
}
mpi-title {
width: 100%;
margin: 50px 0px;
font-size: 30px;
text-align: center;
font-family: 'Lato', sans-serif !important;
font-weight: 700;
}
.mpi-form-container {
display: flex;
justify-content: center;
}
.mpi-form {
width: 540px;
display: flex;
justify-content: center;
}
.mpi-form label {
font-size: 25px;
font-weight: bold;
}
.mpi-form .mpi-name input,
.mpi-date input {
width: 100%;
height: 50px;
padding: 5px;
box-sizing: border-box;
font-size: 20px;
font-weight: 400;
padding-bottom: 5px;
margin-top: 5px;
margin-bottom: 20px;
border: 1px solid #c4c4c4;
border-radius: 8px;
box-shadow: 0 5px 5px rgb(0 0 0 / 26%);
}
.mpi-date {
flex-grow: 1;
display: flex;
gap: 10px;
}
.mpi-date .date-start {
flex: 50%;
}
.mpi-date .date-end {
flex: 50%;
}
[type="date"]::-webkit-datetime-edit {
opacity: 0;
}
[type="date"]::-webkit-calendar-picker-indicator {
opacity: 0;
width: 100%;
}
.mpi-desc textarea {
width: 100%;
font-size: 20px;
font-weight: 400;
padding: 8px;
margin-top: 5px;
margin-bottom: 20px;
border: 1px solid #c4c4c4;
box-sizing: border-box;
border-radius: 8px;
height: 200px;
}
.mpi-check {
display: flex;
gap: 120px;
margin: 20px 0px;
}
.mpi-check label {
font-size: 20px;
}
.check-left {
display: flex;
flex-direction: column;
row-gap: 20px;
}
.check-right {
display: flex;
flex-direction: column;
row-gap: 20px;
}
.check-label {
display: block;
position: relative;
padding-left: 35px;
color: #514a4a;
margin-bottom: 12px;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.check-label input {
position: absolute;
opacity: 0;
cursor: pointer;
height: 0;
width: 0;
}
.checkmark {
position: absolute;
top: 0;
left: 0;
height: 25px;
width: 25px;
background-color: white;
border-radius: 5px;
box-shadow: 0 5px 5px rgb(0 0 0 / 26%);
}
.check-label:hover input~.checkmark {
background-color: #ccc;
}
.check-label input:checked~.checkmark {
background-color: #2196F3;
}
.checkmark:after {
content: "";
position: absolute;
display: none;
}
.check-label input:checked~.checkmark:after {
display: block;
}
.check-label .checkmark:after {
left: 9px;
top: 5px;
width: 5px;
height: 10px;
border: solid white;
border-width: 0 3px 3px 0;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}
.mpi-image {
overflow: hidden;
height: 50px;
width: 100%;
font-size: 20px;
font-weight: 400;
box-sizing: border-box;
margin-top: 5px;
margin-bottom: 20px;
background: #f4f3f3;
border: 1px solid #c4c4c4;
border-radius: 8px;
cursor: pointer;
padding-right: 8px;
box-shadow: 0 10px 10px rgb(0 0 0 / 26%);
}
.mpi-image label {
width: 100%;
height: 50px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: space-between;
}
.mpi-choose {
margin-top: -2px;
border-radius: 8px;
align-items: center;
padding: 13px 10px 13px 10px;
background-color: #e4e4e4;
color: #b2abab;
}
.mpi-attach {
padding-right: 10px;
}
.mpi-submit button {
margin-top: 30px;
float: right;
padding: 10px 30px;
border: none;
border-radius: 25px;
background-color: var(--btn);
color: white;
font-size: 15px;
font-weight: bold;
cursor: pointer;
margin-bottom: 110px;
}
.mpi-submit button:hover {
background-color: var(--btn-hover)
}
<form onsubmit="addBlog(event)">
<div class="mpi-name">
<label for="inputProjectName">Project Name</label>
<input type="text" id="inputProjectName">
</div>
<div class="mpi-date">
<div class="date-start">
<label for="inputStartDate">Start Date</label>
<input type="date" id="inputStartDate">
</div>
<div class="date-end">
<label for="inputEndDate">End Date</label>
<input type="date" id="inputEndDate">
</div>
</div>
<div class="mpi-desc">
<label for="inputDescription">Description</label>
<textarea name="inputDescription" id="inputDescription"></textarea>
</div>
<div class="mpi-check-cont">
<label for="checkTitle">Technologies</label>
<div class="mpi-check">
<div class="check-left">
<div>
<label for="checkHtml" class="check-label">HTML
<input type="checkbox" id="checkHtml" name="checkHtml"check>
<span class="checkmark"></span>
</label>
</div>
<div>
<label for="checkNode" class="check-label">Node Js
<input type="checkbox" id="checkNode" name="checkNode">
<span class="checkmark"></span>
</label>
</div>
</div>
<div class="check-right">
<div>
<label for="checkCss" class="check-label">CSS
<input type="checkbox" id="checkCss" name="checkCss">
<span class="checkmark"></span>
</label>
</div>
<div>
<label for="reactJs" class="check-label">React Js
<input type="checkbox" id="reactJs" name="checkReact">
<span class="checkmark"></span>
</label>
</div>
</div>
</div>
</div>
<div>
<label>Upload Image</label>
<div class="mpi-image">
<label for="input-blog-image">
<div class="mpi-choose">Choose</div>
<div class="mpi-attach"><i class="fa-solid fa-paperclip"></i></div>
</label>
<input type="file" id="input-blog-image" hidden />
</div>
</div>
<div class="mpi-submit">
<button type="submit">Submit</button>
</div>
</form>

The problem is the wrong value for the for attribute on two label elements. These are:
<label for="reactJs" class="check-label">
<label for="input-blog-image">
And the correct values would be:
<label for="checkReact" class="check-label">
<label for="inputImage">

Form check prevent from submiting even when everything is ok

i have a problem with my form, i ran it through the form checker and even when everything is successful it still won't submit. i tried to change it a lot of times and im not sure how to keep the code like that instead of one function that will return on form submit.
const form = document.getElementById('form');
const username = document.getElementById('username');
const email = document.getElementById('email');
const password = document.getElementById('password');
const password2 = document.getElementById('password2');
const genderSelected = document.getElementById('select');
//Show input error messages
function showError(input, message) {
const formControl = input.parentElement;
formControl.className = 'form-control error';
const small = formControl.querySelector('small');
small.innerText = message;
}
//show success colour
function showSucces(input) {
const formControl = input.parentElement;
formControl.className = 'form-control success';
}
//check email is valid
function checkEmail(input) {
const re = /^(([^<>()\[\]\\.,;:\s#"]+(\.[^<>()\[\]\\.,;:\s#"]+)*)|(".+"))#((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
if (re.test(input.value.trim())) {
showSucces(input)
} else {
showError(input, 'Email is not invalid');
}
}
//checkRequired fields
function checkRequired(inputArr) {
inputArr.forEach(function(input) {
if (input.value.trim() === '') {
showError(input, `${getFieldName(input)} is required`)
} else {
showSucces(input);
}
});
}
//check input Length
function checkLength(input, min, max) {
if (input.value.length < min) {
showError(input, `${getFieldName(input)} must be at least ${min} characters`);
} else if (input.value.length > max) {
showError(input, `${getFieldName(input)} must be les than ${max} characters`);
} else {
showSucces(input);
}
}
//get FieldName
function getFieldName(input) {
return input.id.charAt(0).toUpperCase() + input.id.slice(1);
}
// check passwords match
function checkPasswordMatch(input1, input2) {
if (input1.value !== input2.value) {
showError(input2, 'Passwords do not match');
}
}
//check if selected a gender
function checkSelect(option) {
if (select.value)
showSucces(option);
else
showError(option, 'Please select a gender');
}
//Event Listeners
form.addEventListener('submit', function(e) {
e.preventDefault();
checkRequired([username, email, password, password2, genderSelected]);
checkLength(username, 3, 15);
checkLength(password, 6, 25);
checkEmail(email);
checkPasswordMatch(password, password2);
checkSelect(genderSelected);
});
#import url('https://fonts.googleapis.com/css?family=Open+Sans&display=swap');
:root {
--succes-color: #2ecc71;
--error-color: #e74c3c;
}
* {
box-sizing: border-box;
}
.wrapper {
width: 400px;
max-width: 100%;
box-sizing: border-box;
padding: 25px;
margin: 8% auto 0;
position: relative;
}
.container {
background-color: #fff;
border-radius: 5px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
width: 400px;
}
h2 {
text-align: center;
margin: 0 0 20px;
}
.form {
padding: 30px 40px;
}
.form-control {
margin-bottom: 10px;
padding-bottom: 20px;
position: relative;
}
.form-control label {
color: #777;
display: block;
margin-bottom: 5px;
}
.form-control input {
border: 2px solid #f0f0f0;
border-radius: 4px;
display: block;
width: 100%;
padding: 10px;
font-size: 14px;
}
.form-control input:focus {
outline: 0;
border-color: #777;
}
.form-control.success input {
border-color: var(--succes-color);
}
.form-control.error input {
border-color: var(--error-color);
}
.form-control small {
color: var(--error-color);
position: absolute;
bottom: 0;
left: 0;
visibility: hidden;
}
.form-control.error small {
visibility: visible;
}
.form button {
cursor: pointer;
background-color: #3498db;
border: 2px solid #3498db;
border-radius: 4px;
color: #fff;
display: block;
padding: 10px;
font-size: 16px;
margin-top: 20px;
width: 100%;
}
form {
border: 0px solid black;
display: inline-block;
text-align: left;
}
body {
margin: 50px 0px;
padding: 0px;
text-align: center;
align-items: center;
justify-content: center;
min-height: 100vh;
margin: 0;
background-color: lightblue;
}
.nav {
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
display: inline;
resize: horizontal
}
label,
input[type="text,password,date"] {
display: block;
width: 150px;
float: left;
margin-bottom: 10px;
}
input[type="radio"] {
display: block;
width: 25px;
float: left;
margin-bottom: 10px;
}
label {
text-align: right;
width: 75px;
padding-right: 20px;
}
br {
clear: left;
}
h1 {
color: black;
text-align: center;
font-size: xx-large;
}
.button {
text-align: center;
margin: auto;
display: inline-block;
padding: 5px 15px;
font-size: 18px;
cursor: pointer;
text-align: center;
text-decoration: none;
outline: none;
color: black;
background-color: white;
border: none;
border-radius: 15px;
box-shadow: 0 9px #999;
}
.button:hover {
background-color: black;
color: white;
}
.button:active {
background-color: black;
color: white;
box-shadow: 0 5px #666;
transform: translateY(4px);
}
p {
font-family: verdana;
font-size: 20px;
}
#wrapper {
width: 30%;
margin: 50px auto;
padding: 50px;
background: #D7FBFF;
}
.textInput {
border: none;
height: 28px;
margin: 2px;
border: 1px solid #6B7363;
font-size: 1.2em;
padding: 5px;
width: 95%;
}
.textInput:focus {
outline: none;
}
.btn {
width: 98.6%;
border: none;
margin-top: 5px;
color: white;
background-color: #3b5998;
border-radius: 5px;
padding: 12px;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li {
float: left;
border-right: 1px solid #bbb;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover:not(.active) {
background-color: #111;
}
.active {
background-color: #04AA6D;
}
output {
display: inline;
}
.customizedBox {
border: 1px solid #111;
width: 500px;
height: 400px;
}
select {
width: 280px;
height: 40px;
padding: 10px;
margin: auto;
top: 0;
left: 0;
bottom: 0;
right: 0;
z-index: 1;
border: none;
}
<div class="nav">
<ul>
<li>Home</li>
<li>Memes Over The Years</li>
<li>Profile</li>
<li>About</li>
</ul>
</div>
<!-- partial:index.partial.html -->
<div class="wrapper">
<div class="container">
<form id="form" class="form">
<h2>Register With Us</h2>
<div class="form-control">
<label for="username">Username</label>
<input type="text" id="username" placeholder="Enter Username">
<small>Error Message</small>
</div>
<div class="form-control">
<label for="email">Email</label>
<input type="text" id="email" placeholder="Enter email">
<small>Error Message</small>
</div>
<div class="form-control">
<label for="password">Password</label>
<input type="password" id="password" placeholder="Enter password">
<small>Error Message</small>
</div>
<div class="form-control">
<label for="password2">Confirm Password</label>
<input type="password" id="password2" placeholder="Enter password again">
<small>Error Message</small>
</div>
<div class="form-control">
<label for="gender">Gender</label> <br/>
<select id="select">
<option value="">Choose an option</option>
<option value="Male">Male</option>
<option value="female">Female</option>
<option value="other">Other</option>
</select>
<small>Error Message</small>
</div>
<button type="submit">Submit</button>
</form>
</div>
</div>
<br /><br /><br /><br />
<span>Allready have an account?Log In</span>

Here is the simplest fix for you always blocking the submission with preventDefault
if (document.querySelectorAll(".error").length > 0) e.preventDefault();
const form = document.getElementById('form');
const username = document.getElementById('username');
const email = document.getElementById('email');
const password = document.getElementById('password');
const password2 = document.getElementById('password2');
const genderSelected = document.getElementById('select');
//Show input error messages
function showError(input, message) {
const formControl = input.parentElement;
formControl.className = 'form-control error';
const small = formControl.querySelector('small');
small.innerText = message;
}
//show success colour
function showSucces(input) {
const formControl = input.parentElement;
formControl.className = 'form-control success';
}
//check email is valid
function checkEmail(input) {
const re = /^(([^<>()\[\]\\.,;:\s#"]+(\.[^<>()\[\]\\.,;:\s#"]+)*)|(".+"))#((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
if (re.test(input.value.trim())) {
showSucces(input)
} else {
showError(input, 'Email is not invalid');
}
}
//checkRequired fields
function checkRequired(inputArr) {
inputArr.forEach(function(input) {
if (input.value.trim() === '') {
showError(input, `${getFieldName(input)} is required`)
} else {
showSucces(input);
}
});
}
//check input Length
function checkLength(input, min, max) {
if (input.value.length < min) {
showError(input, `${getFieldName(input)} must be at least ${min} characters`);
} else if (input.value.length > max) {
showError(input, `${getFieldName(input)} must be les than ${max} characters`);
} else {
showSucces(input);
}
}
//get FieldName
function getFieldName(input) {
return input.id.charAt(0).toUpperCase() + input.id.slice(1);
}
// check passwords match
function checkPasswordMatch(input1, input2) {
if (input1.value !== input2.value) {
showError(input2, 'Passwords do not match');
}
}
//check if selected a gender
function checkSelect(option) {
if (select.value)
showSucces(option);
else
showError(option, 'Please select a gender');
}
//Event Listeners
form.addEventListener('submit', function(e) {
checkRequired([username, email, password, password2, genderSelected]);
checkLength(username, 3, 15);
checkLength(password, 6, 25);
checkEmail(email);
checkPasswordMatch(password, password2);
checkSelect(genderSelected);
if (document.querySelectorAll(".error").length > 0) e.preventDefault();
});
#import url('https://fonts.googleapis.com/css?family=Open+Sans&display=swap');
:root {
--succes-color: #2ecc71;
--error-color: #e74c3c;
}
* {
box-sizing: border-box;
}
.wrapper {
width: 400px;
max-width: 100%;
box-sizing: border-box;
padding: 25px;
margin: 8% auto 0;
position: relative;
}
.container {
background-color: #fff;
border-radius: 5px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
width: 400px;
}
h2 {
text-align: center;
margin: 0 0 20px;
}
.form {
padding: 30px 40px;
}
.form-control {
margin-bottom: 10px;
padding-bottom: 20px;
position: relative;
}
.form-control label {
color: #777;
display: block;
margin-bottom: 5px;
}
.form-control input {
border: 2px solid #f0f0f0;
border-radius: 4px;
display: block;
width: 100%;
padding: 10px;
font-size: 14px;
}
.form-control input:focus {
outline: 0;
border-color: #777;
}
.form-control.success input {
border-color: var(--succes-color);
}
.form-control.error input {
border-color: var(--error-color);
}
.form-control small {
color: var(--error-color);
position: absolute;
bottom: 0;
left: 0;
visibility: hidden;
}
.form-control.error small {
visibility: visible;
}
.form button {
cursor: pointer;
background-color: #3498db;
border: 2px solid #3498db;
border-radius: 4px;
color: #fff;
display: block;
padding: 10px;
font-size: 16px;
margin-top: 20px;
width: 100%;
}
form {
border: 0px solid black;
display: inline-block;
text-align: left;
}
body {
margin: 50px 0px;
padding: 0px;
text-align: center;
align-items: center;
justify-content: center;
min-height: 100vh;
margin: 0;
background-color: lightblue;
}
.nav {
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
display: inline;
resize: horizontal
}
label,
input[type="text,password,date"] {
display: block;
width: 150px;
float: left;
margin-bottom: 10px;
}
input[type="radio"] {
display: block;
width: 25px;
float: left;
margin-bottom: 10px;
}
label {
text-align: right;
width: 75px;
padding-right: 20px;
}
br {
clear: left;
}
h1 {
color: black;
text-align: center;
font-size: xx-large;
}
.button {
text-align: center;
margin: auto;
display: inline-block;
padding: 5px 15px;
font-size: 18px;
cursor: pointer;
text-align: center;
text-decoration: none;
outline: none;
color: black;
background-color: white;
border: none;
border-radius: 15px;
box-shadow: 0 9px #999;
}
.button:hover {
background-color: black;
color: white;
}
.button:active {
background-color: black;
color: white;
box-shadow: 0 5px #666;
transform: translateY(4px);
}
p {
font-family: verdana;
font-size: 20px;
}
#wrapper {
width: 30%;
margin: 50px auto;
padding: 50px;
background: #D7FBFF;
}
.textInput {
border: none;
height: 28px;
margin: 2px;
border: 1px solid #6B7363;
font-size: 1.2em;
padding: 5px;
width: 95%;
}
.textInput:focus {
outline: none;
}
.btn {
width: 98.6%;
border: none;
margin-top: 5px;
color: white;
background-color: #3b5998;
border-radius: 5px;
padding: 12px;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li {
float: left;
border-right: 1px solid #bbb;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover:not(.active) {
background-color: #111;
}
.active {
background-color: #04AA6D;
}
output {
display: inline;
}
.customizedBox {
border: 1px solid #111;
width: 500px;
height: 400px;
}
select {
width: 280px;
height: 40px;
padding: 10px;
margin: auto;
top: 0;
left: 0;
bottom: 0;
right: 0;
z-index: 1;
border: none;
}
<div class="nav">
<ul>
<li>Home</li>
<li>Memes Over The Years</li>
<li>Profile</li>
<li>About</li>
</ul>
</div>
<!-- partial:index.partial.html -->
<div class="wrapper">
<div class="container">
<form id="form" class="form">
<h2>Register With Us</h2>
<div class="form-control">
<label for="username">Username</label>
<input type="text" id="username" placeholder="Enter Username">
<small>Error Message</small>
</div>
<div class="form-control">
<label for="email">Email</label>
<input type="text" id="email" placeholder="Enter email">
<small>Error Message</small>
</div>
<div class="form-control">
<label for="password">Password</label>
<input type="password" id="password" placeholder="Enter password">
<small>Error Message</small>
</div>
<div class="form-control">
<label for="password2">Confirm Password</label>
<input type="password" id="password2" placeholder="Enter password again">
<small>Error Message</small>
</div>
<div class="form-control">
<label for="gender">Gender</label> <br/>
<select id="select">
<option value="">Choose an option</option>
<option value="Male">Male</option>
<option value="female">Female</option>
<option value="other">Other</option>
</select>
<small>Error Message</small>
</div>
<button type="submit">Submit</button>
</form>
</div>
</div>
<br /><br /><br /><br />
<span>Allready have an account?Log In</span>

You call e.preventDefault() unconditionally.
This means, that whatever your code does, you will never submit the form (the default action)
Wrap the prevent default in an if statement and execute it only if the validation fails.

3 popup div click outside to close

I have 3 popup divs that open onclick. At first it you clicked inside the div it closed, i fixed that. Then i found a code to click outside the div and it would close the div. So I edited that code and it works fine, if you click outside the div it closed. So I added that code to all 3 and now none of the click outside the divs to close work. I do not understand why this is happening as I am extremely new to java script coding. If someone could help me I would be extremely grateful.Thanks
function myFunction() {
var popup = document.getElementById("myPopup");
popup.classList.toggle("show");
}
// Prevents menu from closing when clicked inside
document.getElementById("myPopup").addEventListener('click', function (event) {
event.stopPropagation();
});
// Closes the menu in the event of outside click
window.onclick = function(event) {
if (!event.target.matches('.amount')) {
var dropdowns =
document.getElementsByClassName("tooltiptext");
var i;
for (i = 0; i < dropdowns.length; i++) {
var openmyPopup = dropdowns[i];
if (openmyPopup.classList.contains('show')) {
openmyPopup.classList.remove('show');
}
}
}
}
function myFunctions() {
var popup = document.getElementById("mypopup");
popup.classList.toggle("shows");
}
// Prevents menu from closing when clicked inside
document.getElementById("mypopup").addEventListener('click', function (event) {
event.stopPropagation();
});
// Closes the menu in the event of outside click
window.onclick = function(event) {
if (!event.target.matches('.furbm')) {
var dropdowns =
document.getElementsByClassName("tooltipstext");
var i;
for (i = 0; i < dropdownss.length; i++) {
var openmypopup = dropdowns[i];
if (openmypopup.classList.contains('shows')) {
openmypopup.classList.remove('shows');
}
}
}
}
function myFunctionss() {
var popup = document.getElementById("mYpopup");
popup.classList.toggle("showS");
}
// Prevents menu from closing when clicked inside
document.getElementById("mYpopup").addEventListener('click', function (event) {
event.stopPropagation();
});
// Closes the menu in the event of outside click
window.onclick = function(event) {
if (!event.target.matches('.furbc')) {
var dropdowns =
document.getElementsByClassName("toolstiptext");
var i;
for (i = 0; i < dropdowns.length; i++) {
var openmYpopup = dropdowns[i];
if (openmypopup.classList.contains('showS')) {
openmypopup.classList.remove('showS');
}
}
}
}
/******************************************************************************************************************************************************Header*/
.s-header {
background-color: red;
bottom: 0;
height: 65px;
left: 0;
position: absolute;
right: 0;
top: 0;
width: 100%;
}
.s-header-inner {
background-color: red;
border: 1px solid red;
height: 63px;
margin: auto;
width: 95%;
}
.s-header-links-left {
float: left;
margin-top: 12px;
}
/********************************************************************************************************************************************************Logo*/
.s-logo {
height: 65px;
position: absolute;
width: 150px;
}
.s-logo img {
position: absolute;
width: 185px;
}
/***********************************************************************************************************************************************Amount Raised*/
.s-header-links-right {
float: right;
margin-top: 20px;
}
.amount {
color: red;
cursor: pointer;
font-family: Netflix Sans,Helvetica,Arial,sans-serif;
font-size: 18px;
font-weight: 600;
}
.amount:hover {
color: red;
cursor: pointer;
font-family: Netflix Sans,Helvetica,Arial,sans-serif;
font-size: 18px;
font-weight: 600;
}
.tooltip {
display: inline-block;
-moz-user-select: none;
-ms-user-select: none;
position: relative;
-webkit-user-select: none;
user-select: none;
}
.tooltip .tooltiptext {
background-color: rgba(0, 0, 0, 0.36);
border-radius: 5px;
border-top: 4px solid #da291c;
color: #ffffff;
font-family: Netflix Sans,Helvetica,Arial,sans-serif;
font-size: 15px;
font-weight: 400;
left: 50%;
margin-left: -190px;
margin-top: 1px;
opacity: 1;
padding: 10px ;
position: absolute;
text-align: left;
visibility: hidden;
width: 205px;
z-index: 1;
}
/* Toggle this class - hide and show the popup */
.tooltip .show {
animation: fadeIn 1s;
visibility: visible;
-webkit-animation: fadeIn 1s;
}
/***************************************************************************************************************************************Fur Baby Of The Month*/
.furbm {
cursor: pointer;
margin-left: 25px;
margin-right: 25px;
}
.furbm .fa-trophy {
color: red!important;
font-size: 18px!important;
}
.furbm .fa-trophy:hover {
color: red!important;
font-size: 18px!important;
}
.tooltips {
display: inline-block;
-moz-user-select: none;
-ms-user-select: none;
position: relative;
-webkit-user-select: none;
user-select: none;
}
.tooltips .tooltipstext {
background-color: rgba(0, 0, 0, 0.36);
border-radius: 5px;
border-top: 4px solid #da291c;
color: #ffffff;
font-family: Netflix Sans,Helvetica,Arial,sans-serif;
font-size: 15px;
font-weight: 400;
left: 50%;
margin-left: -215px;
margin-top: 1px;
opacity: 1;
padding: 10px ;
position: absolute;
text-align: center;
visibility: hidden;
width: 205px;
z-index: 1;
}
.tooltips .shows {
animation: fadeIn 1s;
visibility: visible;
-webkit-animation: fadeIn 1s;
}
.tooltipstext img {
height: 150px;
margin-top: 20px;
width: 150px
}
/***************************************************************************************************************************************Fur Baby Contest*/
.furbc {
cursor: pointer;
}
.furbc .fa-comments {
color: red!important;
font-size: 20px!important;
}
.furbc .fa-comments:hover {
color: #ffffff!important;
font-size: 20px!important;
}
.toolstip {
display: inline-block;
-moz-user-select: none;
-ms-user-select: none;
position: relative;
-webkit-user-select: none;
user-select: none;
}
.toolstip .toolstiptext {
background-color: rgba(0, 0, 0, 0.36);
border-radius: 5px;
border-top: 4px solid #da291c;
color: #ffffff;
font-family: Netflix Sans,Helvetica,Arial,sans-serif;
font-size: 15px;
font-weight: 400;
left: 50%;
margin-left: -281px;
margin-top: 1px;
opacity: 1;
padding: 10px ;
position: absolute;
text-align: left;
visibility: hidden;
width: 275px;
z-index: 1;
}
.toolstip .showS {
animation: fadeIn 1s;
visibility: visible;
-webkit-animation: fadeIn 1s;
}
.furbcf form {
display: flex;
position: relative;
width: 100%;
}
.furbcf input[type=text] {
border: 1px solid #C2C2C2;
border-radius: 5px;
box-sizing: border-box;
color: #242527;
font-family: Netflix Sans,Helvetica,Arial,sans-serif;
font-size: 15px;
font-weight: 300;
margin: 0px 0px;
padding: 5px 5px;
width: 175px;
}
.furbcf input:focus {
border: 1px solid #da291c;
border-radius: 5px;
outline: none;
}
.furbcf textarea {
border: 1px solid #C2C2C2;
border-radius: 5px;
box-sizing: border-box;
color: #242527;
font-family: Netflix Sans,Helvetica,Arial,sans-serif;
font-size: 15px;
font-weight: 300;
margin: 0px 0;
padding: 5px 5px;
width: 175px;
}
.furbcf textarea:focus {
border: 1px solid #da291c;
border-radius: 5px;
outline: none;
}
.furbcf input[type="submit"] {
background-color: #ffffff;
border: 2px solid #da291c;
border-radius: 5px;
box-sizing: border-box;
color: #da291c;
cursor: pointer;
font-family: Netflix Sans,Helvetica,Arial,sans-serif;
font-size: 15px;
font-weight: 300;
outline: none;
padding: 5px;
width: 100px;
}
.furbcf input[type="submit"]:hover {
background-color: #da291c;
border: 2px solid #da291c;
border-radius: 5px;
box-sizing: border-box;
color: #ffffff;
cursor: pointer;
font-family: Netflix Sans,Helvetica,Arial,sans-serif;
font-size: 15px;
font-weight: 300;
padding: 5px;
width: 100px;
}
/********************************************************************************************************************************************************Menu*/
i.fa-bars {
color: rgba(255, 255, 255, 0.8);
font-size: 20px;
margin-left: 25px;
}
i.fa-bars:hover {
color: #ffffff;
font-size: 20px;
margin-left: 25px;
}
.sidenav {
border-left: 1px solid #ccd1d4;
background-color: #ffffff;
height: 100%;
overflow-x: hidden;
padding-top: 50px;
position: fixed;
right: -1px;
top: 0;
transition: 0.5s;
width: 0;
z-index: 1;
}
.sidenav p {
color: #242527;
display: block;
font-family: Netflix Sans,Helvetica,Arial,sans-serif;
font-size: 13px;
font-weight: 400;
padding: 12px 8px 0px 32px;
text-decoration: none;
text-transform: uppercase;
transition: 0.3s;
}
.sidenav a {
color: #242527!important;
display: block!important;
font-family: Netflix Sans,Helvetica,Arial,sans-serif!important;
font-size: 13px!important;
font-weight: 400!important;
padding: 3px 8px 3px 32px!important;
text-decoration: none!important;
transition: 0.3s!important;
}
.sidenav a:hover {
color: #242527!important;
display: block!important;
font-family: Netflix Sans,Helvetica,Arial,sans-serif!important;
font-size: 13px!important;
font-weight: 400!important;
padding: 3px 8px 3px 32px!important;
text-decoration: underline!important;
transition: 0.3s!important;
}
.sidenav a img {
height: 12px;
margin-left: -0px;
margin-right: 10px;
}
.sidenav .closebtn {
color: #aaaaaa!important;
font-size: 34px!important;
margin-left: 50px!important;
position: absolute!important;
right: 23px!important;
top: 5px!important;
}
.sidenav .closebtn:hover {
color: #353748!important;
font-size: 34px!important;
margin-left: 50px!important;
position: absolute!important;
right: 23px!important;
text-decoration: none!important;
top: 5px!important;
}
<!---------------------------------------------------------------------------------------------------------------------------------------------------- Logo -->
<div class="s-header-links-left">
<div class="s-logo">
<a href="https://www.capebretoncares.com/Start/" target="_top">
<img src="https://www.capebretoncares.com/Start/images/cape-breton-cares-logo-1.png"></a>
</div>
</div>
<!-------------------------------------------------------------------------------------------------------------------------------------- Header Links Right -->
<div class="s-header-links-right">
<!------------------------------------------------------------------------------------------------------------------------------------------- Amount Raised -->
<span class="tooltip" onclick="myFunction()">
<div class="amount">$234.41</div>
<span class="tooltiptext" id="myPopup">This is how much money our community has raised to help provide meals and support to animal charities in our local communities.</span>
</span>
<!----------------------------------------------------------------------------------------------------------------------------------- Fur Baby Of The Month -->
<span class="tooltips" onclick="myFunctions()" title="Contest Winner">
<div class="furbm">
<i class="fa fa-trophy"></i>
</br>
</div>
<span class="tooltipstext" id="mypopup">Fur Baby Of The Month
</br>
<img src="https://www.capebretoncares.com/images/search-icons/duck.png">
</br>
congratulations "Fluffy"
</span>
</span>
<!--------------------------------------------------------------------------------------------------------------------------- Fur Baby Of The Month Contest -->
<span class="toolstip" onclick="myFunctionss()">
<div class="furbc">
<i class='fas fa-comments'></i>
</div>
<span class="toolstiptext" id="mYpopup">
Enter Octobers cutest Fur Baby contest and win a bag of your Fur Babies food of choice.
</br>
</br>
<form class="furbcf" method="post" action="send_contact.php" enctype="multipart/form-data">
<label for="first_name">First Name: <font color="red">*</font></label>
</br>
<input type="text" id="first_name" name="first_name" autocomplete="off" required>
</br>
</br>
<label for="last_name">Fur Babies Name: <font color="red">*</font></label>
</br>
<input type="text" id="last_name" name="last_name" autocomplete="off" required>
</br>
</br>
<label for="email">Email: <font color="red">*</font></label>
</br>
<input type="text" id="email" name="email" autocomplete="off" required>
</br>
</br>
<input type="file" name="uploaded_file"autocomplete="off" required>
</br>
</br>
<input type="submit" name="Submit" value="Submit">
</form>
</span>
</span>
<!---------------------------------------------------------------------------------------------------------------------------------------------------- Menu -->
<span style="cursor:pointer" onclick="openNav()" title="Menu">
<i class="fa fa-bars"></i>
</span>
<div id="mySidenav" class="sidenav">
×
<p>WHO WE ARE:</p>
Home
About Us
Privacy Policy
Terms of Use
<p>RESOURCES:</p>
Contact Us
FAQ
Our Donations
Spread The Word
<p>KEEP IN TOUCH:</p>
<a href="https://www.facebook.com/CapeBretonCares/" target="_top">
<img src="https://www.capebretoncares.com/images/icons/facebook.png">Facebook</a>
<a href="https://twitter.com/WeCapersCare/" target="_top">
<img src="https://www.capebretoncares.com/images/icons/twitter.png">Twitter</a>
<p>AVAILABLE ON:</p>
<a href="https://chrome.google.com/webstore/detail/cape-breton-start-page/gcjbmfbjnmkfnjgdpkamohobejbpdinb/" target="_top">
<img src="https://www.capebretoncares.com/images/available-on/brave.png">Brave</a>
<a href="https://chrome.google.com/webstore/detail/cape-breton-start-page/gcjbmfbjnmkfnjgdpkamohobejbpdinb/" target="_top">
<img src="https://www.capebretoncares.com/images/available-on/chrome.png">Google Chrome</a>
<a href="https://chrome.google.com/webstore/detail/cape-breton-start-page/gcjbmfbjnmkfnjgdpkamohobejbpdinb/" target="_top">
<img src="https://www.capebretoncares.com/images/available-on/edge.png">Microsoft Edge</a>
<a href="https://addons.mozilla.org/en-CA/firefox/addon/cape-breton-start-page/" target="_top">
<img src="https://www.capebretoncares.com/images/available-on/firefox.png">Mozilla Firefox</a>
</div>
</div>
</div>
</div>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src='https://kit.fontawesome.com/a076d05399.js'></script>

Multiple fill colors in star rating survey

I need to build a 5 star rating responses to set of survey questions. The stars need to be filled with gold color if the rating is 1 or 2 else it need to be filled with green color if the rating is more than 2 star.
I have built the 5 stars which gets filled with gold color. How can I make it dynamic to change color to green?
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
.rating {
font-size: 0;
}
.rating:after {
content: " ";
clear: both;
display: block;
}
.rating input {
display: none;
}
.rating-label {
height: 16px;
width: 16px;
color: #ccc;
font-size: 24px;
line-height: 16px;
margin-right: 4px;
text-align: center;
display: inline-block;
}
.rating[dir="rtl"] {
unicode-bidi: bidi-override;
}
.rating[dir="rtl"]>input:checked~.rating-label {
font-size: 0;
}
.rating[dir="rtl"]>input:checked~.rating-label:before {
content: "\2605";
color: #feca02;
}
.rating-label.is-active {
color: #feca02;
}
.rating-large .rating-label {
height: 24px;
width: 24px;
font-size: 32px;
margin-right: 8px;
}
.rating-large .rating-label:before {
font-size: 32px;
}
.rating-small .rating-label {
height: 12px;
width: 12px;
font-size: 16px;
margin-right: 2px;
}
.rating-small .rating-label:before {
font-size: 16px;
}
body {
padding: 30px 30px 0;
text-align: center;
}
.wrapper {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.rating {
margin: 15px auto;
}
button {
display: inline-block;
padding: 15px 55px;
background-color: #1d1f20;
color: #fff;
border: 0;
font-size: 12px;
text-transform: uppercase;
}
<div class="wrapper">
<form class="demoForm">
<div class="rating rating-large" dir="rtl">
<input type="radio" name="rate" id="5" value="5" />
<label class="rating-label" for="5">&#9734</label>
<input type="radio" name="rate" id="4" value="4" />
<label class="rating-label" for="4">&#9734</label>
<input type="radio" name="rate" id="3" value="3" />
<label class="rating-label" for="3">&#9734</label>
<input type="radio" name="rate" id="2" value="2" />
<label class="rating-label" for="2">&#9734</label>
<input type="radio" name="rate" id="1" value="1" />
<label class="rating-label" for="1">&#9734</label>
</div>
</form>
</div>

You can use the nth-child selector to change the colour dependant on the number of stars chosen.
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
.rating {
font-size: 0;
}
.rating:after {
content: " ";
clear: both;
display: block;
}
.rating input {
display: none;
}
.rating-label {
height: 16px;
width: 16px;
color: #ccc;
font-size: 24px;
line-height: 16px;
margin-right: 4px;
text-align: center;
display: inline-block;
}
.rating[dir="rtl"] {
unicode-bidi: bidi-override;
}
.rating[dir="rtl"]>input:checked~.rating-label {
font-size: 0;
}
.rating[dir="rtl"]>input:checked~.rating-label:before {
content: "\2605";
color: #feca02;
}
.rating[dir="rtl"]>input:nth-child(1):checked~.rating-label:before {
color: #feca02;
}
.rating[dir="rtl"]>input:nth-child(3):checked~.rating-label:before {
color: green;
}
.rating[dir="rtl"]>input:nth-child(5):checked~.rating-label:before {
color: pink;
}
.rating[dir="rtl"]>input:nth-child(7):checked~.rating-label:before {
color: purple;
}
.rating[dir="rtl"]>input:nth-child(9):checked~.rating-label:before {
color: red;
}
.rating-label.is-active {
color: #feca02;
}
.rating-large .rating-label {
height: 24px;
width: 24px;
font-size: 32px;
margin-right: 8px;
}
.rating-large .rating-label:before {
font-size: 32px;
}
.rating-small .rating-label {
height: 12px;
width: 12px;
font-size: 16px;
margin-right: 2px;
}
.rating-small .rating-label:before {
font-size: 16px;
}
body {
padding: 30px 30px 0;
text-align: center;
}
.wrapper {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.rating {
margin: 15px auto;
}
button {
display: inline-block;
padding: 15px 55px;
background-color: #1d1f20;
color: #fff;
border: 0;
font-size: 12px;
text-transform: uppercase;
}
<div class="wrapper">
<form class="demoForm">
<div class="rating rating-large" dir="rtl">
<input type="radio" name="rate" id="5" value="5" />
<label class="rating-label" for="5">&#9734</label>
<input type="radio" name="rate" id="4" value="4" />
<label class="rating-label" for="4">&#9734</label>
<input type="radio" name="rate" id="3" value="3" />
<label class="rating-label" for="3">&#9734</label>
<input type="radio" name="rate" id="2" value="2" />
<label class="rating-label" for="2">&#9734</label>
<input type="radio" name="rate" id="1" value="1" />
<label class="rating-label" for="1">&#9734</label>
</div>
</form>
</div>
The stars need to be filled with gold color if the rating is 1 or 2
else it need to be filled with green color if the rating is more than
2 star
For this specific case you could use the following...
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
.rating {
font-size: 0;
}
.rating:after {
content: " ";
clear: both;
display: block;
}
.rating input {
display: none;
}
.rating-label {
height: 16px;
width: 16px;
color: #ccc;
font-size: 24px;
line-height: 16px;
margin-right: 4px;
text-align: center;
display: inline-block;
}
.rating[dir="rtl"] {
unicode-bidi: bidi-override;
}
.rating[dir="rtl"]>input:checked~.rating-label {
font-size: 0;
}
.rating[dir="rtl"]>input:checked~.rating-label:before {
content: "\2605";
color: green;
}
.rating[dir="rtl"]>input:nth-child(7):checked~.rating-label:before,
.rating[dir="rtl"]>input:nth-child(9):checked~.rating-label:before{
color: #feca02;
}
.rating-label.is-active {
color: #feca02;
}
.rating-large .rating-label {
height: 24px;
width: 24px;
font-size: 32px;
margin-right: 8px;
}
.rating-large .rating-label:before {
font-size: 32px;
}
.rating-small .rating-label {
height: 12px;
width: 12px;
font-size: 16px;
margin-right: 2px;
}
.rating-small .rating-label:before {
font-size: 16px;
}
body {
padding: 30px 30px 0;
text-align: center;
}
.wrapper {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.rating {
margin: 15px auto;
}
button {
display: inline-block;
padding: 15px 55px;
background-color: #1d1f20;
color: #fff;
border: 0;
font-size: 12px;
text-transform: uppercase;
}
<div class="wrapper">
<form class="demoForm">
<div class="rating rating-large" dir="rtl">
<input type="radio" name="rate" id="5" value="5" />
<label class="rating-label" for="5">&#9734</label>
<input type="radio" name="rate" id="4" value="4" />
<label class="rating-label" for="4">&#9734</label>
<input type="radio" name="rate" id="3" value="3" />
<label class="rating-label" for="3">&#9734</label>
<input type="radio" name="rate" id="2" value="2" />
<label class="rating-label" for="2">&#9734</label>
<input type="radio" name="rate" id="1" value="1" />
<label class="rating-label" for="1">&#9734</label>
</div>
</form>
</div>

Append elements with multiple parameters from input field

The task is to add li with any of the 3 classes and custom text from the input field. Problem is that even when I clear the field value to empty string, next time you can just click 'ok' with empty input and it adds the last value. What am I missing here? And also how can I make the field go away when I click outside of it?
$('#skill').val('');
$('.skillList').on('click', 'li span', function() {
$(this)
.parent()
.remove();
});
var skillName = '';
var skillLevel = 'strong';
$('#skill').change(function() {
skillName = $(this).val();
});
$('#level').change(function() {
skillLevel = $(this).val();
});
$('.skills-add button').click(function() {
if (skillName || skillName != '') {
$('.skillList').append(
'<li class="' + skillLevel + '">' + skillName + '<span>no</span>'
);
$('#skill').val('');
$('.addSkill').show();
$('.skill_fields')
.hide()
.blur();
} else {
return false;
}
});
$('.addSkill').click(function(e) {
$(this).hide();
$('.skill_fields')
.show()
.focus();
e.preventDefault();
});
.skills-block ul.skillList {
list-style: none;
padding-left: 0;
}
.skills-block ul.skillList li {
display: inline-block;
padding: 5px 10px;
margin-right: 6px;
margin-bottom: 6px;
color: #ffffff;
text-transform: uppercase;
font-weight: 600;
border-radius: 3px;
font-size: 1em;
position: relative;
}
.skills-block ul.skillList li span {
content: "no";
position: absolute;
top: 2px;
right: 2px;
font-size: 0.8em;
background-color: red;
cursor: pointer;
display: none;
}
.skills-block ul.skillList li:hover span {
display: inline;
}
.skills-block ul.skillList li.strong {
background-color: #000000;
}
.skills-block ul.skillList li.normal {
background-color: #5c5c5c;
}
.skills-block ul.skillList li.low {
background-color: #a2a2a2;
}
.skills-add {
position: relative;
}
.skills-add .skill_fields {
display: none;
}
.skills-add .skill_fields button {
position: absolute;
right: 10px;
top: 6px;
background-color: #fff;
border: 1px solid #adadad;
border-radius: 50%;
width: 30px;
height: 30px;
padding: 0;
cursor: pointer;
}
.skills-add .skill_fields select {
position: absolute;
right: 50px;
top: 5px;
padding: 4px 10px;
background-color: #fff;
border: 1px solid #adadad;
border-radius: 3px;
color: #000000;
}
.skills-add .skill_fields input {
width: 100%;
padding: 10px 5px;
background-color: #fff;
border: 1px solid green;
color: #000000;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="skills-block">
<ul class="skillList">
<li class="strong">PHP <span>no</span> </li>
<li class="strong">Ruby <span>no</span> </li>
<li class="normal">Javascript <span>no</span> </li>
<li class="low">Actionscript <span>no</span> </li>
</ul>
</div>
<!-- /.skills-block -->
<div class="skills-add">
Add skill
<div class="skill_fields">
<input type="text" name="skill" id="skill" value="">
<select name="level" id="level">
<option value="strong">Strong</option>
<option value="normal">Normal</option>
<option value="low">Low</option>
</select>
<button>ok</button>
</div>
</div>

Just reset skillName value as skillName = ""
$('#skill').val('');
$('.skillList').on('click', 'li span', function() {
$(this)
.parent()
.remove();
});
var skillName = '';
var skillLevel = 'strong';
$('#skill').change(function() {
skillName = $(this).val();
});
$('#level').change(function() {
skillLevel = $(this).val();
});
$('.skills-add button').click(function() {
$('#skill').val("");
if (skillName || skillName != '') {
$('.skillList').append(
'<li class="' + skillLevel + '">' + skillName + '<span>no</span>'
);
$('.addSkill').show();
skillName = "";
$('.skill_fields')
.hide()
.blur();
} else {
return false;
}
});
$('.addSkill').click(function(e) {
$(this).hide();
$('.skill_fields')
.show()
.focus();
e.preventDefault();
});
.skills-block ul.skillList {
list-style: none;
padding-left: 0;
}
.skills-block ul.skillList li {
display: inline-block;
padding: 5px 10px;
margin-right: 6px;
margin-bottom: 6px;
color: #ffffff;
text-transform: uppercase;
font-weight: 600;
border-radius: 3px;
font-size: 1em;
position: relative;
}
.skills-block ul.skillList li span {
content: "no";
position: absolute;
top: 2px;
right: 2px;
font-size: 0.8em;
background-color: red;
cursor: pointer;
display: none;
}
.skills-block ul.skillList li:hover span {
display: inline;
}
.skills-block ul.skillList li.strong {
background-color: #000000;
}
.skills-block ul.skillList li.normal {
background-color: #5c5c5c;
}
.skills-block ul.skillList li.low {
background-color: #a2a2a2;
}
.skills-add {
position: relative;
}
.skills-add .skill_fields {
display: none;
}
.skills-add .skill_fields button {
position: absolute;
right: 10px;
top: 6px;
background-color: #fff;
border: 1px solid #adadad;
border-radius: 50%;
width: 30px;
height: 30px;
padding: 0;
cursor: pointer;
}
.skills-add .skill_fields select {
position: absolute;
right: 50px;
top: 5px;
padding: 4px 10px;
background-color: #fff;
border: 1px solid #adadad;
border-radius: 3px;
color: #000000;
}
.skills-add .skill_fields input {
width: 100%;
padding: 10px 5px;
background-color: #fff;
border: 1px solid green;
color: #000000;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="skills-block">
<ul class="skillList">
<li class="strong">PHP <span>no</span> </li>
<li class="strong">Ruby <span>no</span> </li>
<li class="normal">Javascript <span>no</span> </li>
<li class="low">Actionscript <span>no</span> </li>
</ul>
</div>
<!-- /.skills-block -->
<div class="skills-add">
Add skill
<div class="skill_fields">
<input type="text" name="skill" id="skill" value="">
<select name="level" id="level">
<option value="strong">Strong</option>
<option value="normal">Normal</option>
<option value="low">Low</option>
</select>
<button>ok</button>
</div>
</div>

SkillName is never reset to default value after adding the current value.
$('#skill').val('');
$('.skillList').on('click', 'li span', function() {
$(this)
.parent()
.remove();
});
var skillName = '';
var skillLevel = 'strong';
$('#skill').change(function() {
skillName = $(this).val();
});
$('#level').change(function() {
skillLevel = $(this).val();
});
$('.skills-add button').click(function() {
if (skillName || skillName != '') {
$('.skillList').append(
'<li class="' + skillLevel + '">' + skillName + '<span>no</span>'
);
$('#skill').val('');
skillName="";
$('.addSkill').show();
$('.skill_fields')
.hide()
.blur();
} else {
return false;
}
});
$('.addSkill').click(function(e) {
$(this).hide();
$('.skill_fields')
.show()
.focus();
e.preventDefault();
});
.skills-block ul.skillList {
list-style: none;
padding-left: 0;
}
.skills-block ul.skillList li {
display: inline-block;
padding: 5px 10px;
margin-right: 6px;
margin-bottom: 6px;
color: #ffffff;
text-transform: uppercase;
font-weight: 600;
border-radius: 3px;
font-size: 1em;
position: relative;
}
.skills-block ul.skillList li span {
content: "no";
position: absolute;
top: 2px;
right: 2px;
font-size: 0.8em;
background-color: red;
cursor: pointer;
display: none;
}
.skills-block ul.skillList li:hover span {
display: inline;
}
.skills-block ul.skillList li.strong {
background-color: #000000;
}
.skills-block ul.skillList li.normal {
background-color: #5c5c5c;
}
.skills-block ul.skillList li.low {
background-color: #a2a2a2;
}
.skills-add {
position: relative;
}
.skills-add .skill_fields {
display: none;
}
.skills-add .skill_fields button {
position: absolute;
right: 10px;
top: 6px;
background-color: #fff;
border: 1px solid #adadad;
border-radius: 50%;
width: 30px;
height: 30px;
padding: 0;
cursor: pointer;
}
.skills-add .skill_fields select {
position: absolute;
right: 50px;
top: 5px;
padding: 4px 10px;
background-color: #fff;
border: 1px solid #adadad;
border-radius: 3px;
color: #000000;
}
.skills-add .skill_fields input {
width: 100%;
padding: 10px 5px;
background-color: #fff;
border: 1px solid green;
color: #000000;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="skills-block">
<ul class="skillList">
<li class="strong">PHP <span>no</span> </li>
<li class="strong">Ruby <span>no</span> </li>
<li class="normal">Javascript <span>no</span> </li>
<li class="low">Actionscript <span>no</span> </li>
</ul>
</div>
<!-- /.skills-block -->
<div class="skills-add">
Add skill
<div class="skill_fields">
<input type="text" name="skill" id="skill" value="">
<select name="level" id="level">
<option value="strong">Strong</option>
<option value="normal">Normal</option>
<option value="low">Low</option>
</select>
<button>ok</button>
</div>
</div>

You forgot to Reset skillName variable value.
$('#skill').val('');
$('.skillList').on('click', 'li span', function() {
$(this)
.parent()
.remove();
});
var skillName = '';
var skillLevel = 'strong';
$('#skill').change(function() {
skillName = $(this).val();
});
$('#level').change(function() {
skillLevel = $(this).val();
});
$('.skills-add button').click(function() {
if (skillName || skillName != '') {
$('.skillList').append(
'<li class="' + skillLevel + '">' + skillName + '<span>no</span>'
);
$('#skill').val('');
skillName = ""; // Reset it after adding;
$('.addSkill').show();
$('.skill_fields')
.hide()
.blur();
} else {
return false;
}
});
$('.addSkill').click(function(e) {
$(this).hide();
$('.skill_fields')
.show()
.focus();
e.preventDefault();
});
.skills-block ul.skillList {
list-style: none;
padding-left: 0;
}
.skills-block ul.skillList li {
display: inline-block;
padding: 5px 10px;
margin-right: 6px;
margin-bottom: 6px;
color: #ffffff;
text-transform: uppercase;
font-weight: 600;
border-radius: 3px;
font-size: 1em;
position: relative;
}
.skills-block ul.skillList li span {
content: "no";
position: absolute;
top: 2px;
right: 2px;
font-size: 0.8em;
background-color: red;
cursor: pointer;
display: none;
}
.skills-block ul.skillList li:hover span {
display: inline;
}
.skills-block ul.skillList li.strong {
background-color: #000000;
}
.skills-block ul.skillList li.normal {
background-color: #5c5c5c;
}
.skills-block ul.skillList li.low {
background-color: #a2a2a2;
}
.skills-add {
position: relative;
}
.skills-add .skill_fields {
display: none;
}
.skills-add .skill_fields button {
position: absolute;
right: 10px;
top: 6px;
background-color: #fff;
border: 1px solid #adadad;
border-radius: 50%;
width: 30px;
height: 30px;
padding: 0;
cursor: pointer;
}
.skills-add .skill_fields select {
position: absolute;
right: 50px;
top: 5px;
padding: 4px 10px;
background-color: #fff;
border: 1px solid #adadad;
border-radius: 3px;
color: #000000;
}
.skills-add .skill_fields input {
width: 100%;
padding: 10px 5px;
background-color: #fff;
border: 1px solid green;
color: #000000;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="skills-block">
<ul class="skillList">
<li class="strong">PHP <span>no</span> </li>
<li class="strong">Ruby <span>no</span> </li>
<li class="normal">Javascript <span>no</span> </li>
<li class="low">Actionscript <span>no</span> </li>
</ul>
</div>
<!-- /.skills-block -->
<div class="skills-add">
Add skill
<div class="skill_fields">
<input type="text" name="skill" id="skill" value="">
<select name="level" id="level">
<option value="strong">Strong</option>
<option value="normal">Normal</option>
<option value="low">Low</option>
</select>
<button>ok</button>
</div>
</div>

Then change event on input field doesn't detect all the actions, use the input event instead, it is more efficient when tracking the user input's :
$('#skill').on('input', function() {
skillName = $(this).val();
});
$('#level').on('input', function() {
skillLevel = $(this).val();
});
$('#skill').val('');
$('.skillList').on('click', 'li span', function() {
$(this)
.parent()
.remove();
});
var skillName = '';
var skillLevel = 'strong';
$('#skill').on('input', function() {
skillName = $(this).val();
});
$('#level').on('input', function() {
skillLevel = $(this).val();
});
$('.skills-add button').click(function() {
if (skillName || skillName != '') {
$('.skillList').append(
'<li class="' + skillLevel + '">' + skillName + '<span>no</span>'
);
$('#skill').val('');
$('.addSkill').show();
$('.skill_fields')
.hide()
.blur();
} else {
return false;
}
});
$('.addSkill').click(function(e) {
$(this).hide();
$('.skill_fields')
.show()
.focus();
e.preventDefault();
});
.skills-block ul.skillList {
list-style: none;
padding-left: 0;
}
.skills-block ul.skillList li {
display: inline-block;
padding: 5px 10px;
margin-right: 6px;
margin-bottom: 6px;
color: #ffffff;
text-transform: uppercase;
font-weight: 600;
border-radius: 3px;
font-size: 1em;
position: relative;
}
.skills-block ul.skillList li span {
content: "no";
position: absolute;
top: 2px;
right: 2px;
font-size: 0.8em;
background-color: red;
cursor: pointer;
display: none;
}
.skills-block ul.skillList li:hover span {
display: inline;
}
.skills-block ul.skillList li.strong {
background-color: #000000;
}
.skills-block ul.skillList li.normal {
background-color: #5c5c5c;
}
.skills-block ul.skillList li.low {
background-color: #a2a2a2;
}
.skills-add {
position: relative;
}
.skills-add .skill_fields {
display: none;
}
.skills-add .skill_fields button {
position: absolute;
right: 10px;
top: 6px;
background-color: #fff;
border: 1px solid #adadad;
border-radius: 50%;
width: 30px;
height: 30px;
padding: 0;
cursor: pointer;
}
.skills-add .skill_fields select {
position: absolute;
right: 50px;
top: 5px;
padding: 4px 10px;
background-color: #fff;
border: 1px solid #adadad;
border-radius: 3px;
color: #000000;
}
.skills-add .skill_fields input {
width: 100%;
padding: 10px 5px;
background-color: #fff;
border: 1px solid green;
color: #000000;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="skills-block">
<ul class="skillList">
<li class="strong">PHP <span>no</span> </li>
<li class="strong">Ruby <span>no</span> </li>
<li class="normal">Javascript <span>no</span> </li>
<li class="low">Actionscript <span>no</span> </li>
</ul>
</div>
<!-- /.skills-block -->
<div class="skills-add">
Add skill
<div class="skill_fields">
<input type="text" name="skill" id="skill" value="">
<select name="level" id="level">
<option value="strong">Strong</option>
<option value="normal">Normal</option>
<option value="low">Low</option>
</select>
<button>ok</button>
</div>
</div>

You use global variable skill_name and never update or reset it after add, so your add button code should be:
$('.skills-add button').click(function() {
if (skillName || skillName != '') {
$('.skillList').append(
'<li class="' + skillLevel + '">' + skillName + '<span>no</span>'
);
$('#skill').val('');
$('.addSkill').show();
skillName ='';
$('.skill_fields')
.hide()
.blur();
} else {
return false;
}
});

Categories