Select value with querySelectorAll - javascript

Beginner in javascript,
I would like to calculate the subtotals total in javascript and put it in my <p> #total.
Here is my code :
<?php
include 'main.php';
check_loggedin($pdo);
$minerals = $pdo->query('SELECT * FROM products WHERE category = "mineral"');
$alcools = $pdo->query('SELECT * FROM products WHERE category = "alcool"');
$foods = $pdo->query('SELECT * FROM products WHERE category = "food"');
?>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,minimum-scale=1">
<title>Caisse</title>
<link href="style.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.1/css/all.css">
</head>
<body class="loggedin">
<?php include 'navigation.php' ;?>
<main>
<div class="content">
<h2>Caisse</h2>
<div class="flex-row">
<div class="content-block col-8">
<form action="" method="post" class="">
<div class="table">
<h3>Minérales</h3>
<table>
<colgroup>
<col width="5%">
<col width="35%">
<col width="20%">
<col width="20%">
<col width="20%">
</colgroup>
<thead>
<tr>
<td>QTY</td>
<td class="center">Product</td>
<td>Unit</td>
<td>Price</td>
<td>Total</td>
</tr>
</thead>
<tbody>
<?php if (!$minerals): ?>
<tr>
<td colspan="5" style="text-align:center">There are no minerals</td>
</tr>
<?php endif; ?>
<?php foreach ($minerals as $mineral): ?>
<tr>
<td><input type="text" class="qty" name="qty_mineral" onblur=Calcul_total() oninput="Calcul_Stotal(this)"></td>
<td class="center"><?=$mineral['name']?></td>
<td><?=$mineral['unit']?></td>
<td class="price"><?=$mineral['price']?></td>
<td class="total"></td>
</tr>
<?php endforeach; ?>
</tbody>
</table>
</div>
<div class="table">
<h3>Alcool</h3>
<table>
<colgroup>
<col width="5%">
<col width="35%">
<col width="20%">
<col width="20%">
<col width="20%">
</colgroup>
<thead>
<tr>
<td>QTY</td>
<td class="center">Product</td>
<td>Unit</td>
<td>Price</td>
<td>Total</td>
</tr>
</thead>
<tbody>
<?php if (!$alcools): ?>
<tr>
<td colspan="5" style="text-align:center">There are no alcools</td>
</tr>
<?php endif; ?>
<?php foreach ($alcools as $alcool): ?>
<tr>
<td><input type="text" class="qty" name="qty_alcool" onblur=Calcul_total() oninput="Calcul_Stotal(this)"></td>
<td class="center"><?=$alcool['name']?></td>
<td><?=$alcool['unit']?></td>
<td class="price"><?=$alcool['price']?></td>
<td class="total"></td>
</tr>
<?php endforeach; ?>
</tbody>
</table>
</div>
</form>
</div>
<div class="content-block col-2 flex-col">
<div class="grow"></div>
<button>Total</button>
<div class="display flex-row">
<p id="total"></p>
</div>
</div>
</div>
</div>
</main>
</body>
</html>
<script>
function Calcul_Stotal(target) {
const parent = target.closest('tr');
var qty = parent.querySelector('.qty').value;
var price = parent.querySelector('.price').textContent;
_total = qty * price;
parent.querySelector('.total').innerText = _total;
}
function Calcul_total() {
var total = document.querySelectorAll('.total');
total.forEach(function(value){
console.log(value);
});
document.getElementById('total').innerText = "";
}
</script>
I tried to select all my subtotals (.total) with querySelectorAll. But I can't get only the value in the array.
How would it be possible to retrieve only the value in the array without html tags?
Is there any other solution than the querySelectorAll?
Waiting for an answer, thank you for your help.


