Cannot access script by ID on HTML form - javascript

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>

Related

How to refresh/revisit the page after clicking submit on a form?

I am making a contact form(which doesn't need to actually contact someone). I want to make it so that when you press the send/submit button, it refreshes the page so that it appears that message has been sent. I am not using Javascript but any ways to do this through Javascript would be appreciated. This is my contact form. This isn't a duplicate because I would prefer if there was a way to do this through Html BUT js answers would be accepted
http://jsfiddle.net/egndc24s/1/
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div class="container">
<section class="section1">
<div class="sec1title">
<h1>Get in touch</h1>
</div>
</section>
<section class="section2">
<div class="contactform">
<h5>Drop us a line...</h5>
<form action="#">
<label for="firstname"><i class="cntfrmicn fa fa-user"></i> <input class="form-fields" name="firstname" type="text"></label> <label for="email"><i class="cntfrmicn fa fa-envelope"></i> <input class="form-fields" name="email" type="text"></label> <label for="contact"><i class="cntfrmicn fa fa-phone"></i> <input class="form-fields" name="contact" type="text"></label> <label for="textarea"><i class="cntfrmicn fa fa-comment"></i>
<textarea class="form-fields" cols="30" id="" name="textarea" rows="10"></textarea></label> <button class="form-fields button" type="submit" value="Send">Send <i class="fa fa-paper-plane"></i></button>
</form>
</div>
<script src='https://maps.googleapis.com/maps/api/js?v=3.exp'>
</script>
<div class="contmap" style='overflow:hidden;height:550px;width:100%;'>
<div id='gmap_canvas' style='height:100%;width:100%;'></div>
<div>
<small>embed google maps</small>
</div>
<div>
<small>free web directories</small>
</div>
<style>
#gmap_canvas img{max-width:none!important;background:none!important}
</style>
</div>
<script type='text/javascript'>
function init_map(){var myOptions = {zoom:14,center:new google.maps.LatLng(-37.898677,144.640630),mapTypeId: google.maps.MapTypeId.ROADMAP};map = new google.maps.Map(document.getElementById('gmap_canvas'), myOptions);marker = new google.maps.Marker({map: map,position: new google.maps.LatLng(-37.898677,144.640630)});infowindow = new google.maps.InfoWindow({content:'<strong>My Location<\/strong><br>Eagle Stadium<br>'});google.maps.event.addListener(marker, 'click', function(){infowindow.open(map,marker);});infowindow.open(map,marker);}google.maps.event.addDomListener(window, 'load', init_map);
</script>
</section>
</div>
</body>
</html>
\\\\\\
* {
margin:0px;
padding:0px;
}
*, *:after, *:before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing:border-box; -o-box-sizing:border-box; box-sizing: border-box; }
.clearfix:before, .clearfix:after { display: table; content: ''; }
.clearfix:after { clear: both; }
body {
background: #1c1c1c;
color: #333;
font-weight: normal;
font-size: 1em;
font-family: 'Roboto', Arial, sans-serif;
}
input:focus, textarea:focus, keygen:focus, select:focus {
outline: none;
}
::-moz-placeholder {
color: #666;
font-weight: 300;
opacity: 1;
}
::-webkit-input-placeholder {
color: #666;
font-weight: 300;
}
/* contact from design */
.container {
padding: 20px 50px 70px;
}
.sec1title {
text-align: center;
}
.sec1title h1 {
font-size: 40px;
margin: 25px;
text-transform: uppercase;
color: red;
font-weight: 400;
}
.section2 {
position: relative;
overflow: hidden;
}
.section2 .contactform {
position: absolute;
top: 0;
right: 10%;
z-index: 99;
background: #393939;
padding: 30px 40px 70px;
box-sizing: border-box;
}
.section2 .contactform input.form-fields,
.section2 .contactform button.form-fields,
.section2 .contactform textarea.form-fields {
padding: 0 0 0 40px;
display: block;
box-sizing: border-box;
width: 350px;
font-size: 16px;
background: #323232;
margin: 7px 0;
border: 1px solid #00C1A8;
color: #6BECDB;
opacity: 0.5;
min-height: 45px;
text-shadow: none;
position: relative;
}
.section2 .contactform textarea.form-fields {
padding: 8px 40px;
resize: none;
}
.section2 .contactform button.form-fields.button {
color: #16F1D4;
font-size: 14px;
padding: 0;
text-transform: uppercase;
}
.section2 .contactform button.form-fields.button:hover {
background: #00C1A8;
color: #fff;
cursor: pointer;
opacity: 1;
}
.section2 .contactform button.form-fields.button i {
margin-left:10px;
}
.section2 .contactform h5 {
color: #16F1D4;
font-size: 16px;
margin-bottom: 15px;
}
.section2 .contactform label .cntfrmicn {
color: #00C1A8;
padding: 14px;
position: absolute;
z-index: 99;
}
#media only screen and (max-width: 660px) {
.container {
padding: 10px 20px 30px;
}
.contmap {
height: 475px !important;
}
.sec1title h1 {
font-size: 28px;
}
.section2 .contactform { padding: 10px; right: 0; width: 100%; }
.section2 .contactform input.form-fields, .section2 .contactform button.form-fields, .section2 .contactform textarea.form-fields {
width: 100%;
}
}

You can set the form's submit button's onClick event handler to reload the page with location.reload() or location = location (fallback for older browsers).
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div class="container">
<section class="section1">
<div class="sec1title">
<h1>Get in touch</h1>
</div>
</section>
<section class="section2">
<div class="contactform">
<h5>Drop us a line...</h5>
<form action="#">
<label for="firstname"><i class="cntfrmicn fa fa-user"></i> <input class="form-fields" name="firstname" type="text"></label> <label for="email"><i class="cntfrmicn fa fa-envelope"></i> <input class="form-fields" name="email" type="text"></label> <label for="contact"><i class="cntfrmicn fa fa-phone"></i> <input class="form-fields" name="contact" type="text"></label> <label for="textarea"><i class="cntfrmicn fa fa-comment"></i>
<textarea class="form-fields" cols="30" id="" name="textarea" rows="10"></textarea></label> <button class="form-fields button" type="submit" value="Send" onClick="refreshPage()">Send <i class="fa fa-paper-plane"></i></button>
</form>
</div>
<script src='https://maps.googleapis.com/maps/api/js?v=3.exp'>
</script>
<div class="contmap" style='overflow:hidden;height:550px;width:100%;'>
<div id='gmap_canvas' style='height:100%;width:100%;'></div>
<div>
<small>embed google maps</small>
</div>
<div>
<small>free web directories</small>
</div>
<style>
#gmap_canvas img{max-width:none!important;background:none!important}
</style>
</div>
<script type='text/javascript'>
function refreshPage(){
console.log("Refreshing page");
location.reload ? location.reload() : location = location;
}
</script>
</section>
</div>
</body>
</html>

