Javascript will not connect to html elements - javascript

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

Related

How to redirect on same page jquery

I am trying to redirect on same page, it is redirect after database storage. But giving me following error
This page isn’t working
localhost is currently unable to handle this request. HTTP ERROR 500
My script is successfully saving record on database using php with jquery but after inserting data, it's giving me the above page error.
I have to refresh or press f5 in order to come on same page.
here is my code
$(document).ready(function() {
$("input").prop('required', true);
/*---------------------------------------------------------*/
$(".next_btn").click(function() { // Function Runs On NEXT Button Click
$(this).parent().next().fadeIn('slow');
$(this).parent().css({
'display': 'none'
});
// Adding Class Active To Show Steps Forward;
$('.active').next().addClass('active');
});
$(".pre_btn").click(function() { // Function Runs On PREVIOUS Button Click
$(this).parent().prev().fadeIn('slow');
$(this).parent().css({
'display': 'none'
});
// Removing Class Active To Show Steps Backward;
$('.active:last').removeClass('active');
});
});
#import url(http://fonts.googleapis.com/css?family=Droid+Serif);
/* Above line is to import google font style */
.content {
width: 960px;
margin: 20px auto;
}
.main {
float: left;
width: 650px;
margin-top: 80px;
}
#progressbar {
margin: 0;
padding: 0;
font-size: 18px;
}
.active {
color: red;
}
fieldset {
display: none;
width: 350px;
padding: 20px;
margin-top: 50px;
margin-left: 85px;
border-radius: 5px;
box-shadow: 3px 3px 25px 1px gray;
}
#first {
display: block;
width: 350px;
padding: 20px;
margin-top: 50px;
border-radius: 5px;
margin-left: 85px;
box-shadow: 3px 3px 25px 1px gray;
}
input[type=text],
input[type=password],
select {
width: 100%;
margin: 10px 0;
height: 40px;
padding: 5px;
border: 3px solid rgb(236, 176, 220);
border-radius: 4px;
}
textarea {
width: 100%;
margin: 10px 0;
height: 70px;
padding: 5px;
border: 3px solid rgb(236, 176, 220);
border-radius: 4px;
}
input[type=submit],
input[type=button] {
width: 120px;
margin: 15px 25px;
padding: 5px;
height: 40px;
background-color: sienna;
border: none;
border-radius: 4px;
color: white;
font-family: 'Droid Serif', serif;
}
h2,
p {
text-align: center;
font-family: 'Droid Serif', serif;
}
li {
margin-right: 52px;
display: inline;
color: #c1c5cc;
font-family: 'Droid Serif', serif;
}
p.eml {
color: red;
font-size: 17px;
font-family: sans-serif;
font-weight: bold;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<?php
$link=mysqli_connect("localhost","root","sm123#",'crud');
if(isset($_POST["btnsave"]))
{
$email=$_POST["email"];
$password=$_POST["pass"];
$qry="insert tbusr values(null,'$email','$password')";
$res=mysqli_query($link,$qry);
if(mysqli_affected_row($link)==1)
{
echo "Data inserted";
}
else
{
echo "Not";
}
}
?>
<!DOCTYPE html>
<html>
<head>
<title>Myform</title>
<meta content="noindex, nofollow" name="robots">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link href="style.css" rel="stylesheet" type="text/css">
<script src="custom.js"></script>
<script>
$(document).ready(function() {
$("#email").change(function() {
var a = $("#email").val();
$('.eml').empty();
$('.eml').append(a);
console.log(a);
});
});
</script>
</head>
<body>
<div class="content">
<!-- Multistep Form -->
<div class="main">
<form action="index.php" class="regform" method="post">
<!-- Progress Bar -->
<ul id="progressbar">
<li class="active">Create Account</li>
<li>Please View link</li>
<li>Confirm Your Details</li>
</ul>
<!-- Fieldsets -->
<fieldset id="first">
<h2 class="title">Create your account</h2>
<p class="subtitle">Step 1</p>
<input class="text_field" name="email" placeholder="Email" type="text" id="email">
<input class="text_field" name="pass" placeholder="Password" type="password">
<input class="text_field" name="cpass" placeholder="Confirm Password" type="password">
<input class="next_btn" name="next" type="button" value="Next">
</fieldset>
<fieldset>
<h2 class="title">Please View link</h2>
<p class="subtitle">Step 2</p>
<p>Please click On <b>View</b> to open verfication link tab</p>
<input class="pre_btn" type="button" value="Previous">
<input class="next_btn" name="next" type="button" value="View">
</fieldset>
<fieldset>
<h2 class="title">Confirm Your Details</h2>
<p class="subtitle">Step 3</p>
<p>Please click here to confirm your email address</p>
<p class="eml"></p>
<input class="pre_btn" type="button" value="Previous">
<input class="submit_btn" name="btnsave" type="submit" value="Confirm Email">
</fieldset>
</form>
</div>
</div>
</body>
</html>

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";
}