As suggested also by someone in the comments, for sure you were missing the logic to perform the sum in your Calcul_total function.
I changed your html so that instead of having php logics inside looping through minerals and alchools elements, it just hosts 2 specific instances of mineral (gold) and alchool (vodka) with prefilled quantity and price values.
Plus I added the handling of the isNaN scenario so that both the subtotals and total don't get messed up when the number can't be computer for invalid input. In that step I also made sure to format the number to fixed point notation having 2 digits after decimal separator. Consider that you might have surprises coming from the floating point maths.
Anyway as a very important reccomendation, I suggest you to use parseFloat when reading numbers from text so that they will be explicitely converted. That could be ignored because in many circumstances the type coercion will work in a transparent way.. but better makes things clear in my opinion.
function Calcul_Stotal(target) {
const parent = target.closest('tr');
const qty = parseFloat( parent.querySelector('.qty').value );
const price = parseFloat( parent.querySelector('.price').textContent );
let _total = qty * price;
if(isNaN(_total))
_total = '-';
else
_total.toFixed(2);
parent.querySelector('.total').innerText = _total;
}
function Calcul_total() {
const total = document.querySelectorAll('.total');
let sum = 0;
total.forEach(function(value) {
let thisTotal = parseFloat(value.innerText);
if (isNaN(thisTotal)) thisTotal = 0;
sum += thisTotal;
});
if(isNaN(sum))
sum = '-';
else
sum = sum.toFixed(2)
document.getElementById('total').innerText = sum;
}
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,minimum-scale=1">
<title>Caisse</title>
<link href="style.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.1/css/all.css">
</head>
<body class="loggedin">
<?php include 'navigation.php' ;?>
<main>
<div class="content">
<h2>Caisse</h2>
<div class="flex-row">
<div class="content-block col-8">
<form action="" method="post" class="">
<div class="table">
<h3>Minérales</h3>
<table>
<colgroup>
<col width="5%">
<col width="35%">
<col width="20%">
<col width="20%">
<col width="20%">
</colgroup>
<thead>
<tr>
<td>QTY</td>
<td class="center">Product</td>
<td>Unit</td>
<td>Price</td>
<td>Total</td>
</tr>
</thead>
<tbody>
<tr>
<td>
<input
type="text"
class="qty"
name="qty_mineral"
onblur=Calcul_total()
oninput="Calcul_Stotal(this)">
</td>
<td class="center">
Gold
</td>
<td>
13
</td>
<td class="price">
75.22
</td>
<td class="total"></td>
</tr>
</tbody>
</table>
</div>
<div class="table">
<h3>Alcool</h3>
<table>
<colgroup>
<col width="5%">
<col width="35%">
<col width="20%">
<col width="20%">
<col width="20%">
</colgroup>
<thead>
<tr>
<td>QTY</td>
<td class="center">Product</td>
<td>Unit</td>
<td>Price</td>
<td>Total</td>
</tr>
</thead>
<tbody>
<tr>
<td>
<input
type="text"
class="qty"
name="qty_alcool"
onblur="Calcul_total()"
oninput="Calcul_Stotal(this)">
</td>
<td class="center">
Vodka
</td>
<td>
65
</td>
<td class="price">
14.65
</td>
<td class="total"></td>
</tr>
</tbody>
</table>
</div>
</form>
</div>
<hr>
<div class="content-block col-2 flex-col">
<div class="grow"></div>
<button>Total</button>
<div class="display flex-row">
<p id="total"></p>
</div>
</div>
</div>
</div>
</main>
</body>
</html>

Related

HTML/JS My "Name:" field will not submit to output form onclick=

