Develop Reference

Collect prices with jQuery

I need to be able to add and display the amount when the numbers are entered using jQuery, as shown in the image below.
please guide me.
These are the html codes:
.tours_description_book {
border: 1px solid #d2ac67;
overflow: hidden;
border-radius: 9px;
}
.tours_description_book .title {
background: #0c1e3a;
text-align: center;
color: #fff;
font-size: 20px;
font-weight: 600;
padding: 15px 0;
margin-bottom: 15px;
}
.tours_description_book > ul {
display: grid;
grid: auto / auto;
padding: 15px 35px;
}
.tours_description_book > ul > li > ul {
display: grid;
grid: auto / 50% 50%;
padding-left: 20px;
}
.tours_description_book > ul > li {
border-bottom: 1px solid #dcdddf;
font-weight: 600;
font-size: 16px;
padding: 15px 0;
color: #0c1e3a;
}
.tours_description_book > ul > li > ul > li:last-of-type {
text-align: center;
}
.tours_description_book > ul > li:first-of-type > ul > li:last-of-type {
text-align: left;
}
.tours_description_book > ul > li:first-of-type {
font-weight: 400;
}
.tours_description_book > ul > li:last-of-type {
border: 0;
}
.tours_description .tours_description_book a {
display: block;
width: calc(100% - 60px);
margin: 0 auto 50px;
background: #0c1e3a;
text-align: center;
color: #fff;
border-radius: 9px;
font-weight: 600;
line-height: 60px;
}
.tours_description .tours_description_book a:hover {
background: #d2ac67;
}
input[type="number"] {
-webkit-appearance: textfield;
-moz-appearance: textfield;
appearance: textfield;
}
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
-webkit-appearance: none;
}
.number-input {
border: 1px solid #d2ac67;
display: inline-flex;
border-radius: 5px;
}
.number-input,
.number-input * {
box-sizing: border-box;
}
.number-input button {
outline:none;
-webkit-appearance: none;
background-color: transparent;
border: none;
align-items: center;
justify-content: center;
width: 3rem;
height: 3rem;
cursor: pointer;
margin: 0;
position: relative;
}
.number-input button:before {
display: inline-block;
content: '-';
color: #d2ac67;
font-size: 18px;
}
.number-input button.plus:before {
content: '+';
}
.number-input input[type=number] {
max-width: 4rem;
padding: .5rem;
border: solid #d2ac67;
border-width: 0 1px;
font-size: 16px;
height: 3rem;
font-weight: 600;
text-align: center;
}
<div class="tours_description_book wrapper">
<div class="title wrapper">- Booking -</div>
<ul>
<li>
<ul>
<li>Adults
<div class="number-input cart-free">
<button onclick="this.parentNode.querySelector('.Adults_N').stepDown()" ></button>
<input class="quantity Adults_N" min="0" name="Adults" value="1" type="number">
<button onclick="this.parentNode.querySelector('.Adults_N').stepUp()" class="plus"></button>
</div>
</li>
<li>Children
<div class="number-input cart-free">
<button onclick="this.parentNode.querySelector('.Children_N').stepDown()" ></button>
<input class="quantity Children_N" min="0" name="Children" value="0" type="number">
<button onclick="this.parentNode.querySelector('.Children_N').stepUp()" class="plus"></button>
</div>
</li>
</ul>
</li>
<li>
<ul>
<li>Adults</li>
<li class="cart-free amount">0</li>
</ul>
</li>
<li>
<ul>
<li>Children</li>
<li class="cart-free amount">0</li>
</ul>
</li>
<li>
<ul>
<li>TOTAl COST</li>
<li class="total">0$</li>
</ul>
</li>
</ul>
‌BOOK NOW
</div>
The details I think are clear in the picture. But this is how we enter the number of adults and children, and finally with jQuery we have to add the prices and show the final price.
These are html and css code. Unfortunately I do not have much control over jQuery to close the project.