Calling location.reload() from javascript will reload the page.

Which url in your backend is handling the form?
If it is the same url as this page, the browser will refresh it for you.
<form action="">
If it is another one, redirect to this page. You can do it server-side or client side.
Another solution using javascript would be to send an ajax request and add on the form onsubmit="location.reload(true)".
https://www.w3schools.com/jsref/event_onsubmit.asp
https://www.w3schools.com/jsref/met_loc_reload.asp

Text input won't work

I have this form in which if this one option is selected, then a specific text input will pop up. I don't know why, but when I select Phone, the text input that pops up won't let me write anything on it.
Here's the code:
function checkType() {
var email = document.getElementById('email');
var phone = document.getElementById('phone');
var emailType = document.getElementById('emailType');
var phoneType = document.getElementById('phoneType');
if (email.checked) {
emailType.style.opacity = "1";
emailType.style.height = "3em";
phoneType.style.opacity = "0";
phoneType.style.height = "0";
} else if (phone.checked) {
emailType.style.opacity = "0";
emailType.style.height = "0";
phoneType.style.opacity = "1";
phoneType.style.height = "3em";
}
}
function showMessage(event) {
event.preventDefault();
var myForm = event.target;
myForm.style.opacity = "0";
myForm.style.height = "0";
myForm.style.transition = ".5s";
document.getElementById('submitted').style.opacity = "1";
document.getElementById('submitted').style.transition = "2s";
}
document.getElementById('myForm').addEventListener("submit", showMessage);
#import url('https://fonts.googleapis.com/css?family=Indie+Flower');
#import url('https://fonts.googleapis.com/css?family=Permanent+Marker');
#import url('https://fonts.googleapis.com/css?family=Bitter');
#import url('https://fonts.googleapis.com/css?family=Josefin+Sans');
.clearfix::after {
content: "";
clear: both;
display: table;
}
/*Navigation Styles*/
nav {
background-color: #AC3931;
text-align: right;
margin-top: -100px;
}
nav a {
color: #f6f7eb;
line-height: 2em;
text-decoration: none;
}
/*I made the links' font size in the nav bar bigger. I thought it was too small. I hope that's okay*/
nav li {
font-size: 1.5em;
list-style-type: none;
font-family: 'Bitter', serif;
display: inline-block;
padding: 10px;
font-weight: bold;
}
nav a:hover {
color: black;
}
/*Navigation Styles end*/
/*Header Styles*/
h1,
h2,
h3,
h4,
h5,
h6 {
color: #E18335;
line-height: .2em;
padding-top: 1em;
}
/*Header styles end*/
.pgh {
color: black;
}
/*Images Styles*/
.logo-image {
position: relative;
left: 20px;
top: 0px;
background-color: white;
border: solid 2px #beb7a4;
height: 111px;
width: 115px;
}
.banner-image {
width: 960px;
height: 250px;
border-radius: 15px 50px;
box-shadow: 10px 10px 5px #ccc;
}
.img3 {
width: 450px;
height: 350px;
border-radius: 15px 50px;
box-shadow: 10px 10px 5px #ccc;
}
.img4 {
width: 450px;
height: 350px;
border-radius: 15px 50px;
}
.socialIcon {
width: 40px;
height: 40px;
}
.contactImage {
height: 350px;
width: 450px;
}
/*Images Styles end*/
#content {
width: 960px;
margin: 0 auto;
border-right: 1px solid gray;
border-left: 1px solid gray;
padding-left: 20px;
padding-right: 20px;
background-color: white;
}
#sec1 {
padding: 10px;
}
#sec2 {
background-color: #FBFFB9;
padding: 10px;
}
#sec3 {
text-align: center;
padding: 50px;
}
#calmFont {
font-family: 'Indie Flower', cursive;
}
#intenseFont {
font-family: 'Permanent Marker', cursive;
}
.leftcol {
width: 45%;
float: left;
padding: 10px;
}
.rightcol {
width: 45%;
float: right;
padding: 10px;
}
.nameClassCopy {
float: left;
}
.socialIcons {
float: right;
}
footer {
background-color: #AC3931;
}
body {
background-color: #FFBC42;
}
#emailType {
opacity: 0;
height: 0;
transition: .5s;
}
#phoneType {
opacity: 0;
height: 0;
transition: .5s;
}
#contactPgh {
font-size: 20px;
}
p {
font-family: 'Josefin Sans', sans-serif;
}
#normalFont {
font-family: 'Josefin Sans', sans-serif;
}
#submit {
background-color: #AC3931;
border-radius: 15px 10px;
padding: 10px;
color: white;
box-shadow: 5px 5px 1px #ccc;
}
#submit:hover {
background-color: #FFBC42;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Dry Oar | Contact Us</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- import the webpage's stylesheet -->
<link rel="stylesheet" href="style.css">
<!-- import the webpage's javascript file -->
</head>
<body>
<div id="content">
<header>
<img class="logo-image" alt="Logo Picture" src="https://cdn.glitch.com/3ee5b53d-8bb9-4b30-876e-0162812b3a1e%2Fdryoarlogo%20copy%202.png?1526759445079">
<br>
<nav>
<ul>
<li> | Home</li>
<li>| Rivers</li>
<li>| Contact Us |</li>
</ul>
</nav>
<br>
<img class="banner-image" alt="Banner" src="https://cdn.glitch.com/3ee5b53d-8bb9-4b30-876e-0162812b3a1e%2FredContactBanner.jpg?1531435849381">
<br>
</header>
<div id="normalFont">
<br>
<section id="sec3" class="clearfix">
<h1 style="font-family: 'Josefin Sans', sans-serif;">
Need more information?
</h1>
<p id="contactPgh">
Questions about pricing, location, equipment rental, scheduling or anything else?! Let us know!
</p>
</section>
<!-- Section Two -->
<section id="sec1" class="clearfix">
<!-- Left column -->
<div class="leftcol" style="border-right: 1px solid gray;">
<form id="myForm">
First Name:
<input type="text" placeholder="Arthur" required>
<br>
<br> Last Name:
<input type="text" placeholder="Figueiredo" required>
<br>
<br> Do you prefer to be contacted by e-mail or phone?
<br>
<input type="radio" name="contactType" id="email" onclick="checkType()"> <img style="width: 20px; height: 20px;" src="https://cdn.glitch.com/3ee5b53d-8bb9-4b30-876e-0162812b3a1e%2Femail-icon.png?1531433209873"> E-Mail
<br>
<input type="radio" name="contactType" id="phone" onclick="checkType()"> <img style="width: 20px; height: 20px;" src="https://cdn.glitch.com/3ee5b53d-8bb9-4b30-876e-0162812b3a1e%2Fphone-icon.png?1531433375571"> Phone
<br>
<div id="emailType">
E-Mail:
<input type="text" placeholder="example#email.com">
</div>
<div id="phoneType">
Phone number:
<input type="text" placeholder="(111)222-3333">
</div>
Your Message:
<br>
<br>
<textarea rows="10" cols="40" id="message" placeholder="Your message here . . ." required></textarea>
<br>
<br>
<input type="submit" id="submit">
</form>
<div id="submitted" style="opacity: 0">
<h2>Thank you for contacting us</h2>
<p>We will get back to you shortly.</p>
</div>
</div>
<!-- Right column -->
<div class="rightcol">
<img class="contactImage" src="https://cdn.glitch.com/3ee5b53d-8bb9-4b30-876e-0162812b3a1e%2FcontactLast.png?1531436124712">
</div>
</section>
<br>
</div>
<footer class="clearfix">
<hr>
<div class="NameClassCopy">
© Dry Oar 2018 || Arthur Figueiredo WDD 100‐02
</div>
<div class="socialIcons">
<img class="socialIcon" alt="Facebook Page" src="https://cdn.glitch.com/3ee5b53d-8bb9-4b30-876e-0162812b3a1e%2FFacebookYellow.png?1531436293112">
<img class="socialIcon" alt="Youtube Channel" src="https://cdn.glitch.com/3ee5b53d-8bb9-4b30-876e-0162812b3a1e%2FyoutubeYellow.png?1531436475201">
<img class="socialIcon" alt="WhatsApp" src="https://cdn.glitch.com/3ee5b53d-8bb9-4b30-876e-0162812b3a1e%2FwppYellow.png?1531436410371">
</div>
</footer>
</div>
</body>
</html>
Also, when I select phone and just type something, it won't go into the phone text input box, but when I click on the Email option, whatever I typed will be on its text input box.
I've tried making the email text input disabled if the phone option is selected, but it didn't work. Any suggestions?