My "sign out" Name: form will not populate/output to the "Name" column in the chart under my forms. My time, drop down boxes and sign in/sign out buttons all work but even if I change the "id" to something like "tname" it still won't populate. I'm interested in ideas for a workaround if nothing else can be done to solve this. I will list my code below. Please advise.
<form name="SIGN IN" id="form1" value="1" border="5" align="center">
<h4><br></strong>
<table align="center" border="5">
<tr>
<td><label for="Name">Name:</label></tr< /td>
<input list="Names" name="Name" id="fname">
<tr>
<td><input type="button" value="SIGN IN" onclick="display()" /></td>
</tr>
<form name="SIGN OUT" id="form2" value="1" border="5">
<tr>
<td>Name:<input id="fname2"> <br></td>
</tr>
</form>
<tr>
<td><input type="button" value="SIGN OUT" onclick="display()" /></td>
</tr>
<table width="400px" align="center" colspan="40" table border="5">
<thead>
<tr style="background-color:#8FBC8F;" id='header'>
<td align="center"><b>Name</b></td>
<td align="center"><b>Company</b></td>
<td align="center" class="wide"><b>Time In</b></td>
<td align="center" class="wide"><b>Time Out</b></td>
<td align="center" class="wide"><b>Description of Work</b></td>
</tr>
</thead>
<tbody>
<template id="row">
<tr style="background-color:#8F8FBC;" class="data">
<td align="center">
<div class="displayarea"></div>
</td>
<td align="center">
<div class="displayarea1"></div>
</td>
<td align="center">
<div class="displayarea2"></div>
</td>
<td align="center">
<div class="displayarea3"></div>
</td>
<td align="center">
<div class="displayarea4"></div>
</td>
</tr>
</template>
</tbody>
</table>
function alternateGetValue() {
const Items = [...document.querySelectorAll('.data')]
.map(row => [...row.querySelectorAll('td>div')]
.map(d => d.textContent).join(',')
).join('\n');
console.log(Items);
return Items;
}
function display() {
const template = document.getElementById("row");
const clone = template.content.cloneNode(true);
const additem = (dest, src) => {
const s = document.querySelector(src);
clone.querySelector(dest).innerHTML = s.value;
s.value = "";
};
additem(".displayarea", "#fname");
additem(".displayarea1", "#lname");
additem(".displayarea2", "#sname");
additem(".displayarea3", "#pname");
additem(".displayarea4", "#jname");
template.insertAdjacentElement('beforebegin', clone.firstElementChild);
}
function destroyClickedElement(event) {
document.body.removeChild(event.target);
}

Considering the code provided, you need to get value from input with id #fname2 in case of SIGN OUT. You can either call separate functions on SIGN IN and SIGN OUT, or you can pass a value to display() function, based on which you can determine which input id to get value from. Below is the implementation of the second approach.
function alternateGetValue() {
const Items = [...document.querySelectorAll('.data')]
.map(row => [...row.querySelectorAll('td>div')]
.map(d => d.textContent).join(',')
).join('\n');
console.log(Items);
return Items;
}
function display(isSignOut) {
const template = document.getElementById("row");
const clone = template.content.cloneNode(true);
const additem = (dest, src) => {
const s = document.querySelector(src);
clone.querySelector(dest).innerHTML = s.value;
s.value = "";
};
additem(".displayarea", isSignOut ? "#fname2" : "#fname");
template.insertAdjacentElement('beforebegin', clone.firstElementChild);
}
function destroyClickedElement(event) {
document.body.removeChild(event.target);
}
<table align="center" border="5">
<form name="SIGN IN" id="form1" value="1" border="5" align="center">
<tr>
<td>
<label for="Name">Name:</label>
<input list="Names" name="Name" id="fname">
</td>
</tr>
<tr>
<td align="center">
<input type="button" value="SIGN IN" onclick="display(false)" />
</td>
</tr>
</form>
<form name="SIGN OUT" id="form2" value="1" border="5" align="center">
<tr>
<td>Name:<input id="fname2"> <br></td>
</tr>
</form>
<tr>
<td align="center">
<input type="button" value="SIGN OUT" onclick="display(true)" />
</td>
</tr>
</table>
<table width="400px" align="center" colspan="40" table border="5">
<thead>
<tr style="background-color:#8FBC8F;" id='header'>
<td align="center"><b>Name</b></td>
<td align="center"><b>Company</b></td>
<td align="center" class="wide"><b>Time In</b></td>
<td align="center" class="wide"><b>Time Out</b></td>
<td align="center" class="wide"><b>Description of Work</b></td>
</tr>
</thead>
<tbody>
<template id="row">
<tr style="background-color:#8F8FBC;" class="data">
<td align="center">
<div class="displayarea"></div>
</td>
<td align="center">
<div class="displayarea1"></div>
</td>
<td align="center">
<div class="displayarea2"></div>
</td>
<td align="center">
<div class="displayarea3"></div>
</td>
<td align="center">
<div class="displayarea4"></div>
</td>
</tr>
</template>
</tbody>
</table>