Pre Check the radio button according to value of Day

I have assigned content to few Radio buttons which when clicked will show content of it. I would like to pre-check the tab button according to day.
For eg. if today is Sun, on page load it would show contents of Sunday and if it is Tuesday, then on page load it would show the contents of Tuesday.
My code below:
#import url('https://fonts.googleapis.com/cssfamily=Open+Sans:400,600,700');
* {
margin: 0;
padding: 0;
}
body {
padding: 50px;
background: #E5E4E2;
}
.tabinator {
background: #fff;
padding: 15px;
font-family: Open Sans;
}
.tabinator input {
display: none;
}
.tabinator label {
box-sizing: border-box;
display: inline-block;
padding: 15px 25px;
color: #ccc;
margin-bottom: -1px;
margin-left: -1px;
}
.tabinator label:before {
content: '';
display: block;
width: 100%;
height: 15px;
background-color: #fff;
position: absolute;
bottom: -11px;
left: 0;
z-index: 10;
}
.tabinator label:hover {
color: #888;
cursor: pointer;
}
.tabinator input:checked+label {
position: relative;
color: #000;
background: #fff;
border: 1px solid #bbb;
border-bottom: 1px solid #fff;
border-radius: 5px 5px 0 0;
}
.tabinator input:checked+label:after {
display: block;
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
box-shadow: 0 0 15px #939393;
}
#content1,
#content2,
#content3,
#content4,
#content5,
#content6,
#content7 {
display: none;
border-top: 1px solid #bbb;
padding: 15px;
}
#tab1:checked~#content1,
#tab2:checked~#content2,
#tab3:checked~#content3,
#tab4:checked~#content4,
#tab5:checked~#content5,
#tab6:checked~#content6,
#tab7:checked~#content7 {
display: block;
box-shadow: 0 0 15px #939393;
}
<div class="tabinator">
<input type="radio" id="tab1" name="tabs" checked>
<label for="tab1">Sunday</label>
<input type="radio" id="tab2" name="tabs">
<label for="tab2">Monday</label>
<input type="radio" id="tab3" name="tabs">
<label for="tab3">Tuesday</label>
<input type="radio" id="tab4" name="tabs">
<label for="tab4">Wednesday</label>
<input type="radio" id="tab5" name="tabs">
<label for="tab5">Thursday</label>
<input type="radio" id="tab6" name="tabs">
<label for="tab6">Friday</label>
<input type="radio" id="tab7" name="tabs">
<label for="tab7">Saturday</label>
<div id="content1">
<p>
This is Sunday
</p>
</div>
<div id="content2">
<p>This is Monday
</p>
</div>
<div id="content3">
<p>This is Tuesday
</p>
</div>
<div id="content4">
<p>This is Wednesday
</p>
</div>
<div id="content5">
<p>This is Thursday
</p>
</div>
<div id="content6">
<p>
This is Friday
</p>
</div>
<div id="content7">
<p>
This is Saturday
</p>
</div>
</div>
So you can do this:
Get the current day - this matches the index of the list of radio buttons - so you can do this:
$('.tabinator input[name=tabs]').eq(new Date().getDay()).prop('checked', true);
A few of the labels for the radio weren't correctly labelled - fixed that too.
If you want to show the tab for tomorrow, you can try this:
$('.tabinator input[name=tabs]').eq(new Date().getDay() + 1).prop('checked', true);
See demo below:
$(document).ready(function(){
$('.tabinator input[name=tabs]') // get all tabs
.eq(new Date().getDay()) // select the current tab
.prop('checked', true); // check it
});
#import url('https://fonts.googleapis.com/cssfamily=Open+Sans:400,600,700');
* {
margin: 0;
padding: 0;
}
body {
padding: 50px;
background: #E5E4E2;
}
.tabinator {
background: #fff;
padding: 15px;
font-family: Open Sans;
}
.tabinator input {
display: none;
}
.tabinator label {
box-sizing: border-box;
display: inline-block;
padding: 15px 25px;
color: #ccc;
margin-bottom: -1px;
margin-left: -1px;
}
.tabinator label:before {
content: '';
display: block;
width: 100%;
height: 15px;
background-color: #fff;
position: absolute;
bottom: -11px;
left: 0;
z-index: 10;
}
.tabinator label:hover {
color: #888;
cursor: pointer;
}
.tabinator input:checked+label {
position: relative;
color: #000;
background: #fff;
border: 1px solid #bbb;
border-bottom: 1px solid #fff;
border-radius: 5px 5px 0 0;
}
.tabinator input:checked+label:after {
display: block;
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
box-shadow: 0 0 15px #939393;
}
#content1,
#content2,
#content3,
#content4,
#content5,
#content6,
#content7 {
display: none;
border-top: 1px solid #bbb;
padding: 15px;
}
#tab1:checked~#content1,
#tab2:checked~#content2,
#tab3:checked~#content3,
#tab4:checked~#content4 #tab5:checked~#content5,
#tab6:checked~#content6,
#tab7:checked~#content7 {
display: block;
box-shadow: 0 0 15px #939393;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="tabinator">
<input type="radio" id="tab1" name="tabs" checked>
<label for="tab1">Sunday</label>
<input type="radio" id="tab2" name="tabs">
<label for="tab2">Monday</label>
<input type="radio" id="tab3" name="tabs">
<label for="tab3">Tuesday</label>
<input type="radio" id="tab4" name="tabs">
<label for="tab4">Wednesday</label>
<input type="radio" id="tab5" name="tabs">
<label for="tab5">Thursday</label>
<input type="radio" id="tab6" name="tabs">
<label for="tab6">Friday</label>
<input type="radio" id="tab7" name="tabs">
<label for="tab7">Saturday</label>
<div id="content1">
<p>
This is Sunday
</p>
</div>
<div id="content2">
<p>This is Monday
</p>
</div>
<div id="content3">
<p>This is Tuesday
</p>
</div>
<div id="content4">
<p>This is Wednesday
</p>
</div>
<div id="content5">
<p>This is Thursday
</p>
</div>
<div id="content6">
<p>
This is Friday
</p>
</div>
<div id="content7">
<p>
This is Saturday
</p>
</div>
</div>