Changing the from opacity to display:none still doesn't solve his actual problem. From the code above, he is trying to access a DOM object which is not defined. This would cause Javascript to return an error of undefined. Simply define the emailType and phoneType within your script and see it done bro.
What i mean is this:
var emailType = document.getElementById('emailType');
and
var phoneType = document.getElementById('phoneType');
just add these two lines before the if( conditions.
You can now choose whether or not to use opacity or not......

I think this kind of codes can solve this problems:
if (email.checked) {
document.getElementById("phoneType").style.display = "none";
document.getElementById("emailType").style.display = "";
emailType.style.opacity = "1";
emailType.style.height = "3em";
} else if (phone.checked) {
document.getElementById("emailType").style.display = "none";
document.getElementById("phoneType").style.display = "";
phoneType.style.opacity = "1";
phoneType.style.height = "3em";
}

How to validate a multiple step form

I not able to validate a multiple step form - I want a validation for each field instead of now it validates sets of fields
My code
function show_next(id, nextid, bar) {
var ele = document.getElementById(id).getElementsByTagName("input");
var error = 0;
for (var i = 0; i < ele.length; i++) {
if (ele[i].type == "text" && ele[i].value == "") {
error++;
}
}
if (error == 0) {
document.getElementById("account_details").style.display = "none";
document.getElementById("user_details").style.display = "none";
document.getElementById("qualification").style.display = "none";
$("#" + nextid).fadeIn();
document.getElementById(bar).style.backgroundColor = "#38610B";
} else {
alert("Fill All The details");
}
}
function show_prev(previd, bar) {
document.getElementById("account_details").style.display = "none";
document.getElementById("user_details").style.display = "none";
document.getElementById("qualification").style.display = "none";
$("#" + previd).fadeIn();
document.getElementById(bar).style.backgroundColor = "#D8D8D8";
}
body {
margin: 0 auto;
padding: 0;
text-align: center;
background-color: #D8D8D8;
}
#wrapper {
width: 995px;
padding: 0px;
margin: 0px auto;
font-family: helvetica;
position: relative;
}
#wrapper .baricon {
display: inline-block;
border-radius: 100%;
padding: 12px;
background-color: #38610B;
color: white;
}
#wrapper .progress_bar {
width: 200px;
height: 5px;
border-radius: 20px;
background-color: #D8D8D8;
display: inline-block;
}
#wrapper form div {
margin-left: 340px;
padding: 10px;
box-sizing: border-box;
width: 300px;
margin-top: 50px;
background-color: #585858;
}
#wrapper form div p {
color: #F2F2F2;
margin: 0px;
margin-top: 10px;
font-weight: bold;
}
#wrapper form div .form_head {
font-size: 22px;
font-weight: bold;
margin-bottom: 30px;
}
#wrapper form div input[type="text"] {
width: 200px;
height: 40px;
padding: 5px;
border-radius: 5px;
border: none;
margin-top: 10px;
}
#wrapper form div input[type="button"],
input[type="submit"] {
width: 80px;
height: 40px;
border-radius: 5px;
border: 2px solid white;
background: none;
color: white;
margin: 5px;
margin-top: 10px;
}
#user_details,
#qualification {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div id="wrapper">
<br>
<span class='baricon'>1</span>
<span id="bar1" class='progress_bar'></span>
<span class='baricon'>2</span>
<span id="bar2" class='progress_bar'></span>
<span class='baricon'>3</span>
<form method="post" action="">
<div id="account_details">
<p class='form_head'>Account Details</p>
<p>Email Address</p>
<input type="text" placeholder='Email Address'>
<p>Password</p>
<input type="text" placeholder='Password'>
<br>
<input type="button" value="Next" onclick="show_next('account_details','user_details','bar1');">
</div>
<div id="user_details">
<p class='form_head'>User Details</p>
<p>First Name</p>
<input type="text" placeholder='First Name'>
<p>Last Name</p>
<input type="text" placeholder='Last Name'>
<p>Gender</p>
<input type="text" placeholder='Gender'>
<br>
<input type="button" value="Previous" onclick="show_prev('account_details','bar1');">
<input type="button" value="Next" onclick="show_next('user_details','qualification','bar2');">
</div>
<div id="qualification">
<p class='form_head'>Qualification</p>
<p>Qualification</p>
<input type="text" placeholder='Qualification'>
<p>Hobbies</p>
<input type="text" placeholder='Hobbies'>
<br>
<input type="button" value="Previous" onclick="show_prev('user_details','bar2');">
<input type="Submit" value="Submit">
</div>
</form>
</div>