jQuery selector exclude child table

Here is the jQuery script try to remove the first column of a html table
var order_table = $('.hor-scroll').eq(1);
//alert(order_table.html());
var order_table_copy = order_table;
order_table_copy.find(".order-tables th:first-child").remove();
order_table_copy.find(".order-tables td:first-child").remove();
but above script also remove the th, td of qty-table
the html
<table cellspacing="0" class="data order-tables" style="width: 100%;">
<colgroup>
<col>
<col width="1">
<col width="1">
<col width="1">
<col width="1">
<col width="1">
<col width="1">
<col width="1">
<col width="1">
<col width="1">
</colgroup>
<thead>
<tr class="headings">
<th width="1">Localisation</th>
<th>Image</th>
<th>Product</th>
<th>Sku</th>
<th><span class="nobr">Item Status</span></th>
<th>Unit Price</th>
<th class="a-center">Qty</th>
<th>Subtotal</th>
<th>Marge</th>
</tr>
</thead>
<tbody class="even">
<tr class="border">
<td class="a-left"></td>
<td class="a-center">
<img src="" width="100px">
</td>
<td class="a-left">Laser Pants</td>
<td class="a-left">test</td>
<td class="a-center">Mixed</td>
<td class="a-right">
<span class="price-excl-tax">
<span class="price">$64.99</span>
</span>
<br>
</td>
<td>
<table cellspacing="0" class="qty-table">
<tbody>
<tr>
<td>Ordered</td>
<td><strong>100</strong></td>
</tr>
<tr>
<td>Invoiced</td>
<td><strong>100</strong></td>
</tr>
<tr>
<td>Refunded</td>
<td><strong>9</strong></td>
</tr>
</tbody>
</table>
</td>
<td class="a-right">
<span class="price-excl-tax">
<span class="price">$6,499.00</span>
</span>
<br>
</td>
<td class="a-center">
0<span>%</span>
</td>
</tr>
</tbody>
<tbody class="odd">
<tr class="border">
<td class="a-left"></td>
<td class="a-center">
<img src="" width="100px">
</td>
<td class="a-left">Laser Hoody</td>
<td class="a-left">test</td>
<td class="a-center">Invoiced</td>
<td class="a-right">
<span class="price-excl-tax">
<span class="price">$84.99</span>
</span>
<br>
</td>
<td>
<table cellspacing="0" class="qty-table">
<tbody>
<tr>
<td>Ordered</td>
<td><strong>100</strong></td>
</tr>
<tr>
<td>Invoiced</td>
<td><strong>100</strong></td>
</tr>
</tbody>
</table>
</td>
<td class="a-right">
<span class="price-excl-tax">
<span class="price">$8,499.00</span>
</span>
<br>
</td>
<td class="a-center">
0<span>%</span>
</td>
</tr>
</tbody>
</table>
but i can't exclude the qty-table, i had tried so many different but not work.

Try order_table_copy.find(".order-tables th:first-child:not(.qty-table)")
Also look into :first-of-type. And also remember that jQuery selectors returns an array. So if all else fails, you can always use the js filter function of arrays.
Update: To avoid the td the the .qty-table, make sure that the selected td is not a td under the .qty-table
order_table_copy.find(".order-tables tr td:first-child:not(.qty-table td)").remove();