View divs when click buttons

As you can see on this website http://www.templategarden.com/preview/tempo/template/index.html In the portfolio section different divs appear on clicking the buttons. And the size of the main Container also increases or decreases accordingly. I guess JS/Jquery will be required. Please help guys I am new to web development and am stuck here.
.wrap {
max-width: 1150px;
margin-left: auto;
margin-right: auto;
}
#portone {
text-align: center;
margin-top: 80px;
}
.porttwo {
font-size: 34px;
color: #222222;
font-family: 'Montserrat', sans-serif;
font-weight: 700;
letter-spacing: -1px;
text-transform: uppercase;
}
#portthree {
font-size: 16px;
color: #888888;
font-family: 'Open Sans', sans-serif;
font-weight: 400;
line-height: 2.1;
}
/*buttons starts here*/
#select {
width: 660px;
height: 45px;
margin-left: auto;
margin-right: auto;
margin-top: 40px;
}
.buttonz {
margin-left: 9px;
padding: 10px 22px;
font-size: 12px;
font-weight: normal;
line-height: 20px;
color: #222222;
border-radius: 4px;
text-transform: uppercase;
font-family: 'Montserrat', sans-serif;
background-color: #f7f7f7;
border: 1px solid #f7f7f7;
cursor: pointer;
}
.buttonz:hover {
background-color: #7cc576;
border-color: #7cc576;
color: #fff;
transition: ease 0.5s;
}
/*buttons end here*/
#portfolio_img {
margin-top: 50px;
}
.project {
margin-left: 16px;
margin-bottom: 90px;
}
<section class="wrap">
<div id="portone">
<h1 class="porttwo" id="portfolio">portfolio</h1>
<h3 id="portthree">Fresh portfolio designs that will keep you wanting you more.</h3> </div>
<!--buttons starts here-->
<div id="select">
<input class="buttonz" name="button" type="button" value="ALL">
<input class="buttonz" name="button" type="button" value="BRANDING">
<input class="buttonz" name="button" type="button" value="WEB DESIGN">
<input class="buttonz" name="button" type="button" value="PRINT DESIGN">
<input class="buttonz" name="button" type="button" value="PHOTOGRAPHY"> </div>
<!--buttons end here-->
<!--portfolio images starts here-->
<div id="portfolio_img">
<img class="project" src="http://planusdesign.com/images/Portfolio-pic1.jpg" alt="project-img">
<img class="project" src="http://planusdesign.com/images/Portfolio-pic2.jpg" alt="project-img">
<img class="project" src="http://planusdesign.com/images/Portfolio-pic3.jpg" alt="project-img">
<img class="project" src="http://planusdesign.com/images/Portfolio-pic4.jpg" alt="project-img">
<img class="project" src="http://planusdesign.com/images/Portfolio-pic5.jpg" alt="project-img">
<img class="project" src="http://planusdesign.com/images/Portfolio-pic6.jpg" alt="project-img">
</div>
<!--portfolio images ends here -->
</section>
JS/JQ not required. Check this. U can change the attributes all, web, app, brand belonging to the list
<div class="item" all brand web>1</div>
.item {
display: inline-block;
width: 100px;
height: 100px;
margin: 0 16px 16px 0;
line-height: 100px;
text-align: center;
color: #08f;
font-size: 100px;
background-color: lightblue;
}
.item,
input[type="radio"] {
display: none;
}
label {
display: inline-block;
border: 1px solid #000;
padding: 1em;
margin-bottom: 16px;
}
label:hover {
background-color: blue;
color: #fff;
}
#rball:checked ~ .item[all] {
display: inline-block;
}
#rbweb:checked ~ .item[web] {
display: inline-block;
}
#rbapp:checked ~ .item[app] {
display: inline-block;
}
#rbbrand:checked ~ .item[brand] {
display: inline-block;
}
hr {
border: transparent;
padding: 0;
margin: 0;
}
<input name="rb" type="radio" id="rball" checked><label for="rball">All</label>
<input name="rb" type="radio" id="rbweb"><label for="rbweb">Web Design</label>
<input name="rb" type="radio" id="rbapp"><label for="rbapp">App Development</label>
<input name="rb" type="radio" id="rbbrand"><label for="rbbrand">Branding</label>
<hr>
<div class="item" all brand web>1</div>
<div class="item" all app>2</div>
<div class="item" all brand>3</div>
<div class="item" all web>4</div>
<div class="item" all app web>5</div>
<div class="item" all web>6</div>
<div class="item" all app>7</div>
<div class="item" all web>8</div>

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