Here is a version that will not go to the next page if there are errors
Let me know what you think
I added two validations. You can change the rest. The code is vastly simplified
function isEmail(str) { // simple email validation
return /(.+)#(.+){2,}\.(.+){2,}/.test($.trim(str));
}
function isEmpty(str) { // test for empty string
return $.trim(str) === "";
}
function validate($div) { // validates any div - will not let you leave the div if error
var $fields = $div.find("input"), hasError = false;
$fields.each(function() {
$(this).removeClass("error")
hasError = this.name=="pword" && isEmpty(this.value);
if (hasError) {
$("#pword").addClass("error").focus();
return false;
}
hasError = this.name=="email" && (isEmpty(this.value) || !isEmail(this.value));
if (hasError) {
$("#email").addClass("error").focus();
return false;
}
hasError = isEmpty(this.value); // the rest of the fields
if (hasError) {
$(this).addClass("error").focus();
return false;
}
})
return hasError?false:true;
}
$(function() {
// validate all divs on submit, but actually only necessary to validate thediv the submit is on
$("#myForm").on("submit",function(e) {
$(".page").each(function() {
if (!validate($(this))) {
e.preventDefault(); // stop submission
return false;
}
});
});
$(".nav").on("click", function() {
var $parent = $(this).closest("div");
var $nextDiv = $(this).hasClass("next") ? $parent.next() : $parent.prev();
if (validate($parent)) { // is the div this button is on valid?
$parent.fadeOut(function() { // fade it out and fade the next one in
if ($nextDiv.length) {
$nextDiv.fadeIn()
for (var i=$(".page").length;i> $nextDiv.index(); i--) {
$("#bar" + i).css({"background-color": "#D8D8D8"}); // we are going backwards
}
$("#bar" + $nextDiv.index()).css({"background-color": "#38610B"});
}
});
}
});
});
body {
margin: 0 auto;
padding: 0;
text-align: center;
background-color: #D8D8D8;
}
#wrapper {
width: 995px;
padding: 0px;
margin: 0px auto;
font-family: helvetica;
position: relative;
}
#wrapper .baricon {
display: inline-block;
border-radius: 100%;
padding: 12px;
background-color: #38610B;
color: white;
}
#wrapper .progress_bar {
width: 200px;
height: 5px;
border-radius: 20px;
background-color: #D8D8D8;
display: inline-block;
}
#wrapper form div {
margin-left: 340px;
padding: 10px;
box-sizing: border-box;
width: 300px;
margin-top: 50px;
background-color: #585858;
}
#wrapper form div p {
color: #F2F2F2;
margin: 0px;
margin-top: 10px;
font-weight: bold;
}
#wrapper form div .form_head {
font-size: 22px;
font-weight: bold;
margin-bottom: 30px;
}
#wrapper form div input[type="text"] {
width: 200px;
height: 40px;
padding: 5px;
border-radius: 5px;
border: none;
margin-top: 10px;
}
#wrapper form div input[type="button"],
input[type="submit"] {
width: 80px;
height: 40px;
border-radius: 5px;
border: 2px solid white;
background: none;
color: white;
margin: 5px;
margin-top: 10px;
}
#user_details,
#qualification {
display: none;
}
.error { background-color:pink !important}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div id="wrapper">
<br>
<span class='baricon'>1</span>
<span id="bar1" class='progress_bar'> </span>
<span class='baricon'>2</span>
<span id="bar2" class='progress_bar'> </span>
<span class='baricon'>3</span>
<form method="post" action="" id="myForm">
<div id="account_details" class="page">
<p class='form_head'>Account Details</p>
<p>Email Address</p>
<input type="text" name="email" id="email" placeholder='Email Address'>
<p>Password</p>
<input type="text" name="pword" id="pword" placeholder='Password'>
<br>
<input type="button" value="Next" class="nav next" />
</div>
<div id="user_details" class="page">
<p class='form_head'>User Details</p>
<p>First Name</p>
<input type="text" name="fname" id="fname" placeholder='First Name'>
<p>Last Name</p>
<input type="text" name="lname" is="lname" placeholder='Last Name'>
<p>Gender</p>
<input type="text" name="gender" id="gender" placeholder='Gender'>
<br>
<input type="button" value="Prev" class="nav prev" />
<input type="button" value="Next" class="nav next" />
</div>
<div id="qualification" class="page">
<p class='form_head'>Qualification</p>
<p>Qualification</p>
<input type="text" placeholder='Qualification'>
<p>Hobbies</p>
<input type="text" placeholder='Hobbies'>
<br>
<input type="button" value="Prev" class="nav prev" />
<input type="Submit" value="Submit">
</div>
</form>
</div>