HTML: Totaling columns

I am taking in the data in from an sql statement and throwing it into a table.
I am trying to create a subtotal for the table that I can then send to a checkout page using a java servlet. Problem is that I am having issues getting the subtotal working after going through several examples on stackoverflow.
Thank you for your time.
<html>
<head>
<link rel="stylesheet" href="resources/css/main.css">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script type="text/javascript" src="resources/scripts/jquery-1.8.2.min.js"></script>
<title>Home Page</title>
</head>
<body>
<br>
<br>
<script>
(function (global) {
document.getElementById("output").value = global.localStorage.getItem("mySharedData");
}(window));
</script>
<sql:setDataSource var="snapshot" driver="com.mysql.jdbc.Driver"
url="jdbc:mysql://localhost:3306/sakila"
user="root" password="nbuser"/>
<sql:query dataSource="${snapshot}" var="result">
Select F.title, (F.rental_rate * F.rental_duration) as 'Price'
from cart as C
join cartofitems as CI
on CI.cart_id = C.cart_id
join film as F
on CI.film_id = F.film_id
</sql:query>
<div align="center">
<table width="850" style="BACKGROUND-COLOR: #FFFFFF;" border="1">
<tr>
<td align="center">
<img src="images/cart.png">
</td>
</tr>
<tr>
<td align="center" colspan="3">
<table width="650">
<tr>
<td>
<div align="justify" style="color:#3e160e;">
This is a custom HTML header. This header may contain any HTML code, text,
graphics, active content such as dropdown menus, java, javascript, or other
content that you would like to display at the top of your cart pages. You create
custom HTML header yourself and specify its location in the CustomCart Administrator.
Also note the custom wallpaper (brown striped background), this is uploaded via the
administrator. You may change the wallpaper any time you wish to change the look of
your cart.
</div>
</td>
</tr>
</table>
</td>
<tr>
<tr>
</tr>
</table>
</div>
<div align="center">
<form action="checkout.jsp" method="post" border="">
<table width="850" border="1" class="cart">
<thead>
<tr>
<th>Action</th>
<th>Movie Title</th>
<th>Price</th>
</tr>
</thead>
<tbody>
<c:forEach items="${result.rows}" var="cart">
<tr>
<td>Delete</td>
<td><c:out value="${cart.title}" /></td>
<td class="price"><c:out value="${cart.Price}" /></td>
</tr>
</c:forEach>
<tr class="totalColumn">
<td colspan="2" align="right" ><b>Subtotal: </b></td>
<td align="right" ><b><span id="subtotal"></span></b></td>
<script language="javascript" type="text/javascript">
var tds = document.getElementById('cart').getElementsByTagName('td');
var sum = 0;
for (var i = 0; i < tds.length; i++) {
if (tds[i].className == 'price') {
sum += isNaN(tds[i].innerHTML) ? 0 : parseInt(tds[i].innerHTML);
}
}
document.getElementById('price').innerHTML += '<tr><td>' + sum + '</td><td>total</td></tr>';
</script>
</tr>
</tbody>
</table>
<table width="850" border="1">
<tr>
<div style="width:650px;">
<button type="submit" name="your_name" value="totalCost" class="loginbtn">Checkout Cart</button>
</form>
<p><form action="faces/index.xhtml" method="post">
<button type="submit" name="your_name" value="your_value" class="adminloginbtn">Back To Search</button>
</form>
</div>
</tr>
</tbody>
</table>
</body>
</html>

How to add one picture to the left side of HTML page?