I removed the inline onclick events from your buttons and added them back in as a programatic event listener. That way we can tie into these events to populate the prices. Rather than explain line by line, take a look and ask any questions you might have about how this works.
let adultPrice = 19.99, childPrice = 11.99;
window.addEventListener('DOMContentLoaded', () => {
let buttons = document.querySelectorAll('.step-button');
buttons.forEach(el => {
el.addEventListener('click', e => {
let inc = -1;
if (e.target.classList.contains('plus')) inc = 1;
let input = e.target.closest('div').querySelector('input');
input.value = Math.max((+input.value + inc), 0);
calcAmounts()
})
})
calcAmounts()
})
function calcAmounts() {
document.querySelector('.adult-subtotal').innerHTML = '$' + (+document.querySelector('.Adults_N').value * adultPrice).toFixed(2);
document.querySelector('.child-subtotal').innerHTML = '$' + (+document.querySelector('.Children_N').value * childPrice).toFixed(2);
document.querySelector('.total').innerHTML = '$' + (+document.querySelector('.adult-subtotal').innerHTML.replace(/[^\d.-]/g, '') + +document.querySelector('.child-subtotal').innerHTML.replace(/[^\d.-]/g, '')).toFixed(2);
}
.tours_description_book {
border: 1px solid #d2ac67;
overflow: hidden;
border-radius: 9px;
}
.tours_description_book .title {
background: #0c1e3a;
text-align: center;
color: #fff;
font-size: 20px;
font-weight: 600;
padding: 15px 0;
margin-bottom: 15px;
}
.tours_description_book>ul {
display: grid;
grid: auto / auto;
padding: 15px 35px;
}
.tours_description_book>ul>li>ul {
display: grid;
grid: auto / 50% 50%;
padding-left: 20px;
}
.tours_description_book>ul>li {
border-bottom: 1px solid #dcdddf;
font-weight: 600;
font-size: 16px;
padding: 15px 0;
color: #0c1e3a;
}
.tours_description_book>ul>li>ul>li:last-of-type {
text-align: center;
}
.tours_description_book>ul>li:first-of-type>ul>li:last-of-type {
text-align: left;
}
.tours_description_book>ul>li:first-of-type {
font-weight: 400;
}
.tours_description_book>ul>li:last-of-type {
border: 0;
}
.tours_description .tours_description_book a {
display: block;
width: calc(100% - 60px);
margin: 0 auto 50px;
background: #0c1e3a;
text-align: center;
color: #fff;
border-radius: 9px;
font-weight: 600;
line-height: 60px;
}
.tours_description .tours_description_book a:hover {
background: #d2ac67;
}
input[type="number"] {
-webkit-appearance: textfield;
-moz-appearance: textfield;
appearance: textfield;
}
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
-webkit-appearance: none;
}
.number-input {
border: 1px solid #d2ac67;
display: inline-flex;
border-radius: 5px;
}
.number-input,
.number-input * {
box-sizing: border-box;
}
.number-input button {
outline: none;
-webkit-appearance: none;
background-color: transparent;
border: none;
align-items: center;
justify-content: center;
width: 3rem;
height: 3rem;
cursor: pointer;
margin: 0;
position: relative;
}
.number-input button:before {
display: inline-block;
content: '-';
color: #d2ac67;
font-size: 18px;
}
.number-input button.plus:before {
content: '+';
}
.number-input input[type=number] {
max-width: 4rem;
padding: .5rem;
border: solid #d2ac67;
border-width: 0 1px;
font-size: 16px;
height: 3rem;
font-weight: 600;
text-align: center;
}
<div class="tours_description_book wrapper">
<div class="title wrapper">- Booking -</div>
<ul>
<li>
<ul>
<li>Adults
<div class="number-input cart-free">
<button class="step-button"></button>
<input class="quantity Adults_N" min="0" name="Adults" value="1" type="number">
<button class="step-button plus"></button>
</div>
</li>
<li>Children
<div class="number-input cart-free">
<button class="step-button"></button>
<input class="quantity Children_N" min="0" name="Children" value="0" type="number">
<button class="step-button plus"></button>
</div>
</li>
</ul>
</li>
<li>
<ul>
<li>Adults</li>
<li class="cart-free adult-subtotal amount">0</li>
</ul>
</li>
<li>
<ul>
<li>Children</li>
<li class="cart-free child-subtotal amount">0</li>
</ul>
</li>
<li>
<ul>
<li>TOTAl COST</li>
<li class="total">0$</li>
</ul>
</li>
</ul>
‌BOOK NOW
</div>

You must use id's instead of a class where you want to make your element to be accessible uniquely ! .... Also instead of inline js use functions it will make your code much cleaner ...
Since you didn't had any js so i wrote it accordingly..
See =>
HTML
<div class="title wrapper">
- Booking -
</div>
<ul>
<li>
<ul>
<li>Adults
<div class="number-input cart-free">
<button onclick="dec(this)" class="minus"></button>
<input class="quantity Adults_N" min="0" name="Adults" id="Adults" value="1" type="number">
<button onclick="inc(this)" class="plus"></button>
</div>
</li>
<li>Children
<div class="number-input cart-free">
<button onclick="dec(this)" class="minus"></button>
<input class="quantity Children_N" min="0" name="Children" id="Children" value="0" type="number">
<button onclick="inc(this)" class="plus"></button>
</div>
</li>
</ul>
</li>
<li>
<ul>
<li>Adults</li>
<li class="cart-free amount" id="Adult_display">0</li>
</ul>
</li>
<li>
<ul>
<li>Children</li>
<li class="cart-free amount" id="Child_display">0</li>
</ul>
</li>
<li>
<ul>
<li>TOTAl COST</li>
<li class="total"><span id="total">0</span>$</li>
</ul>
</li>
</ul>
‌BOOK NOW
JS
const adult_price = 100;
const child_price = 20;
const total = document.querySelector('#total')
const adult_count = document.querySelector("#Adults");
const child_count = document.querySelector("#Children");
const child_display = document.querySelector("#Child_display");
const adult_display = document.querySelector("#Adult_display");
adult_display.innerText = adult_count.value;
child_display.innerText = child_count.value;
// Handling inc or dec
function inc(element) {
element = element.parentElement.querySelector("input");
element.stepUp()
count_change(element)
}
function dec(element) {
element = element.parentElement.querySelector("input")
element.stepDown();
count_change(element)
}
// Adding listneres for change in values
adult_count.addEventListener("change", function (element) {
element = element.target;
count_change(element);
});
child_count.addEventListener('change', function (element) {
element = element.target;
count_change(element);
});
// Upadte UI and calculate final price
function count_change(ele) {
if (ele === adult_count) {
adult_display.innerText = adult_count.value
} else if (ele === child_count) {
child_display.innerText = child_count.value
}
calculate_price()
}
function calculate_price() {
let total_price = parseInt(total.innerText)
if (parseInt(adult_count.value) !== 0 && adult_count.value !== "") {
total_price = parseInt(adult_count.value) * adult_price + parseInt(child_count.value) * child_price;
adult_display.innerText = parseInt(adult_count.value) * adult_price + "$";
}
if (parseInt(child_count.value) !== 0 && child_count.value !== "") {
total_price = parseInt(adult_count.value) * adult_price + parseInt(child_count.value) * child_price;
child_display.innerText = parseInt(child_count.value) * child_price + "$";
}
total.innerText = total_price;
}
calculate_price()