Javascript will not connect to html elements

I want to have a connection between an input and a paragraph, where the paragraph was going to show the price * the amount of people. So if it originally costed 7 000 for one, then if the input would say 2, it would cost 14 000. It works on this page, however not on mine for some reason. Sorry i'm so horrible at this guys :/
/* When the user clicks on the button,
toggle between hiding and showing the dropdown content */
function myFunction() {
document.getElementById("myDropdown").classList.toggle("show");
}
function filterFunction() {
var input, filter, ul, li, a, i;
input = document.getElementById("myInput");
filter = input.value.toUpperCase();
div = document.getElementById("myDropdown");
a = div.getElementsByTagName("a");
for (i = 0; i < a.length; i++) {
if (a[i].innerHTML.toUpperCase().indexOf(filter) > -1) {
a[i].style.display = "";
} else {
a[i].style.display = "none";
}
}
}
function playPause(btn, vid) {
var vid = document.getElementById(vid);
if (vid.paused) {
vid.play();
btn.innerHTML = '<img class="video-btns" src="http://localhost/prosjekt_reiseklubb/images/icons/pause_icon.png" />';
} else {
vid.pause();
btn.innerHTML = '<img class="video-btns" src="http://localhost/prosjekt_reiseklubb/images/icons/play_icon.png" />';
}
}
function vidMute(btn, vid) {
var vid = document.getElementById(vid);
if (vid.muted) {
vid.muted = false;
btn.innerHTML = '<img class="video-btns" src="http://localhost/prosjekt_reiseklubb/images/icons/sound_icon.png" /> ';
} else {
vid.muted = true;
btn.innerHTML = '<img class="video-btns" src="http://localhost/prosjekt_reiseklubb/images/icons/sound_icon_muted.png" /> ';
}
}
var numberOfGuests = document.getElementById("numberOfGuests");
var txtPrice = document.getElementById("txtPrice");
var txtToPrice = document.getElementById("txtToPrice");
var price = 7000;
numberOfGuests.oninput = function() {
if (numberOfGuests.value > 0) {
txtToPrice.innerHTML = (Number(numberOfGuests.value) + 1) * price;
} else {
txtToPrice.innerHTML = 7000;
}
}
.header {
background: linear-gradient(0deg, rgba(187, 243, 249, 1), rgba(70, 139, 186, 1));
top: 0px;
width: 100%;
height: 70px;
}
#logo {
display: block;
position: absolute;
margin-top: 2px;
margin-left: 100px;
z-index: 1;
}
#logo:hover {
position: absolute;
border-radius: 100px;
box-shadow: 0px 0px 200px 5px #f5ff84;
}
.language {
display: block;
position: relative;
margin-left: -70px;
margin-top: 0px;
margin-bottom: -50px;
padding-left: 8px;
padding-right: 8px;
border: none;
width: 50px;
}
.language:hover {
background: linear-gradient(0deg, rgba(187, 243, 249, 1), rgba(70, 139, 186, 1));
border-radius: 5px;
box-shadow: 0px 0px 0px 1px;
}
/* Dropdown Button */
.dropbtn {
margin: 0;
padding-top: 5px;
padding-right: 20px;
padding-left: 20px;
padding-bottom: 42px;
height: 40px;
font-family: 'Embedded-DINWebPro', 'DIN Next W01 Regular', Arial, sans-serif;
font-size: 20px;
line-height: 40px;
color: #000;
background-color: transparent;
border: none;
cursor: pointer;
}
/* Dropdown button on hover & focus */
.dropbtn:hover,
.dropbtn:focus {
background: linear-gradient(0deg, rgba(187, 243, 249, 1), rgba(70, 139, 186, 1));
border-radius: 5px;
box-shadow: 0px 0px 1px 0px;
}
/* The container <div> - needed to position the dropdown content */
.dropdown {
position: relative;
display: inline-block;
padding-right: 10px;
margin-top: 10px;
float: right;
padding-left: 75px;
border: none;
}
/* search option */
#myInput {
border-box: box-sizing;
background-image: url('searchicon.png');
background-position: 14px 12px;
background-repeat: no-repeat;
font-size: 16px;
font-family: verdana;
padding: 16px 0px 15px 20px;
border: none;
}
/* Dropdown Content (Hidden by Default) */
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
right: 0;
}
/* Links inside the dropdown */
.dropdown-content a {
color: black;
padding: 20px 20px;
text-decoration: none;
font-size: 16px;
font-family: verdana;
display: block;
}
/* Change color of dropdown links on hover */
.dropdown-content a:hover {
background-color: #DBDBDB;
}
/* Show the dropdown menu (use JS to add this class to the .dropdown-content container when the user clicks on the dropdown button) */
.show {
display: block;
}
#menu_icon {
width: 20px;
height: 17px;
padding-right: 7px;
}
/* reiser link */
#rl {
pointer-events: none;
cursor: default;
}
fieldset {
border: none;
}
.form-booking {
background: linear-gradient(0deg, rgba(187, 243, 249, 1), rgba(70, 139, 186, 1));
margin-top: 140px;
margin-left: 30%;
width: 45%;
border-radius: 10px;
box-shadow: 0px 0px 50px 0px;
margin-bottom: 82px;
}
.input-boxes {
border: solid;
background: #fff;
font-size: 100%;
font-family: "ff-din-round-web", "ff-din-round-web-2", arial, helvetica, calibri, sans-serif;
border: 1px solid #668c98;
border-radius: 3px;
text-fill-color: #002f3d!important;
margin-left: 15%;
margin-top: 10px;
padding: 5% 5% 5% 5%;
box-shadow: 0px 0px 20px 0px;
}
.box-wrapper {
display: inline-flex;
width: 100%;
height: 120px;
}
/* Fornavn og Email */
.box-FEm {
margin-left: 10%;
width: 50%;
}
.box-FEm:hover {
zoom: 1.2;
}
/* Etternavn og Mobilnummer */
.box-EtM {
margin-left: 0.1%;
width: 50%;
}
.box-EtM:hover {
zoom: 1.2;
}
.label-text-FEm {
font-family: 'Embedded-DINWebPro', 'DIN Next W01 Regular', Arial, sans-serif;
font-size: 100%;
margin-left: 10%;
}
.label-text-EtM {
font-family: 'Embedded-DINWebPro', 'DIN Next W01 Regular', Arial, sans-serif;
font-size: 100%;
margin-left: 1%;
}
p {
font-family: 'Embedded-DINWebPro', 'DIN Next W01 Regular', Arial, sans-serif;
}
/*select-country-box*/
#scb {
border: solid;
background: #fff;
font-size: 100%;
font-family: "ff-din-round-web", "ff-din-round-web-2", arial, helvetica, sans-serif;
border: 1px solid #668c98;
border-radius: 3px;
text-fill-color: #002f3d!important;
margin-left: 45%;
margin-top: 10px;
padding: 5% 5% 5% 5%;
box-shadow: 0px 0px 20px 0px;
}
/*label-text-choose-country*/
#ltcc {
margin-left: 45%;
}
#tb {
float: right;
margin-right: 10%;
margin-top: -10px;
border: none;
}
#bestill-btn {
width: 20%;
margin-left: 40%;
}
#bestill-btn:hover {
border-radius: 30px;
box-shadow: inset 0px 0px 10px 1px;
}
.footer {
background-color: #333;
width: 100%;
height: 70px;
}
/*footer-text*/
.ftl {
position: absolute;
color: #FFF;
display: block;
font-size: 17px;
margin-top: 25px;
margin-left: 45%;
width: 229px;
height: 20px;
font-family: 'Embedded-DINWebPro', 'DIN Next W01 Regular', Arial, sans-serif;
border: none;
}
.ftr {
position: relative;
color: #FFF;
display: block;
float: right;
margin-top: 25px;
font-size: 17px;
margin-right: 10%;
width: 130px;
height: 20px;
font-family: 'Embedded-DINWebPro', 'DIN Next W01 Regular', Arial, sans-serif;
border: none;
}
.footer-100 {
position: absolute;
bottom: 0;
}
/* footer-text-100 */
.f-txt-100 {
color: #FFF;
display: block;
padding-top: 10px;
margin-left: 40%;
font-size: 17px;
font-family: 'Embedded-DINWebPro', 'DIN Next W01 Regular', Arial, sans-serif;
}
/* footer-media-icons*/
#fmi {
margin-left: 5%;
}
.footer-media {
display: inline-block;
padding-top: 10px;
float: left;
margin-left: 1%;
width: 50px;
}
<div class="wrapper">
<div class="header">
<div>
<!-- start div1 -->
<img id="logo" src="http://localhost/prosjekt_reiseklubb/images/palm_logo_round.png">
<div class="dropdown">
<img class="language" src="http://localhost/prosjekt_reiseklubb/images/icons/english_icon.png">
<button class="dropbtn">BESTILL</button>
<button onclick="myFunction()" class="dropbtn"><img id="menu_icon" src="http://localhost/prosjekt_reiseklubb/images/icons/menu_icon.png">MENY</button>
<div id="myDropdown" class="dropdown-content">
<input type="text" placeholder="Search.." id="myInput" onkeyup="filterFunction()">
<a id="rl" href="#">Reiser</a>
&nbsp&nbsp&nbsp <img src="http://localhost/prosjekt_reiseklubb/images/icons/Flag_of_Brazil.png"> &nbsp Brasil
&nbsp&nbsp&nbsp <img src="http://localhost/prosjekt_reiseklubb/images/icons/flag_of_croatia.png"> &nbsp Kroatia
&nbsp&nbsp&nbsp <img src="http://localhost/prosjekt_reiseklubb/images/icons/Flag_of_Thailand.png"> &nbsp Thailand
Om oss
</div>
<!--end myDropdown -->
</div>
<!-- end dropdown -->
</div>
<!-- end div1 -->
</div>
<!-- end header -->
<div class="main">
<form class="form-booking" action="registrert.php" method="GET">
<!-- start form -->
<fieldset>
<p style="font-weight: ">Presonlig Informasjon</p>
<br>
<div class="box-wrapper">
<!-- start box-wrapper for fornavn and etternavn -->
<div class="box-FEm">
<!-- start fornavn -->
<label class="label-text-FEm" for="fornavn">Fornavn* </label>
<br>
<input class="input-boxes box-FEm" type="text" name="fornavn" id="fornavn" required autofocus placeholder="Fornavn" pattern="[a-åA-Å]{2,}" title="Fornavnet må inneholdet minst 2 bokstaver">
</div>
<!-- end fornavn -->
<div class="box-EtM">
<!-- start etternavn -->
<label class="label-text-EtM" for="etternavn">Etternavn* </label>
<br>
<input class="input-boxes box-EtM" type="text" name="etternavn" id="etternavn" required placeholder="Etternavn" pattern="[a-åA-Å]{2,}" title="Etternavnet må minst ha 2 bokstaver">
</div>
<!-- end etternavn -->
</div>
<!-- end box-wrapper for fornavn and etternavn -->
<br>
<br>
<div class="box-wrapper">
<!-- start box-wrapper for email and mobilnummer -->
<div class="box-FEm">
<!-- start email -->
<label class="label-text-FEm" for="email">Email* </label>
<br>
<input class="input-boxes box-FEm" type="text" name="email" id="email" required placeholder="Email" pattern="[a-åA-Å]{3,}#[a-åA-Å]{3,}[.]{1}[a-åA-Å]{2,}" title="eksempel#hotmail.com">
</div>
<!-- end email -->
<div class="box-EtM">
<!-- start mobilnummer -->
<label class="label-text-EtM" for="mobil">Mobilnummer* </label>
<br>
<input class="input-boxes box-EtM" type="tel" name="mobilnummer" id="mobilnummer" required placeholder="Mobilnummer" pattern="[0-9]{8}" title="Vennligst skriv inn minst 8 siffere">
</div>
<!-- end mobilnummer -->
</div>
<!-- end box-wrapper for email and mobilnummer -->
<br>
<br>
<div class="box-wrapper">
<div class="box-FEm">
<!-- start Postnr -->
<label class="label-text-FEm" for="postnr">Postnr* </label>
<br>
<input class="input-boxes box-FEm" type="text" name="postnr" id="postnr" required placeholder="Postnr" pattern="[0-9]{4}" title="Vennligst skriv inn posadressen med minst 4 siffere">
</div>
<!-- end postnr -->
<div class="box-EtM">
<!-- start Poststed -->
<label class="label-text-EtM" for="city, country">Poststed* </label>
<br>
<input class="input-boxes box-EtM" type="text" name="city, country" id="city, country" required placeholder="By, Land" pattern="[a-åA-Å]{2,}[,]{1} [a-åA-Å]{2,}" title="Poststedet må inneholde minst 2 bokstaver deretter komma (,) så mellomrom pluss minst 2 nye bokstaver">
</div>
<!-- end poststed -->
</div>
<br>
<br>
<div class="box-wrapper">
<!-- start box-wrapper for land and date -->
<div class="box-FEm">
<!-- start land-div -->
<label id="ltcc" for="land">Velg Land* </label>
<br>
<select id="scb" style="width:60%;" name="land" required title="Vennligst velg land ved å trykke på boksen">
<option value=""></option>
<option value="brazil">Brasil</option>
<option value="croatoa">Croatia</option>
<option value="thailand">Thailand</option>
</select>
</div>
<!-- end land-div -->
</div>
<!-- end box-wrapper for land and date -->
<br>
<p>* Må utfylles </p>
</fieldset>
<br>
<fieldset>
<p style="font-weight: bold;">Bestillingsinformasjon</p>
<p>For en person koster turen <span id="txtPrice">7000 </span>kroner</p>
<br>
<label style="font-family: 'Embedded-DINWebPro', 'DIN Next W01 Regular', Arial, sans-serif;" for="numberOfGuests">Antall medreisende: </label>
<input id="numberOfGuests" type="number" name="numberOfGuests" min="0" max="6" title="Vennligst sett inn antall medreisende ved bruk av knappene eller tastatur.">
<br>
<br>
<label style="font-family: 'Embedded-DINWebPro', 'DIN Next W01 Regular', Arial, sans-serif;" for="numberOfRooms">Antall rom: </label>
<span style="padding-left: 65px;"> <input type="number" name="numberOfRooms" min="1" max="6"> </span>
<p>Ønsker du middag på flyet?</p>
<label for="jaMiddag">Ja: </label><input id="jaMiddag" type="radio" name="middag" value="jaMiddag">
<label for="ingenMddag">Nei: </label><input id="ingenMddag" type="radio" name="middag" value="ingenMddag">
<div id="tb">
<p>Totalt <span id="txtToPrice">7000 </span>kroner</p>
</div>
<br>
<input type="image" id="bestill-btn" src="http://localhost/prosjekt_reiseklubb/images/bestill_button.png" alt="Bestill">
</fieldset>
</form>
<!-- end form -->
</div>
<!-- end main -->
<div class="footer">
<div id="fmi">
<!-- start footer-media -->
<img class="footer-media" src="http://localhost/prosjekt_reiseklubb/images/icons//facebook_icon.png">
<img class="footer-media" src="http://localhost/prosjekt_reiseklubb/images/icons/twitter_icon.png">
<img class="footer-media" src="http://localhost/prosjekt_reiseklubb/images/icons/instagram_icon.png">
<img class="footer-media" src="http://localhost/prosjekt_reiseklubb/images/icons/youtube_icon.png">
<img class="footer-media" src="http://localhost/prosjekt_reiseklubb/images/icons/email_icon.png">
</div>
<!-- end footer-media -->
<div class="ftl">Copyright © 2017 LET's travel </div>
<div class="ftr">Laget av LET AS</div>
</div>
<!-- end footer -->
</div>
<!-- end wrapper -->