I'm trying to add one picture to the left side of this page I know basic of HTML. Any suggestion?
Following is not woking? Do I need two container or something wrong?
<?
session_start();
$_SESSION['usertmp'];
$_SESSION['emailtmp'];
if(strlen($_SESSION['usertmp'])<1 ||is_null($_SESSION['usertmp']))
{
$_SESSION['usertmp'] = "";
}
if(strlen($_SESSION['emailtmp'])<1 ||is_null($_SESSION['emailtmp']))
{
$_SESSION['emailtmp'] = "";
}
?>
<!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 http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Show Information</title>
<style type="text/css">
html, body {height:100%; margin:0; padding:0;}
#page-background {position:fixed; top:0; left:0; width:100%; height:100%;}
#content {position:relative; z-index:1; padding:10px;}
#
</style>
</head>
<body>
<div id="page-background"><img src="images/main.jpg" width="100%" height="100%" alt="Smile"></div>
<left>
<div class="container" style="width:800px" id="content">
<div class="header"><img src="images/logoo.png" width="177" height="61" longdesc="main.php" />
</left>
<center>
<div class="container" style="width:800px" id="content">
<div class="header"><img src="images/logoo.png" width="177" height="61" longdesc="main.php" /> <!-- end .header --></div>
<center>
<div class="content" style="background-image:url(); height:427px; color: #FFF;vertical-align:middle">
<table width="300" border="0" align="center" cellpadding="0" cellspacing="1" bgcolor="">
<tr>
<form name="form1" method="post" action="checklogin.php">
<td>
<table width="100%" border="0" cellpadding="3" cellspacing="1" bgcolor="">
<tr>
<td colspan="3"><strong>Member Login </strong></td>
</tr>
<tr>
<td width="78">Username</td>
<td width="6">:</td>
<td width="294"><input name="myusername" type="text" id="myusername"></td>
</tr>
<tr>
<td>Password</td>
<td>:</td>
<td><input name="mypassword" type="password" id="mypassword"></td>
</tr>
<tr>
<td> </td>
<td> </td>
<td><input type="submit" name="Submit" value="Login"></td>
</tr>
</table>
</td>
</form>
</tr>
</table>
<table width="300" border="0" align="center" cellpadding="0" cellspacing="1" bgcolor="">
<tr>
<form name="form2" method="post" action="signup.php">
<td>
<table width="100%" border="0" cellpadding="3" cellspacing="1" bgcolor="">
<tr>
<td colspan="3"><p> </p>
<p><strong> Sign Up Here</strong></p></td>
</tr>
<tr>
<td width="78">Username</td>
<td width="6">:</td>
<td width="294"><input name="myusername" type="text" id="myusername" value = "<? echo $_SESSION['usertmp'] ?>"></td>
</tr>
<tr>
<td>Enter Password</td>
<td>:</td>
<td><input name="mypassword" type="password" id="mypassword"></td>
</tr>
<tr>
<td>Confirm Password</td>
<td>:</td>
<td><input name="mypassword2" type="password" id="mypassword2"></td>
</tr>
<tr>
<td>Email id</td>
<td>:</td>
<td><input name="myemail" type="text" id="myemail" value = "<? echo $_SESSION['emailtmp'] ?>"></td>
</tr>
<tr>
<td> </td>
<td> </td>
<td><input type="submit" name="Submit" value="Sign Up"></td>
</tr>
</table>
</td>
</form>
</tr>
</table>
</div>
</center>
</center>
</body>
</html>

