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";
}
Related
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>
I made this log-in and register form in which an onclick submit button of the form its display which form is submitted, left or right to implement it. I have used onclick property and passed a function to it fun() which has one parameter of the type no. So I used two functions fun(0) and fun(1) used to display a message which forms submitted by the user but it does not display the message.
And also I have a problem with the CSS it's not scaling according to the screen size as I used bootstrap for CSS and try the width, position property scale in % but then also it's not working.
function fun(Number n) {
if (n === 1) {
document.getElementsByClassName('m1').style.display = 'none';
} else {
document.getElementsByClassName('m2').style.display = 'none';
}
document.getElementsByClassName('modal').style.display = 'flex';
}
body {
background: linear-gradient(45deg, #fff722, #ff26f9);
font-weight: bold;
letter-spacing: 2px;
font-family: open sans, helvetica neue, Helvetica, Arial, sans-serif;
text-align: center;
}
input[type=radio] {
width: 9%;
}
input, #e {
width: 100%;
}
input[type=submit] {
width: 100%;
background-color: #4CAF50;
color: white;
padding: 14px 20px;
margin: 8px 0;
border: none;
border-radius: 4px;
cursor: pointer;
}
.row {
position: relative;
}
form {
font-size: 20px;
border-bottom: solid 5px #dedfe0;
border-right: solid 5px #dedfe0;
padding: 5px;
width: 500px;
margin: 80px;
}
label {
font-family: arial;
color: #0000ff;
}
#log {
position: absolute;
top: 20px;
right: 20px;
transform: translate(50, 50);
}
button:hover {
opacity: 0.8;
}
.modal, .modal1 {
display: none;
justify-content: center;
align-items: center;
border-radius: 6px;
z-index: 1;
position: absolute;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgba(0, 0, 0, 0.7);
}
.modal-content {
width: 500px;
height: 300px;
background: linear-gradient(45deg, #fff722, #ff26f9);
position: absolute;
text-align: center;
padding: 2%;
justify-content: center;
align-items: center;
border: solid 5px rgba(100, 0, 50, 0.5);
left: 500px;
top: 180px;
}
.close {
position: absolute;
right: 25px;
top: 0;
color: black;
font-size: 50px;
font-weight: bold;
}
.close:hover, .close:focus {
color: red;
cursor: pointer;
}
.animate {
animation: zoom 10000;
}
#keyframes zoom {
from {
transform: scale(0)
}
to {
transform: scale(2)
}
}
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1"><link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</head>
<body>
<div class="row">
<form class="jumbotron" class="column" id="register">
<h1 class="container " style="border: solid 3px grey; color:magenta;
"><b>REGISTER<b></b></h1><br>
<label>First Name:</label><input type="text"><br>
<label>Last Name:</label> <input type="text"><br>
<label>D.O.B:</label> <input type="date"><br>
<label>City:</label> <input type="text"><br>
<label>Mobile No.: </label>
<select style=" width: 20%;">
<option>+91</option>
<option>+92</option>
<option>+93</option>
<option>+94</option>
<option>+95</option>
</select> <input type="text"><br>
<label>Gender:</label>
<div style=" "> <input type="radio" value="Male" name="Gender">Male
<input type="radio" value="Female" name="Gender">Female
<input type="radio" value="Other" name="Gender">Other<br></div>
<label>Employment Status:</label>
<select id="e">
<option>Employed</option>
<option>Unemployed</option>
</select><br><br><br>
<input type="submit" onclick="fun(0)" class="btn-info btn-lg" value=Register>
<input type="reset" class="btn-info btn-lg" value=Reset>
</form>
<div class="column" id="log">
<form class="jumbotron">
<h1 style="border: solid 3px grey; color:magenta;"><b>LOG-IN</b></h1><br>
<label>Email-Id:</label><input type="email"><br>
<label>Username:</label><input type="text"><br>
<label>Password:</label><input type="Password" min,="5"></br><br><br>
<input type="submit" class="btn btn-info btn-lg " onclick="fun(1)" value="LOG-IN">
</form>
</div>
</div>
<nav class="modal">
<div class="modal-content">
<span onclick="document.querySelector('.modal').style.display='none'" class="close">×</span>
<div style="border:solid 5px #dedfe0" class="container">
<h3 class='m1'>Left form submited</h3>
<h3 class='m2'>Right form submited</h3>
</div>
</div>
</nav>
</body>
<script type="text/javascript">
</script>
</html>
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>
    <img src="http://localhost/prosjekt_reiseklubb/images/icons/Flag_of_Brazil.png">   Brasil
    <img src="http://localhost/prosjekt_reiseklubb/images/icons/flag_of_croatia.png">   Kroatia
    <img src="http://localhost/prosjekt_reiseklubb/images/icons/Flag_of_Thailand.png">   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
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>
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