If you look at your JavaScript code, you'll notice that there is a small spelling mistake. In the line:
var txtToPrice = document.getElementById("txtToprice");
You have spelt txtToprice with a lowercase p instead of an uppercase P. If you change this your code should work.

Why are you adding 1 to the input value? If there's a value just multiple it by your cost, and default to 0..
var numberOfGuests = document.getElementById("numberOfGuests");
var txtPrice = document.getElementById("txtPrice");
var txtToPrice = document.getElementById("txtToPrice");
var price = 7000;
numberOfGuests.oninput = function() {
if (numberOfGuests.value.length){
txtToPrice.innerHTML = (Number(numberOfGuests.value)) * price;
} else {
txtToPrice.innerHTML = 0;
}
}
#tb{
float: right;
margin-right: 10%;
margin-top: -100px;
border: none;
}
<fieldset>
<p style="font-weight: bold;">Paymentinformation</p>
<p>It costs <span id="txtPrice">7000 </span>for one person</p>
<br>
<label style="font-family: 'Embedded-DINWebPro', 'DIN Next W01 Regular', Arial, sans-serif;" for="numberOfGuests">Number of people: </label>
<input id="numberOfGuests" type="number" name="numberOfGuests" min="0" max="6">
<br>
<br>
<div id="tb">
<p>Total <span id="txtToPrice">0</span></p>
</div>
<br>
</fieldset>