There are many ways you could achieve what you are looking to do. You should try to simplify your markup if you can. If you want to keep your login credential table in the middle. Here is a way to do it using 3 main divs as 32.98% width columns. Float them left and use the first column for the pic that you want on the left. Here it is in jsbin. Of course the images aren't working bc it doesn't have access to the proper path http://jsbin.com/muxac/1/edit
<!doctype html>
<head>
<meta charset="utf-8">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css" />
<link rel="stylesheet" href="styles/main.css">
<style>
.col-1, .col-2, .col-3 {
width: 32.98%;
float:left;
}
</style>
</head>
<body>
<div class="container">
<header class="header">
</header>
<div class="row">
<div class="col-1">
<div class="header"><img src="images/logoo.png" width="177" height="61" longdesc="main.php" /></div>
</div> <!-- End of COLUMN 1 -->
<div class="col-2"> <!-- Start of COLUMN 2 -->
<div class="header"><img src="images/logoo.png" width="177" height="61" longdesc="main.php" />
<table width="300" border="0" align="center" cellpadding="0" cellspacing="1" bgcolor="">
<tr>
<form name="form1" method="post" action="checklogin.php">
<td>
<table width="100%" border="0" cellpadding="3" cellspacing="1" bgcolor="">
<tr>
<td colspan="3"><strong>Member Login </strong></td>
</tr>
<tr>
<td width="78">Username</td>
<td width="6">:</td>
<td width="294"><input name="myusername" type="text" id="myusername"></td>
</tr>
<tr>
<td>Password</td>
<td>:</td>
<td><input name="mypassword" type="password" id="mypassword"></td>
</tr>
<tr>
<td> </td>
<td> </td>
<td><input type="submit" name="Submit" value="Login"></td>
</tr>
</table>
</td>
</form>
</tr>
</table>
<table width="300" border="0" align="center" cellpadding="0" cellspacing="1" bgcolor="">
<tr>
<form name="form2" method="post" action="signup.php">
<td>
<table width="100%" border="0" cellpadding="3" cellspacing="1" bgcolor="">
<tr>
<td colspan="3"><p> </p>
<p><strong> Sign Up Here</strong></p></td>
</tr>
<tr>
<td width="78">Username</td>
<td width="6">:</td>
<td width="294"><input name="myusername" type="text" id="myusername" value = "<? echo $_SESSION['usertmp'] ?>"></td>
</tr>
<tr>
<td>Enter Password</td>
<td>:</td>
<td><input name="mypassword" type="password" id="mypassword"></td>
</tr>
<tr>
<td>Confirm Password</td>
<td>:</td>
<td><input name="mypassword2" type="password" id="mypassword2"></td>
</tr>
<tr>
<td>Email id</td>
<td>:</td>
<td><input name="myemail" type="text" id="myemail" value = "<? echo $_SESSION['emailtmp'] ?>"></td>
</tr>
<tr>
<td> </td>
<td> </td>
<td><input type="submit" name="Submit" value="Sign Up"></td>
</tr>
</table>
</td>
</form>
</tr>
</table>
</div> <!-- End of COLUMN 2 -->
<div class="col-3"> <!-- COLUMN 3 -->
<!-- You can leave this empty if you want -->
</div>
<div class="row">
<div class="footer">
</div>
</div>
</div>
</div>
</body>
</html>

To position the picture You can use CSS. Here is the code(Insert it in the style attribute of the html tag):
position:absolute;left:0px;top:0px/*Here inserte the necesary pixels to position the picture*/

If what you want is just the header image to be at the top left, put inside the <style> this: .header img {display: inline-block; float: left;}

calculation help needed with javascript target heart rate calculator