Add active class to matching label of a checkbox

I am trying to add an active class on to the matching label of a checkbox input that is outside of the parent ul.
I have some labels set up that are acting as buttons that have a for="" value that matches the ID of the checkbox, so when they're clicked they check the matching input, this is fine but what I would like to do is have a script that when the checkbox is checked or has an active class on it to add an active class to it's matching label in the .labelBtns section.
So far I've wrote some jQuery that console logs the id for the checkbox and the for for the matching label but I am struggling to connect the logic together to achieve what I want, so any help would be awesome.
$('.m-label-inline').filter('.selected').each(function(i) {
var idValue = $(this).find('input').attr('id');
console.log(idValue);
$('.sizeLabel').each(function() {
var idValue2 = $(this).attr('for');
console.log(idValue2);
});
});
html {
box-sizing: border-box;
font-size: 62.5%;
-webkit-overflow-scrolling: touch;
}
*,
*:before,
*:after {
box-sizing: inherit;
}
body {
font-family: 'Montserrat', sans-serif;
font-size: 1.6rem;
margin: 0 auto;
max-width: 50rem;
}
ul {
list-style: none;
margin: 0;
padding: 0;
}
.m-refinement {
display: flex;
flex-wrap: wrap;
}
.m-label-inline {
background: #f8f8f8;
border: 0.1rem solid #ddd;
flex-basis: calc(50% - 1rem);
margin-right: 2rem;
margin-top: 2rem;
max-width: calc(50% - 1rem);
padding: 1rem;
}
.m-label-inline:nth-child(even) {
margin-right: 0;
}
.labelBtns {
display: flex;
flex-wrap: wrap;
margin-bottom: -12em;
margin-left: -2rem;
margin-top: 2rem;
}
.sizeLabel {
color: #111;
cursor: pointer;
flex-basis: 50%;
max-width: 50%;
padding-bottom: 2rem;
padding-left: 2rem;
user-select: none;
}
.labelText {
background: white;
border: 0.2rem solid #222;
color: #111;
display: inline-block;
padding: 1rem 0.6rem;
text-align: center;
width: 100%;
}
.selected {
background: tomato !important;
}
.selectedLabel .labelText {
background: tomato;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="m-refinement">
<li class="selected swatch-xs m-label-inline">
<input class="js-refinement-link input-checkbox" type="checkbox" id="XS" name="XS" data-name="size" checked="checked" data-value="XS" title="Refine by Size: XS">
<label for="XS">XS</label>
</li>
<li class=" swatch-s} m-label-inline">
<input class="js-refinement-link input-checkbox" type="checkbox" id="S" name="S" data-value="S" title="Currently Refined by Size: S">
<label for="S">S</label>
</li>
<li class="swatch-m} m-label-inline">
<input class="js-refinement-link input-checkbox" type="checkbox" id="M" name="M" data-value="M" title="Currently Refined by Size: M">
<label for="M">M</label>
</li>
<li class="swatch-l} m-label-inline">
<input class="js-refinement-link input-checkbox" type="checkbox" id="L" name="L" data-value="L" title="Currently Refined by Size: L">
<label for="L">L</label>
</li>
<li class="swatch-xl m-label-inline">
<input class="js-refinement-link input-checkbox" type="checkbox" id="XL" name="XL" data-name="size" data-value="XL" title="Refine by Size: XL">
<label for="XL">XL</label>
</li>
<li class="swatch-2xl m-label-inline">
<input class="js-refinement-link input-checkbox" type="checkbox" id="2XL" name="2XL" data-name="size" data-value="2XL" title="Refine by Size: 2XL">
<label for="2XL">2XL</label>
</li>
</ul>
<section class="labelBtns">
<label class="sizeLabel" for="XS">
<span class="labelText">Size: XS</span>
</label>
<label class="sizeLabel" for="S">
<span class="labelText">Size: S</span>
</label>
<label class="sizeLabel" for="M">
<span class="labelText">Size: M</span>
</label>
<label class="sizeLabel" for="L">
<span class="labelText">Size: L</span>
</label>
<label class="sizeLabel" for="XL">
<span class="labelText">Size: XL</span>
</label>
<label class="sizeLabel" for="2XL">
<span class="labelText ">Size: 2XL</span>
</label>
</section>

To achieve this you simply need to hook to the change event of the checkboxes and then set the class on the closest() li, depending on whether the box is checked or not. You can also use the id of the checkbox to find the related label by its for attribute:
Try this:
$(':checkbox').on('change', function() {
$(this).closest('li').add('label[for="' + this.id + '"] span').toggleClass('selected', this.checked);
}).trigger('change');
Note that the trigger('change') makes the logic run when the page loads to automatically assign the class without you needing to manually put it in to the HTML.
$(':checkbox').on('change', function() {
$(this).closest('li').add('label[for="' + this.id + '"] span').toggleClass('selected', this.checked);
}).trigger('change');
html {
box-sizing: border-box;
font-size: 62.5%;
-webkit-overflow-scrolling: touch;
}
*,
*:before,
*:after {
box-sizing: inherit;
}
body {
font-family: 'Montserrat', sans-serif;
font-size: 1.6rem;
margin: 0 auto;
max-width: 50rem;
}
ul {
list-style: none;
margin: 0;
padding: 0;
}
.m-refinement {
display: flex;
flex-wrap: wrap;
}
.m-label-inline {
background: #f8f8f8;
border: 0.1rem solid #ddd;
flex-basis: calc(50% - 1rem);
margin-right: 2rem;
margin-top: 2rem;
max-width: calc(50% - 1rem);
padding: 1rem;
}
.m-label-inline:nth-child(even) {
margin-right: 0;
}
.labelBtns {
display: flex;
flex-wrap: wrap;
margin-bottom: -12em;
margin-left: -2rem;
margin-top: 2rem;
}
.sizeLabel {
color: #111;
cursor: pointer;
flex-basis: 50%;
max-width: 50%;
padding-bottom: 2rem;
padding-left: 2rem;
user-select: none;
}
.labelText {
background: white;
border: 0.2rem solid #222;
color: #111;
display: inline-block;
padding: 1rem 0.6rem;
text-align: center;
width: 100%;
}
.selected {
background: tomato !important;
}
.selectedLabel .labelText {
background: tomato;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="m-refinement">
<li class="swatch-xs m-label-inline">
<input class="js-refinement-link input-checkbox" type="checkbox" id="XS" name="XS" data-name="size" checked="checked" data-value="XS">
<label for="XS">XS</label>
</li>
<li class=" swatch-s} m-label-inline">
<input class="js-refinement-link input-checkbox" type="checkbox" id="S" name="S" data-value="S">
<label for="S">S</label>
</li>
<li class="swatch-m} m-label-inline">
<input class="js-refinement-link input-checkbox" type="checkbox" id="M" name="M" data-value="M">
<label for="M">M</label>
</li>
</ul>
<section class="labelBtns">
<label class="sizeLabel" for="XS">
<span class="labelText">Size: XS</span>
</label>
<label class="sizeLabel" for="S">
<span class="labelText">Size: S</span>
</label>
<label class="sizeLabel" for="M">
<span class="labelText">Size: M</span>
</label>
</section>

Cannot access script by ID on HTML form

I want to programmatically access the script which is written in <script>..</script> but the using the id assigned to the script is not working.
I think the problem in my html form.
Please help me; I want to access from date, to date, & reminder date, the all operation depends on the from date.
Here is my code:
#import url(http://fonts.googleapis.com/css?family=Lato:300,400,700);
body {
background-color: #e6e6e6;
font-size: 100%;
font-family: 'Lato', sans-serif;
font-weight: 400;
}
div,
textarea,
input {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.container {
max-width: 510px;
min-width: 324px;
margin: 50px auto 0px;
background-color: #fff;
border: 1px solid #cfcfcf;
border-bottom: 3px solid #ccc;
}
.row {
width: 100%;
margin: 0 0 1em 0;
padding: 0 2.5em;
}
.row.header {
padding: 1.5em 2.5em;
border-bottom: 1px solid #ccc;
background: url(http://niiiick.com/files/blur-city-1.jpg) left -80px;
color: #fff;
}
.row.body {
padding: .5em 2.5em 1em;
}
.pull-right {
float: right;
}
h1 {
font-family: 'Lato', sans-serif;
font-weight: 300;
display: inline-block;
font-weight: 100;
font-size: 2.8125em;
border-bottom: 1px solid rgba(255, 255, 255, 0.3);
margin: 0 0 0.1em 0;
padding: 0 0 0.4em 0;
}
h3 {
font-family: 'Lato', sans-serif;
font-weight: 400;
font-size: 1.25em;
margin: 1em 0 0.4em 0;
}
.btn {
font-size: 1.0625em;
display: inline-block;
padding: 0.74em 1.5em;
margin: 1.5em 0 0;
color: #fff;
border-width: 0 0 0 0;
border-bottom: 5px solid;
text-transform: uppercase;
background-color: #b3b3b3;
border-bottom-color: #8c8c8c;
font-family: 'Lato', sans-serif;
font-weight: 300;
}
.btn:hover {
background-color: #bfbfbf;
}
.btn.btn-submit {
background-color: #4f6fad;
border-bottom-color: #374d78;
}
.btn.btn-submit:hover {
background-color: #5f7db6;
}
form {
max-width: 100%;
display: block;
}
form ul {
margin: 0;
padding: 0;
list-style: none;
}
form ul li {
margin: 0 0 0.25em 0;
clear: both;
display: inline-block;
width: 100%;
}
form ul li:last-child {
margin: 0;
}
form ul li p {
margin: 0;
padding: 0;
float: left;
}
form ul li p.right {
float: right;
}
form ul li .divider {
margin: 0.5em 0 0.5em 0;
border: 0;
height: 1px;
width: 100%;
display: block;
background-color: #4f6fad;
background-image: linear-gradient(to right, #ee9cb4, #4f6fad);
}
form ul li .req {
color: #ee9cb4;
}
form label {
display: block;
margin: 0 0 0.5em 0;
color: #4f6fad;
font-size: 1em;
}
form input {
margin: 0 0 0.5em 0;
border: 1px solid #ccc;
padding: 6px 10px;
color: #555;
font-size: 1em;
}
form textarea {
border: 1px solid #ccc;
padding: 6px 10px;
width: 100%;
color: #555;
}
form small {
color: #4f6fad;
margin: 0 0 0 0.5em;
}
#media only screen and (max-width: 480px) {
.pull-right {
float: none;
}
input {
width: 100%;
}
label {
width: 100%;
display: inline-block;
float: left;
clear: both;
}
li,
p {
width: 100%;
}
input.btn {
margin: 1.5em 0 0.5em;
}
h1 {
font-size: 2.25em;
}
h3 {
font-size: 1.125em;
}
li small {
display: none;
}
}
/*! normalize.css v4.0.0 | MIT License | github.com/necolas/normalize.css */
html {
font-family: sans-serif;
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%
}
body {
margin: 0
}
article,
aside,
details,
figcaption,
figure,
footer,
header,
main,
menu,
nav,
section,
summary {
display: block
}
audio,
canvas,
progress,
video {
display: inline-block
}
audio:not([controls]) {
display: none;
height: 0
}
progress {
vertical-align: baseline
}
template,
[hidden] {
display: none
}
a {
background-color: transparent
}
a:active,
a:hover {
outline-width: 0
}
abbr[title] {
border-bottom: none;
text-decoration: underline;
text-decoration: underline dotted
}
b,
strong {
font-weight: inherit
}
b,
strong {
font-weight: bolder
}
dfn {
font-style: italic
}
h1 {
font-size: 2em;
margin: 0.67em 0
}
mark {
background-color: #ff0;
color: #000
}
small {
font-size: 80%
}
sub,
sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline
}
sub {
bottom: -0.25em
}
sup {
top: -0.5em
}
img {
border-style: none
}
svg:not(:root) {
overflow: hidden
}
code,
kbd,
pre,
samp {
font-family: monospace, monospace;
font-size: 1em
}
figure {
margin: 1em 40px
}
hr {
box-sizing: content-box;
height: 0;
overflow: visible
}
button,
input,
select,
textarea {
font: inherit;
margin: 0
}
optgroup {
font-weight: bold
}
button,
input,
select {
overflow: visible
}
button,
select {
text-transform: none
}
button,
[type="button"],
[type="reset"],
[type="submit"] {
cursor: pointer
}
[disabled] {
cursor: default
}
button,
html [type="button"],
[type="reset"],
[type="submit"] {
-webkit-appearance: button
}
button::-moz-focus-inner,
input::-moz-focus-inner {
border: 0;
padding: 0
}
button:-moz-focusring,
input:-moz-focusring {
outline: 1px dotted ButtonText
}
fieldset {
border: 1px solid #c0c0c0;
margin: 0 2px;
padding: 0.35em 0.625em 0.75em
}
legend {
box-sizing: border-box;
color: inherit;
display: table;
max-width: 100%;
padding: 0;
white-space: normal
}
textarea {
overflow: auto
}
[type="checkbox"],
[type="radio"] {
box-sizing: border-box;
padding: 0
}
[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
height: auto
}
[type="search"] {
-webkit-appearance: textfield
}
[type="search"]::-webkit-search-cancel-button,
[type="search"]::-webkit-search-decoration {
-webkit-appearance: none
}
<!DOCTYPE html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>Clean Contact Form</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="css/normalizeindex.css">
<link rel="stylesheet" href="css/styleindex.css">
</head>
<body>
<div class="container">
<div class="row header">
<center>
<h1>WELCOME </h1>
</center>
</div>
<div class="row body">
<form method="post">
<ul>
<li>
<p class="left">
<label for="member_id">MEMBERS No.:</label>
<input type="text" name="" />
</p>
<p class="pull-right">
<label for="mem_date">MEMBERSHIP DATE:</label>
<input type="date" name="" />
</p>
</li>
<li>
<div class="divider"></div>
</li>
<li>
<p class="left">
<label for="from">FROM:</label>
<input type="date" id="oldDate">
</p>
<p class="pull-right">
<label for="to">TO:</label>
<input type="date" id="new">
</p>
<p class="left">
<label for="name">REMINDER DATE:</label>
<input type="date" id="reminde">
</p>
</li>
<script>
// <---Next Renewal Date--->
$('#oldDate').on('change', function(e) {
var oldDate = new Date(this.value);
$('#old').html(new Date(oldDate));
oldDate.setFullYear(oldDate.getFullYear() + 1);
oldDate.setDate(oldDate.getDate());
var day = ("0" + oldDate.getDate()).slice(-2);
var month = ("0" + (oldDate.getMonth() + 1)).slice(-2);
var today = oldDate.getFullYear() + "-" + (month) + "-" + (day);
$('#new').val(today);
// <---End Renwal Date--->
// <---Start Reminder date--->
$('#old').html(new Date(oldDate));
oldDate.setFullYear(oldDate.getFullYear());
oldDate.setDate(oldDate.getDate() - 15);
var day = ("0" + oldDate.getDate()).slice(-2);
var month = ("0" + (oldDate.getMonth() + 1)).slice(-2);
var today = oldDate.getFullYear() + "-" + (month) + "-" + (day);
$('#reminde').val(today);
// <---End Reminder Date--->
});
</script>
<li>
<div class="divider"></div>
</li>
<li>
<p class="left">
<label for="name">MEMBER NAME:</label>
<input type="text" name="" placeholder="Enter the name.." />
</p>
<p class="pull-right">
<label for="mob_no">MOBILE NO.:</label>
<input type="number" name="" />
</p>
<br>
<p class="left">
<br>
<label for="mem_name">FAMILY MEMBER NAME:</label>
<input type="text" name="" />
</p>
<p class="pull-right">
<br>
<label for="mem_no">FAMILY MEMBER NO.:</label>
<input type="number" name="" />
</p>
</li>
<li>
<div class="divider"></div>
</li>
<li>
<center>
<input class="btn btn-submit" type="submit" value="Submit" />
</center>
</li>
</ul>
</form>
</div>
</div>
</body>
</html>

This is your formatted code. And there is one more error is there in your code. You have not loaded Jquery, but you are accessing the jquery method when it is loaded. There for, please load Jquery. Below is the syntax.
http://www.w3schools.com/jquery/jquery_get_started.asp
Your formatted code.
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>Clean Contact Form</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="css/normalizeindex.css">
<link rel="stylesheet" href="css/styleindex.css">
</head>
<body>
<div class="container">
<div class="row header">
<center>
<h1>WELCOME </h1>
</center>
</div>
<div class="row body">
<form method="post">
<ul>
<li>
<p class="left">
<label for="member_id">MEMBERS No.:</label>
<input type="text" name="" />
</p>
<p class="pull-right">
<label for="mem_date">MEMBERSHIP DATE:</label>
<input type="date" name="" />
</p>
</li>
<li>
<div class="divider"></div>
</li>
<li>
<p class="left">
<label for="from">FROM:</label>
<input type="date" id="oldDate">
</p>
<p class="pull-right">
<label for="to">TO:</label>
<input type="date" id="new">
</p>
<p class="left">
<label for="name">REMINDER DATE:</label>
<input type="date" id="reminde">
</p>
</li>
<li>
<div class="divider"></div>
</li>
<li>
<p class="left">
<label for="name">MEMBER NAME:</label>
<input type="text" name="" placeholder="Enter the name.." />
</p>
<p class="pull-right">
<label for="mob_no">MOBILE NO.:</label>
<input type="number" name="" />
</p>
<br>
<p class="left">
<br>
<label for="mem_name">FAMILY MEMBER NAME:</label>
<input type="text" name="" />
</p>
<p class="pull-right">
<br>
<label for="mem_no">FAMILY MEMBER NO.:</label>
<input type="number" name="" />
</p>
</li>
<li>
<div class="divider"></div>
</li>
<li>
<center>
<input class="btn btn-submit" type="submit" value="Submit" />
</center>
</li>
</ul>
</form>
</div>
</div>
<script>
$(document).ready(function(){
// <---Next Renewal Date--->
$('#oldDate').on('change', function(e) {
var oldDate = new Date(this.value);
$('#old').html(new Date(oldDate));
oldDate.setFullYear(oldDate.getFullYear() + 1);
oldDate.setDate(oldDate.getDate());
var day = ("0" + oldDate.getDate()).slice(-2);
var month = ("0" + (oldDate.getMonth() + 1)).slice(-2);
var today = oldDate.getFullYear() + "-" + (month) + "-" + (day);
$('#new').val(today);
// <---End Renwal Date--->
// <---Start Reminder date--->
$('#old').html(new Date(oldDate));
oldDate.setFullYear(oldDate.getFullYear());
oldDate.setDate(oldDate.getDate() - 15);
var day = ("0" + oldDate.getDate()).slice(-2);
var month = ("0" + (oldDate.getMonth() + 1)).slice(-2);
var today = oldDate.getFullYear() + "-" + (month) + "-" + (day);
$('#reminde').val(today);
// <---End Reminder Date--->
});
});
</script>
</body>
</html>

How to make a div into a checkbox

I recently started coding and I want to know the best way to make a box into a checkbox. So I want to make a website where the user can choose colors by checking the colored boxes to pick the ones they want. I have researched and can't find a good answer. All the boxes should be clickable, as the user can choose more than one color.
edit I'm sorry if I didn't make sense! What I'm trying to do is something like this: sv.tinypic.com/r/dcelb6/9. So the boxed are colored, and you can check them.
Here is my html:
<div>
<a href="#" class="color-box black-box" value="0">
<h3>Black</h3>
</a>
</div>
<div>
<a href="#" class="color-box grey-box" value="0">
<h3>Grey</h3>
</a>
</div>
<div>
<a href="#" class="color-box blue-box" value="0">
<h3>Blue</h3>
</a>
</div>
</div>
and here is the CSS:
.color-box {
width: 15.20833%;
min-width: 15.20833%;
height: 0;
padding-bottom: 15.20833%;
background-color: #fff;
margin-top: 0.72917%;
display: block;
float: left;
position: relative;
margin: 7px 0.72917%;
border: 1px solid transparent;
}
.color-box h3 {
color: #fff;
text-decoration: none;
}
.black-box {
background: #000;
}
.grey-box {
background: #9E9E9E;
}
.blue-box {
background: #205DB1;
}

where the user can choose colors by checking the colored boxes to pick
the ones they want.
snippet here
colors={'black-box':'black','grey-box':'grey','blue-box':'blue'}
var elements=document.getElementsByClassName('color-box')
function handler(el){
el[i].addEventListener('click',
function(e){
if(e.target.className.split(' ')[1] in colors){
document.getElementById('selector').style.background= colors[e.target.className.split(' ')[1]]
}
for(var i=0;i<elements.length;++i){
if(elements[i]!=e.target){elements[i].innerHTML=''}
}
e.target.innerHTML=='✓'?e.target.innerHTML='':e.target.innerHTML='✓';
},false)
}
for(var i=0;i<elements.length;++i){
handler(elements)
}
//document.getElementsByClassName('color-box').forEach(handler)
.color-box {
color:white;
font-size:20px;
width:30px;
height:30px;
background-color: #fff;
margin-top: 0.72917%;
display: block;
text-align:center;
position: relative;
border: 1px solid transparent;
}
.black-box {
background: #000;
}
.grey-box {
background: #9E9E9E;
}
.blue-box {
background: #205DB1;
}
#selector{
width:200px;
height:200px;
border:solid;
}
<div class="color-box black-box" >
</div>
<div class="color-box grey-box">
</div>
<div class="color-box blue-box">
</div>
</div>
<div id='selector'>
</div>

This is a basic example of how to implement it without JS https://plnkr.co/edit/tvamZjENZSLWnrtthDHP?p=preview
<style>
.checkbox > input[type="checkbox"] { display: none; }
.checkbox > input[type="checkbox"]:checked + label:before {margin-right: 10px; content: "[X]";}
.checkbox > input[type="checkbox"] + label:before {margin-right: 10px; content: "[ ]";}
</style>
<div class="checkbox">
<input type="checkbox" id="test">
<label for="test">HELLO</label>
</div>
Note that i'm using > to indicate the immediate checkbox element descendant of .checkbox element, and the + selector for getting the next LABEL element sibling of that input

This is a pure CSS one, using "hidden" radioset with their label colored
JS Fiddle
.radios{
display:none;
}
.color-box {
width: 50px;
line-height: 50px;
margin-top: 0.72917%;
display: inline-block;
margin: 7px 0.72917%;
color: #fff;
text-align:center;
text-decoration: none;
border: 1px solid transparent;
}
.black-box {
background: #000;
}
.grey-box {
background: #9E9E9E;
}
.blue-box {
background: #205DB1;
}
.radios:checked + label{
text-decoration:underline;
}
#rad1:checked ~ #result{
background-color:black;
}
#rad2:checked ~ #result{
background-color:#9E9E9E;
}
#rad3:checked ~ #result{
background-color:#205DB1;
}
#result{
width:200px;
height:200px;
border:2px orange solid;
}
<div>
<input type="radio" id="rad1" name="rad" class="radios">
<label for="rad1" class="color-box black-box">Black</label>
<input type="radio" id="rad2" name="rad" class="radios">
<label for="rad2" class="color-box grey-box">Grey</label>
<input type="radio" id="rad3" name="rad" class="radios">
<label for="rad3" class="color-box blue-box">Blue</label>
<hr>
<div id="result"></div>
</div>