From how I read it, the question is "how to observe form changes with HTML and JavaScript and show a total." It would be best to simplify instead of trying to deal with all of the extra code provided. https://jsfiddle.net/sheriffderek/6uv795gc/
<form id='myForm'>
<div class='input-w'>
<span class='label'>price</span>
<input type='number' rel='price' value='75' />
</div>
<div class='input-w'>
<span class='label'>number</span>
<input type='number' rel='number' value='1' />
</div>
<p>
<span rel='total'></span>
</p>
</form>
...
// (jQuery included - to keep things readable)
var $myForm = $('#myForm');
var $price = $myForm.find('[rel="price"]');
var $number = $myForm.find('[rel="number"]');
var $total = $myForm.find('[rel="total"]');
var $inputs = $('#myForm').find('input');
$inputs.on('change', function() {
var total = $price.val() * $number.val();
$total.html(total);
}).trigger('change'); // once to start off

html5 ,JQuery - can't get value from custom attribute

My Images are not appending from Left to right on click event ..I found that variable sources$ was not getting any data from a div with data-module attribute
Button Click event
$('#executeButton').click(function () {
var sources$ = $('#sourcePane input:checked~img');
});
It shows Blank object array
this is the particular div with data-module
<div data-module="Sources" data-module-id="sourcePane">
<div>
<input type="checkbox" name="sources"/><br/>
<img src="images/source1.png" alt="source 1" title="Source 1" id="xyz"/>
</div>
</div>
in Demo HTML Page
http://www.bibeault.org/jqia2/chapter3/lab.move.and.copy.html
sources$ has is value stored as "img#xyz source1.png"
It is just not working on my local IIS
this is the complete code
<!DOCTYPE html>
<html>
<head>
<title>Move and Copy Lab Page</title>
<link rel="stylesheet" type="text/css" href="../styles/core.css">
<style type="text/css">
div#sourcePane {
float: left;
width: 40%;
}
div#sourcePane img {
margin-bottom: 8px;
}
div#targetPane {
float: right;
width: 55%;
}
div.target {
border: 1px solid maroon;
background-color: #ffffcc;
margin-bottom: 8px;
}
#controls div {
margin-bottom: 4px;
}
#restoreButton {
display: none;
}
.done input[type=checkbox], .done #executeButton {
display: none;
}
.done #restoreButton {
display: inline;
}
</style>
<script type="text/javascript" src="../Scripts/jquery-1.4.1.js"></script>
<script type="text/javascript" src="../Scripts/jqia2.support.js"></script>
<script type="text/javascript" >
$(function () {
$('#restoreButton').click(function () {
window.location = 'lab.move.and.copy.html';
});
$('#executeButton').click(function () {
$('body').addClass('done');
$('.done #controls :radio').attr('disabled', true);
var sources$ = $('#sourcePane input:checked~img');
if ($('[name=clone]:checked').val() == 'yes') sources$ = sources$.clone();
var targets$ = $('#targetPane input:checkbox:checked').parents('.target');
var operation = $('[name=operations]:checked').val();
targets$[operation](sources$);
});
});
</script>
</head>
<body class="fancy">
<div id="pageContainer">
<div id="pageContent">
<h1>jQuery Move and Copy Lab Page</h1>
<div data-module="Sources" data-module-id="sourcePane">
<div>
<input type="checkbox" name="sources"/><br/>
<img src="images/source1.png" alt="source 1" title="Source 1" id="xyz"/>
</div>
<div>
<input type="checkbox" name="sources"/><br/>
<img src="images/source2.png" alt="source 2" title="Source 2"/>
</div>
<div>
<input type="checkbox" name="sources"/><br/>
<img src="images/source3.png" alt="source 3" title="Source 3"/>
</div>
</div>
<div data-module="Target Areas" data-module-id="targetPane">
<div id="target1" class="target">
<div><input type="checkbox" name="targets"/> Target 1</div>
</div>
<div id="target2" class="target">
<div><input type="checkbox" name="targets"/> Target 2</div>
</div>
<div id="target3" class="target">
<div><input type="checkbox" name="targets"/> Target 3</div>
</div>
<div id="controls">
<div>
<label>Operation:</label><br/>
<input type="radio" name="operations" value="append" checked="checked"/> append
<input type="radio" name="operations" value="prepend"/> prepend
<input type="radio" name="operations" value="before"/> before
<input type="radio" name="operations" value="after"/> after
</div>
<div>
<label>Clone?:</label><br/>
<input type="radio" name="clone" value="no" checked="checked"/> no
<input type="radio" name="clone" value="yes"/> yes
</div>
</div>
<div>
<button type="button" class="green90x24" id="executeButton">Execute</button>
<button type="button" class="green90x24" id="restoreButton">Restore</button>
</div>
</div>
<div class="footer">jQuery in Action, 2nd edition, sample code<br/>Bear Bibeault and Yehuda Katz</div>
</div>
</div>
</body>
</html>
Core.css
body {
background: #f5ffe8 none;
}
body.fancy {
background: #cccccc url('../images/backg.png');
}
body,th,td {
font-family: 'Verdana',sans-serif;
font-size: 9pt;
color: #444444;
}
#pageContainer {
width: 752px;
margin: 8px auto;
border: 3px #4a6074 solid;
background-color: white;
}
#pageContent {
padding: 16px;
}
h1 {
width: auto;
height: auto;
background-image: none;
padding: 0;
color: #4a6074;
font-size: 1.4em;
}
body.fancy h1 {
width: 640px;
height: 41px;
font-size: 1.2em;
background: url('../images/banner.h1.png') no-repeat;
padding: 24px 0 0 80px;
margin: 0 0 16px 0;
}
label {
font-weight: bold;
}
button {
text-align: center;
border: 0;
cursor: pointer;
}
button.green90x24 {
background: url('../images/button.90x24.green.png');
width: 90px;
height: 24px;
color: #444444;
font-weight: bold;
padding: 0;
}
div.module {
margin-bottom: 12px;
}
div.banner {
background-color: #a1c772;
}
div.banner h2 {
height: 23px;
background: url("../images/module.slice.png") repeat-x #a1c772;
color: white;
font-size: 1.1em;
font-weight: bold;
margin: 0 4px 0 4px;
padding: 7px 0 0 8px;
}
div.module div.body {
padding: 8px;
border: solid 2px #a1c772;
background-color: #f5ffe8;
}
div.module h3 {
color: #6b8150;
margin: 3px 0 3px 0;
font-size: 1.2em;
font-weight: bold;
}
p {
margin: 0 0 8px 0;
}
div.footer {
text-align: center;
clear: both;
font-size: 0.8em;
color: silver;
}
div.separator {
clear: both;
}
img[src="example.jpg"] {
background-color: white;
border: 1px black solid;
padding: 12px 12px 16px 12px;
border-bottom-width: 2px;
border-right-width: 2px;
}
.leftCap {
float: left;
width: 8px;
height: 30px;
background: no-repeat url("../images/module.left.cap.png");
}
.rightCap {
float: right;
width: 8px;
height: 30px;
background: no-repeat url("../images/module.right.cap.png");
}
I couldn't find the reason ...
Any suggestion will be helpful

Categories

Resources