So i'm kinda new to javascript and am having an issue with the target heart rate calculator I am trying to create. When I click the calculate button, nothing happens. Can anyone tell me where I'm going wrong?
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"lang="en">
<head>
<link href='http://fonts.googleapis.com/css?family=Nixie+One' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" href="css/workitt.css">
<script>
function initTH(){
document.getElementById("calcButton").onclick = thr;
}
function thr(){
var age = document.getElementById("age").value;
if(age = ""){
document.getElementById("error").innerHTML = "This field is required.";
}
else{
var THRmax = (220-age)*.85;
var THRmin = (220-age)*.7;
document.getElementById("THRzone").innerHTML = THRmin + "-" + THRmax;
}
}
</script>
<title>Workitt</title>
</head>
<body>
<CENTER><div class="header">
<h1><img src="images/workitt-header.jpg" alt=header ></h1>
<div class="navbar">
Home |
Profile |
Create A Workout |
Fitness Accessories
</div>
<p> </p>
</div></CENTER>
<CENTER><div class="body">
<form>
<table class="table1" border="7" bordercolor=WHITE width="250" align="center" bgcolor="#ffffff">
<thead>
<tr>
<th colspan="2"><font size=5>
Target Heart Rate</font>
</th>
</tr>
<tr> </tr>
<tr> </tr>
</thead>
<tbody>
<tr>
<td align="center">
<label for="age">Age:</label>
</td>
<td align="center">
<input type="text" id="age" name="age" size="6"> years
</td>
</tr>
</tbody>
<thead>
<tr>
<th colspan="2" align="center">
<input id="calcButton" type="button" value="calculate" />
<span id="error"></span>
</th>
</tr>
<tr> </tr>
<tr> </tr>
<tr> </tr>
<tr> </tr>
<tr> </tr>
<tr> </tr>
<tr>
<th colspan="2">
Your Target Heart Rate Zone is: <span id="THRzone"></span>
</th>
</tr>
</thead>
</table>
</form>
<p>*Your target heart rate zone is the zone in which your heart rate should be in when exercising to have the most effective workout for improving your fitness and burning calories.</p>
</div></CENTER>
</body>
</html>

The problem with your script, as pointed out in the comments, is that you are never invoking initTH(), so the button click handler is never getting attached to the button.
What the comments fail to note is that you have your script placed before the HTML. In particular, it comes before <input id="calcButton" type="button" value="calculate" />, meaning that if you're not careful when you call document.getElementById("calcButton"), that will return null.
It sounds like what you want to do is add an additional <script> element at the end of the body (right before the close </body> tag) and invoke initTH():
....
<script>
initTH();
</script>
</body>

As others have mentioned, the initTH() function never gets called.
I've made a few changes here:
http://jsfiddle.net/GaryHarrower/j4v7M/
I removed the function, so it will run whenever the button is pressed.
The script also had age = "" this should be age == "" with 2 = signs
Let me know how you get on!
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"lang="en">
<head>
<link href='http://fonts.googleapis.com/css?family=Nixie+One' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" href="css/workitt.css">
<title>Workitt</title>
</head>
<body>
<CENTER>
<div class="header">
<h1><img src="images/workitt-header.jpg" alt=header ></h1>
<div class="navbar">
Home |
Profile |
Create A Workout |
Fitness Accessories
</div>
<p> </p>
</div>
</CENTER>
<CENTER>
<div class="body">
<form>
<table class="table1" border="7" bordercolor=WHITE width="250" align="center" bgcolor="#ffffff">
<thead>
<tr>
<th colspan="2"><font size=5>
Target Heart Rate</font>
</th>
</tr>
<tr> </tr>
<tr> </tr>
</thead>
<tbody>
<tr>
<td align="center">
<label for="age">Age:</label>
</td>
<td align="center">
<input type="text" id="age" name="age" size="6"> years
</td>
</tr>
</tbody>
<thead>
<tr>
<th colspan="2" align="center">
<input id="calcButton" type="button" value="calculate" />
<span id="error"></span>
</th>
</tr>
<tr> </tr>
<tr> </tr>
<tr> </tr>
<tr> </tr>
<tr> </tr>
<tr> </tr>
<tr>
<th colspan="2">
Your Target Heart Rate Zone is: <span id="THRzone"></span>
</th>
</tr>
</thead>
</table>
</form>
<p>*Your target heart rate zone is the zone in which your heart rate should be in when exercising to have the most effective workout for improving your fitness and burning calories.</p>
</div></CENTER>
<script>
document.getElementById("calcButton").onclick = thr;
function thr(){
var age = document.getElementById("age").value;
if(age == ""){
document.getElementById("error").innerHTML = "This field is required.";
}
else
{
var THRmax = (220-age)*.85;
var THRmin = (220-age)*.7;
document.getElementById("THRzone").innerHTML = THRmin + "-" + THRmax;
}
}
</script>
</body>
</html>

Categories