How to close dropdown checklist when clicked outside of it but prevent it from closing when textarea is selected?

I created a dropdown checklist which opens a textarea when the last option is checked.
I need to be able to close the dropdown when I click outside of it.
I'm using this code for it
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Title</title>
<meta name="author" content="">
<script src="js/jquery.min.js"></script>
</head>
<body>
<div class="row inner-container">
<div class="group">
<div class="styled-select control-group">
<div class="controls">
<div id="list2" class="dropdown-check-list" tabindex="100">
<span class="anchor">-- Selecteer uw reparatie --</span>
<ul class="items">
<li class="item first-item">
<input id="dropdown-check-list-01" type="checkbox" />
<label for="dropdown-check-list-01"><span></span>option 1</label>
</li>
<li class="item">
<input id="dropdown-check-list-02" type="checkbox" />
<label for="dropdown-check-list-02"><span></span>option 2</label>
</li>
<li class="item overige">
<input id="dropdown-check-list-07" type="checkbox" name="messagetick" />
<label for="dropdown-check-list-07"><span></span>Other</label>
<div class="contactmessage">
<textarea name="setmessage" cols="25" rows="5"></textarea>
</div>
<script type="text/javascript">
$('input[name="messagetick"]').click(function() {
$('.contactmessage').toggle(this.checked);
});
$('input[name="messagetick"]').change(function(){
if($(this).is(":checked")) {
$('li.overige').addClass("checked");
} else {
$('li.overige').removeClass("checked");
}
});
</script>
</li>
</ul>
</div>
</div>
</div>
<script type="text/javascript">
jQuery(function ($) {
var checkList = $('.dropdown-check-list');
checkList.on('click', 'span.anchor', function(event){
var element = $(this).parent();
if ( element.hasClass('visible'))
{
element.removeClass('visible');
}
else
{
element.addClass('visible');
}
checkList.on("blur", function() {
if ($("textarea[name='setmessage']").not(':focus')) {
element.removeClass('visible');
}
});
});
});
</script>
</div>
</div>
<style>
.dropdown-check-list {
border-radius: 2px;
display: inline-block;
padding-left: 0;
}
.dropdown-check-list .anchor {
cursor: pointer;
display: inline-block;
height: 47px;
line-height: 48px;
padding: 0 40px 0 20px;
position: relative;
width: 468px;
}
.dropdown-check-list ul.items {
border-top: 1px solid #dedede;
display: none;
margin: 0;
padding: 0;
}
.dropdown-check-list ul.items li {
height: 36x;
list-style: none;
}
.dropdown-check-list ul.items li.item:hover {
background: #005a84;
}
.dropdown-check-list ul.items li.item:hover label,
.dropdown-check-list ul.items li.item:hover .icon-info-sign {
color: #fff;
}
.dropdown-check-list ul.items li.item:first-of-type {
margin-top: 10px;
}
.dropdown-check-list ul.items .totaalprijs {
font-weight: bold;
padding: 20px;
}
.dropdown-check-list.visible .items {
display: block;
}
.dropdown-check-list input, .dropdown-check-list label {
display: inline-block;
line-height: 36px;
margin: 0;
width: auto;
}
.dropdown-check-list input[type=checkbox] {
display: none;
margin: 0 20px;
}
.dropdown-check-list label {
color: #999;
}
.dropdown-check-list input[type="checkbox"] + label span {
background: url(../img/check_sheet.png) left -36px no-repeat;
cursor: pointer;
display: inline-block;
height: 20px;
margin: 0 20px;
vertical-align: middle;
width: 20px;
}
.dropdown-check-list input[type="checkbox"]:checked + label span {
background: url(../img/check_sheet.png) left top no-repeat;
}
.dropdown-check-list .icon-info-sign {
color: #999;
line-height: 36px;
}
.dropdown-check-list .other textarea {
display: block;
font-size: 14px;
margin: 25px auto 0;
padding: 5px;
width: -moz-calc(100% - 40px);
width: -webkit-calc(100% - 40px);
width: -o-calc(100% - 40px);
width: calc(100% - 40px);
}
.dropdown-check-list .checked {
background-color: #acacac !important;
padding-bottom: 30px;
}
.dropdown-check-list .checked label,
.dropdown-check-list .checked i {
color: #fff;
}
.dropdown-check-list .contactmessage {
display: none;
}
</style>
</body>
</html>
This part of the script is what I use to close the dropdown when clicked outside.
checkList.on( "blur", function(){
element.removeClass('visible');
});
The problem I have is that it also closes the dropdown when I try to write into the textarea. How do I set this up so it doesn't close the dropdown when textarea is selected?

A friend of mine helped me solve this, so I'll post it here for anyone who encounters the same problem.
$(document).mouseup(function (e) {
var container = $('.dropdown-check-list');
if (!container.is(e.target) && container.has(e.target).length === 0) {
container.removeClass('visible');
}
});

Not sure to really understand.
I made a few cleanups for testing and everything seems fine : http://jsfiddle.net/xp1fv43b/
HTML :
<div id="list1" class="dropdown-check-list">
<span class="anchor">-- Selecteer uw reparatie --</span>
<ul class="items">
<li class="item">
<input id="dropdown-check-list-01" type="checkbox" />
<label for="dropdown-check-list-01"><span></span>Option 1</label>
</li>
<li class="item">
<input id="dropdown-check-list-02" type="checkbox" />
<label for="dropdown-check-list-02"><span></span>Option 2</label>
</li>
<li class="item other">
<input id="messagetick" type="checkbox" name="messagetick" />
<label for="dropdown-check-list-03"><span></span>Other</label>
<div class="contactmessage">
<textarea name="setmessage" cols="25" rows="5"></textarea>
</div>
</li>
</ul>
</div>
JS :
$(document).ready(function(){
$('input[name="messagetick"]').click(function() {
$('.contactmessage').toggle(this.checked);
});
$('input[name="messagetick"]').change(function(){
if($(this).is(":checked")) {
$('li.other').addClass("checked");
} else {
$('li.other').removeClass("checked");
}
});
}