Related
I am doing a department store automation project in rails for the first time, So I am encountering some problems in bill generation. I want to send all the details of the table to my controller where I can calculate cart price and total price. Help me out even if there is some other way to overcome this situation.
<html>
<head>
<style>
* {box-sizing: border-box}
label {
cursor: default;
color:black;
font-size: 15px;
}
.form-row {
padding: 5px 10px;
margin: 5px 0;
}
p {
color:black;
}
h1 {
color:black;
}
/* Set height of body and the document to 100% */
body, html {
height: 100%;
margin: 0;
font-family: Arial;
background-color: white;
}
.container {
padding: 16px;
background-color: white;
text-align: left;
font-size: 15px;
margin-top: 100px;
}
table {
width: 500px;
font-size: 30px;
border: 5px solid blue;
}
th, td {
text-align: left;
padding: 8px;
}
td {
color: black;
}
tr:nth-child(odd){background-color: #ffffb3}
th {
background-color: #4000ff;
color: white;
}
input:invalid + span:after {
content: '✖';
color: #f00;
padding-left: 5px;
}
input:valid + span:after {
content: '✓';
color: #26b72b;
padding-left: 5px;
}
</style>
</head>
<body bgcolor="white">
<div id="POItablediv" class="container">
<form name="genbill" method="get" action="genCartAction">
<table border="1">
<tbody id="POITable">
<tr>
<td>CATEGORY ID</td>
<td>NUMBER OF PRODUCTS</td>
<td>DELETE PRODUCT</td>
<td>ADD PRODUCT</td>
<td>ACTIONS</td>
</tr>
<tr>
<form name="genbill" method="get" action="genCartAction">
<td> <SELECT NAME="cid" >
<% for x in #cid %>
<OPTION VALUE="<%= x %>" ><%= x %></OPTION>
<% end %></SELECT><br>
</td>
<td><input type="text" name="nop"></td>
<td><input type="button" value="DELETE PRODUCT" data-cmd="delRow"></td>
<td><input type="button" value="ADD PRODUCT" data-cmd="insRow"></td>
</tr>
</tbody>
</table></form>
<form name="genbill" method="get" action="genBillAction">
<input type="text" name="bid" readonly hidden="true">
<input type="submit" value="CLICK HERE TO GENERATE BILL" disabled="TRUE">
</form>
</div>
<script>
function tableClicks (e) {
let cmd = e.target.getAttribute('data-cmd');
if (cmd && (cmd in buttonEvents)) {
buttonEvents[cmd](e);
}
return;
}
let table = document.getElementById('POITable');
let buttonEvents = {
insRow: function () {
var newRow = table.rows[1].cloneNode(true);
table.appendChild(newRow);
newRow.firstElementChild.textContent = newRow.rowIndex;
return;
},
delRow: function (e) {
var rowIdx = e.target.closest('tr').rowIndex,
rows = null;
if (rowIdx === 1) return; // Don't delete the first row
table.deleteRow(rowIdx);
// Update row numbers
rows = table.rows;
for (const row of rows) {
let idx = row.rowIndex;
if (idx < 1) continue; // Skip the header row
row.firstElementChild.textContent = idx;
}
return;
}
};
table.addEventListener('click', tableClicks);
</script>
</body>
</html>
If it just to calculate the total price, you should do it in the javascript code, there is not need to make an endpoint just for that...
I have to design the following webpage using HTML, use CSS for styling and JS for validation:
On providing input, the output should be as follows:
The CSS and JS requirements are:
I have written the following code:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
body{
background-color:#99FFFF;
}
h1{
font-style:italic;
font-weight:bold;
text-align:center;
color:Maroon;
}
table{
border-collapse: collapse;
border:5px solid black;
width:30%;
margin-left:35%;
}
tr{
text-align:left;
}
td{
padding:10px;
border:2px solid black;
}
#submitbutton{
margin-left:45%;
}
#discount{
text-align:center;
font-weight:bold;
font-size:25px;
}
#result{
text-align:center;
font-weight:bold;
font-style:italic;
font-size:40px;
color:#FF0000;
}
</style>
<script type="text/javascript">
function validateForm()
{
var x=document.myForm.name.value;
var y=document.myForm.price.value;
var namechar= /^[\sa-zA-Z]+$/;
if(x=="") {alert("Product Name should not be empty");return false;}
else if(y=="") {alert("Product Price should not be empty");return false;}
else if(!/^[a-zA-Z\s]+$/.test(x)) {alert("Product Name should contain only alphabets and space");return false;}
else if(y<1) {alert("Product Price should be a number with value greater than 0");return false;}
else
{
var x=document.myForm.season.value;
var disc;
if(x.match("summer")) disc=10;
else if (x.match("newyear")) disc=5;
else if (x.match("clearance")) disc=15;
document.getElementById("discount").innerHTML="The discount is "+disc+"%";
var p=document.myForm.price.value;
p=p-(p*disc)/100;
document.getElementById("result").innerHTML="The discounted price : Rs "+p;
return true;
}
}
</script>
</head>
<body>
<h1>DISCOUNT PRICE</h1>
<form method="get" name="myForm" onsubmit="return validateForm()">
<table>
<tr>
<td>Product Name</td>
<td>
<input type="text" name="name">
</td>
</tr>
<tr>
<td>Product Price</td>
<td><input type="number" name="price">
</td>
</tr>
<tr>
<td>Season</td>
<td><select name="season">
<option value="summer">SUMMER SALE</option>
<option value="newyear">NEW YEAR SALE</option>
<option value="clearance">CLEARANCE SALE</option>
</select>
</td>
</tr>
</table><br/>
<input type="submit" id="submitbutton" value="GET DISCOUNT PRICE">
</form>
<br/>
<div id="discount"></div>
<br/>
<div id="result"></div>
</body>
</html>
The output is obtained as desired (with some CSS styling errors), but the output does not last. The displayed values in both the div tags vanishes immediately.
How to make sure the output lasts?
Also please help with the CSS styling if possible. How to left align the table by 35% and submit button by 45%??
Obtained output webpage:
That's because the button is of type submit, which forwards theuser to the file that is specified in the <form>-tag. Just return false instead of true and the problem is solved.
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
body {
background-color: #99FFFF;
}
h1 {
font-style: italic;
font-weight: bold;
text-align: center;
color: Maroon;
}
table {
border-collapse: collapse;
border: 5px solid black;
width: 30%;
margin-left: 35%;
}
tr {
text-align: left;
}
td {
padding: 10px;
border: 2px solid black;
}
#submitbutton {
margin-left: 45%;
}
#discount {
text-align: center;
font-weight: bold;
font-size: 25px;
}
#result {
text-align: center;
font-weight: bold;
font-style: italic;
font-size: 40px;
color: #FF0000;
}
</style>
<script type="text/javascript">
function validateForm() {
var x = document.myForm.name.value;
var y = document.myForm.price.value;
var namechar = /^[\sa-zA-Z]+$/;
if (x == "") {
alert("Product Name should not be empty");
return false;
} else if (y == "") {
alert("Product Price should not be empty");
return false;
} else if (!/^[a-zA-Z\s]+$/.test(x)) {
alert("Product Name should contain only alphabets and space");
return false;
} else if (y < 1) {
alert("Product Price should be a number with value greater than 0");
return false;
} else {
var x = document.myForm.season.value;
var disc;
if (x.match("summer")) disc = 10;
else if (x.match("newyear")) disc = 5;
else if (x.match("clearance")) disc = 15;
document.getElementById("discount").innerHTML = "The discount is " + disc + "%";
var p = document.myForm.price.value;
p = p - (p * disc) / 100;
document.getElementById("result").innerHTML = "The discounted price : Rs " + p;
return false;
}
}
</script>
</head>
<body>
<h1>DISCOUNT PRICE</h1>
<form method="get" name="myForm" onsubmit="return validateForm()">
<table>
<tr>
<td>Product Name</td>
<td>
<input type="text" name="name">
</td>
</tr>
<tr>
<td>Product Price</td>
<td><input type="number" name="price">
</td>
</tr>
<tr>
<td>Season</td>
<td><select name="season">
<option value="summer">SUMMER SALE</option>
<option value="newyear">NEW YEAR SALE</option>
<option value="clearance">CLEARANCE SALE</option>
</select>
</td>
</tr>
</table><br/>
<input type="submit" id="submitbutton" value="GET DISCOUNT PRICE">
</form>
<br/>
<div id="discount"></div>
<br/>
<div id="result"></div>
</body>
</html>
I have generated a JS calculator but have the following problem.
I want to prevent double click of plus, minus, divide buttons for the same time.
I have tried to do it like this
function myPlus(){
form.value += "+"
plus.onclick = ""
}
But it prevents clicking the plus button at all.
I am adding the entire code here.
Will be happy to get help!
https://jsfiddle.net/dbrtv1bg/
var form = document.getElementById("for");
var one = document.getElementById("one");
var two = document.getElementById("two");
var three = document.getElementById("three");
var four = document.getElementById("four");
var five = document.getElementById("five");
var six = document.getElementById("six");
var seven = document.getElementById("seven");
var eight = document.getElementById("eight");
var nine = document.getElementById("nine");
var zero = document.getElementById("zero");
var plus = document.getElementById("plus");
var sum = document.getElementById("minus");
var ap = document.getElementById("ap");
var doub = document.getElementById("double");
var dd = document.getElementById("divide");
var calc = document.getElementById("got");
calc.onclick = myFunction;
one.onclick = myFunction1;
two.onclick = myFunction2;
three.onclick = myFunction3;
four.onclick = myFunction4;
five.onclick = myFunction5;
six.onclick = myFunction6;
seven.onclick = myFunction7;
eight.onclick = myFunction8;
nine.onclick = myFunction9;
zero.onclick = myFunction0;
plus.onclick = myPlus;
doub.onclick = myDouble;
sum.onclick = myFunction10;
dd.onclick = myFunctiondd;
ap.onclick = myAp;
function myFunction1() {
form.value += "1";
}
function myFunction2() {
form.value += "2";
}
function myFunction3() {
form.value += "3";
}
function myFunction4() {
form.value += "4";
}
function myFunction5() {
form.value += "5";
}
function myFunction6() {
form.value += "6";
}
function myFunction7() {
form.value += "7";
}
function myFunction8() {
form.value += "8";
}
function myFunction9() {
form.value += "9";
}
function myFunction0() {
form.value += "0";
}
function myPlus() {
form.value += "+";
}
function myDouble() {
form.value += "*"
}
function myFunction10() {
form.value += "-"
}
function myFunctiondd() {
form.value += "/"
}
function myAp() {
form.value += "."
}
function myFunction() {
var bec = eval(form.value);
form.value = bec;
}
.general {
width: 800px;
height: 600px;
background-color: rgb(121, 162, 168);
padding: 50px;
}
.head {
width: 300px;
height: 100px;
background-color: rgb(71, 86, 90);
margin-top: 50px;
margin: auto;
margin-top: 20px;
}
.tools {
width: 300px;
height: 300px;
background-color: white;
margin: auto;
padding-top: 1px;
background-color: rgb(152, 192, 199);
display: table;
}
}
.color {
background-color: rgb(134, 181, 189);
}
.first {
font-size: 30px;
border: 1px rgb(152, 192, 199);
width: 75px;
text-align: center;
font-family: TarusHeavy;
background-color: rgb(134, 181, 189);
color: white;
padding-bottom: 15px;
padding-top: 22px;
}
.second {
font-size: 30px;
border: 1px rgb(152, 192, 199);
width: 75px;
text-align: center;
font-family: TarusHeavy;
background-color: rgb(125, 204, 218);
color: white;
padding-bottom: 15px;
padding-top: 22px;
}
input {
float: right;
margin-top: 65px;
color: white;
background-color: rgb(71, 86, 90);
font-size: 20px;
border: transparent;
text-align: right;
}
<div class="head">
<form action="" id="myForm">
<input type="text" name="result" id="for" disabled>
</form>
</div>
<div class="tools">
<table>
<tr>
<td class="first" id="seven">7</td>
<td class="first" id="eight">8</td>
<td class="first" id="nine">9</td>
<td class="second" id="divide">/</td>
</tr>
<tr>
<td class="first" id="four">4</td>
<td class="first" id="five">5</td>
<td class="first" id="six">6</td>
<td class="second" id="double">x</td>
</tr>
<tr>
<td class="first" id="one">1</td>
<td class="first" id="two">2</td>
<td class="first" id="three">3</td>
<td class="second" id="minus">-</td>
</tr>
<tr>
<td class="first" id="zero">0</td>
<td class="first" id="ap">,</td>
<td class="second" id="got">=</td>
<td class="second" id="plus">+</td>
</tr>
</table>
</div>
</div>
</div>
I would suggest merging all of your functions for numbers and symbols together into something like this:
var value = document.getElementById('value');
var numbers = document.getElementsByClassName('number');
var symbols = document.getElementsByClassName('symbol');
var evaluate = document.getElementById('got');
var lastClicked = 'symbol';
Array.from(numbers).forEach(function(numberElement) {
var numberValue = numberElement.textContent;
numberElement.addEventListener('click', function() {
lastClicked = 'number';
value.value += numberValue;
});
});
Array.from(symbols).forEach(function(numberElement) {
var symbolValue = numberElement.textContent;
numberElement.addEventListener('click', function() {
if (lastClicked !== 'symbol') {
lastClicked = 'symbol';
value.value += symbolValue;
}
});
});
evaluate.addEventListener('click', function () {
value.value = eval(value.value);
});
Then you can change all of the numbers to have the number class and the symbols to have the symbol class.
Then in the symbol click event you have a check on the last clicked.
See below for working example:
var value = document.getElementById('value');
var numbers = document.getElementsByClassName('number');
var symbols = document.getElementsByClassName('symbol');
var evaluate = document.getElementById('got');
var lastClicked = 'symbol';
Array.from(numbers).forEach(function(numberElement) {
var numberValue = numberElement.textContent;
numberElement.addEventListener('click', function() {
lastClicked = 'number';
value.value += numberValue;
});
});
Array.from(symbols).forEach(function(numberElement) {
var symbolValue = numberElement.textContent;
numberElement.addEventListener('click', function() {
if (lastClicked !== 'symbol') {
lastClicked = 'symbol';
value.value += symbolValue;
}
});
});
evaluate.addEventListener('click', function () {
value.value = eval(value.value);
});
.general {
width: 800px;
height: 600px;
background-color: rgb(121, 162, 168);
padding: 50px;
}
.head {
width: 300px;
height: 100px;
background-color: rgb(71, 86, 90);
margin-top: 50px;
margin: auto;
margin-top: 20px;
}
.tools {
width: 300px;
height: 300px;
background-color: white;
margin: auto;
padding-top: 1px;
background-color: rgb(152, 192, 199);
display: table;
}
}
.color {
background-color: rgb(134, 181, 189);
}
.first {
font-size: 30px;
border: 1px rgb(152, 192, 199);
width: 75px;
text-align: center;
font-family: TarusHeavy;
background-color: rgb(134, 181, 189);
color: white;
padding-bottom: 15px;
padding-top: 22px;
}
.second {
font-size: 30px;
border: 1px rgb(152, 192, 199);
width: 75px;
text-align: center;
font-family: TarusHeavy;
background-color: rgb(125, 204, 218);
color: white;
padding-bottom: 15px;
padding-top: 22px;
}
input {
float: right;
margin-top: 65px;
color: white;
background-color: rgb(71, 86, 90);
font-size: 20px;
border: transparent;
text-align: right;
}
<div class="head">
<form action="" id="myForm">
<input type="text" name="result" id="value" disabled>
</form>
</div>
<div class="tools">
<table>
<tr>
<td class="first number" id="seven">7</td>
<td class="first number" id="eight">8</td>
<td class="first number" id="nine">9</td>
<td class="second symbol" id="divide">/</td>
</tr>
<tr>
<td class="first number" id="four">4</td>
<td class="first number" id="five">5</td>
<td class="first number" id="six">6</td>
<td class="second symbol" id="double">*</td>
</tr>
<tr>
<td class="first number" id="one">1</td>
<td class="first number" id="two">2</td>
<td class="first number" id="three">3</td>
<td class="second symbol" id="minus">-</td>
</tr>
<tr>
<td class="first number" id="zero">0</td>
<td class="first symbol">.</td>
<td class="second evaluate" id="got">=</td>
<td class="second symbol" id="plus">+</td>
</tr>
</table>
</div>
Here is a fiddle also for reference: https://jsfiddle.net/dbrtv1bg/5/
One thing you can try is to declare a variable, e.g. "operatorClicked" that keeps track of whether an operator has been clicked. Initialize it to false. In the operator functions, include an if conditional -- if operatorClicked is true, do nothing. If false, append the operator and set operatorClicked to true. If you go this route, you'll also need to reset operatorClicked to false every time a number is clicked.
Thanks everyone! I got the solution this way
I am recalling myPlus, myDOuble etc functions in the functions that give form the number value and it works :)
function myFunction1(){
form.value +="1";
plus.onclick = myPlus;
doub.onclick =myDouble;
sum.onclick= myFunction10;
dd.onclick = myFunctiondd;
ap.onclick =myAp;
https://jsfiddle.net/agxvvr73/
For my assignment, I'm asked to create a game that uses JavaScript. Here is the premise of the game:
At the start of the game, there are ten chips. The player needs to distribute the chips between 11 squares. Each square is designated a number from two to 12. Once player has placed all the chips, he will roll two dice several times. The sum of the dice is recorded and a chip is removed from the corresponding square (if any). The number of rolls needed to remove all 10 chips marks the end of the game.
So I just began the assignment, but I am having trouble keeping a working tally of the number of rolls as it is happening. Parts of it are commented out as I was trying different things. Here is my code:
<!DOCTYPE html>
<html>
<head>
<style>
div.dice{
float:left;
width:32px;
background:#F5F5F5;
border:#999 1px solid;
padding:10px;
font-size:24px;
text-align:center;
margin:5px;
}
</style>
</head>
<body>
<script type "text/javascript">
function rollDice(){
var die1 = document.getElementById("die1");
var die2 = document.getElementById("die2");
var status = document.getElementById("status");
var d1 = Math.floor(Math.random() * 6) + 1;
var d2 = Math.floor(Math.random() * 6) + 1;
var diceTotal = d1 + d2;
die1.innerHTML = d1;
die2.innerHTML = d2;
status.innerHTML = "You rolled " + diceTotal;
}
var count = 0;
function displayTotal() {
count = parseInt(count) + parseInt(1);
var divData = document.getElementById("showCount");
divData.innerHTML = "Number of Rolls: " + count;
};
/**function displayTotal(val) {
var count = document.getElementById('count').value;
var new_count = parseInt(count, 10) + val;
if (new_count < 0) {new_count = 0;}
document.getElementById('count').value = new_count;
return new_count;
} *//
</script>
<div id="die1" class="dice">0</div>
<div id="die2" class="dice">0</div>
<button id = "roll" onclick="rollDice()">Roll Dice</button>
<div id ="showCount"></div>
<input type = "button" id = "roll" value = "Roll Dice" onclick = rollDice();/>
<h2 id="status" style="clear:left;"></h2>
</body>
</html>
Also, any suggestive information or links I should see to help with making the chips section (that gets subtracted from every time that total comes up on the die) would be extremely helpful. I have no idea how to do that. Also, how do I add one to the chip boxes on click, that's a mystery as well. I guess I could use some suggestions on counts in JS in general.
Thanks in advance for all the help!
UPDATE
I almost completed this dice game, it does everything the OP requested. I left only one minor thing undone:
Originally I had planned to dynamically remove the text that represented an array element as the real array element was actually removed. Other than that minor aesthetic flaw, it functions properly and it's UI ain't bad either.
I just remembered, there is one function I neglected to add was a reset function which is minor as well.
Plunker
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Dice</title>
<style>
html,
body {
box-sizing: border-box;
font: 400 16px/1.5'Palatino Linotype';
height: 100vh;
width: 100vw;
overflow: hidden;
}
*,
*:before,
*:after {
box-sizing: inherit;
margin: 0;
padding: 0;
border: 0;
}
body {
background-color: #222;
color: #EFE;
font-variant: small-caps;
overflow: hidden;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.shell {
position: relative;
padding: 1.5em .75em;
margin: 0 auto;
height: 100%;
width: 100%;
}
.content {
postion: absolute;
font-variant: small-caps;
}
header {
width: 100%;
height: 40px;
position: relative;
margin-bottom: 1.5em;
}
h1 {
color: hsla(45, 100%, 60%, 1);
font-weight: 700;
line-height: 1;
letter-spacing: .5px;
font-size: 3rem;
margin: 0 0 2em 0;
}
.die1,
.die2 {
width: 48px;
height: 48px;
background-color: hsla(0, 100%, 50%, .6);
border-radius: 7px;
display: inline-table;
margin: 2em;
padding-left: 4px;
}
.pip div {
width: 8px;
height: 8px;
background-color: hsla(60, 100%, 80%, 1);
border-radius: 60px;
padding: 1px;
text-align: center;
}
.row {
width: 24px;
height: 8px;
}
.blank div {
width: 8px;
height: 8px;
padding: 1px;
text-align: center;
}
#tossed,
#reset {
height: 32px;
width: 64px;
color: hsla(180, 100%, 30%, 1);
border: 1px inset hsla(228, 100%, 50%, 1);
border-radius: 7px;
text-align: center;
font-size: 1.2rem;
font-variant: small-caps;
display: inline-table;
pointer-events: auto;
cursor: pointer;
}
#reset {
display: none;
}
#set {
display: table;
width: -moz-fit-content;
width: -webkit-fit-content;
width: fit-content;
border: 1px ridge hsla(48, 100%, 50%, 1);
border-radius: 7px;
padding: 5px;
}
#field {
width: -moz-fit-content;
width: -webkit-fit-content;
width: fit-content;
border: 1px ridge hsla(48, 100%, 50%, 1);
border-radius: 7px;
padding: 5px;
}
.subFieldset {
pointer-events: none;
}
legend {
color: hsla(45, 100%, 60%, 1);
font-size: 1.5rem;
margin: 0 4em 0 0;
pointer-events: none;
}
#set input {
width: 48px;
height: 32px;
background-color: hsla(0, 0%, 80%, 1);
color: hsla(240, 100%, 40%, 1);
font-family: 'Source Code Pro';
font-size: 1rem;
border: 1px inset hsla(192, 100%, 50%, 1);
border-radius: 7px;
margin: 3px;
padding: 3px;
cursor: pointer;
pointer-events: auto;
display: table-cell;
}
label {
margin: 0 10px 0 0;
font-variant: normal;
display: inline-table;
color: hsla(60, 100%, 80%, 1);
pointer-events: none;
}
output {
color: hsla(240, 100%, 50%, 1);
font-family: 'Source Code Pro';
pointer-events: none;
}
#slotDisplay {
display: table-row;
float: left;
clear: both;
margin: 1em auto;
background-color: hsla(0, 0%, 20%, 1);
border: 1px inset hsla(45, 100%, 60%, 1);
border-radius: 7px;
color: hsla(48, 100%, 50%, 1);
width: 100%;
max-width: 760px;
min-width: 320px;
line-height: 1;
padding: 5px;
font-size: 1.5rem;
pointer-events: none;
}
</style>
</head>
<body>
<header>
<h1>Dice</h1>
</header>
<section class="shell">
<main class="content">
<section class="box">
<fieldset id="field">
<input id="reset" type="reset" value="Reset">
<label for="scored thrown">Score:
<output id="scored" name="scored" for="ui" form="ui">00</output>
/ Rolls:
<output id="thrown" name="thrown" for="ui" form="ui">00</output>
</label>
<button id="tossed" enabled="false">Roll</button>
</fieldset>
<table class="die1">
<tr class="row">
<td class="blank">
<div></div>
</td>
<td class="blank">
<div></div>
</td>
<td class="blank">
<div></div>
</td>
</tr>
<tr class="row">
<td class="blank">
<div></div>
</td>
<td class="blank">
<div></div>
</td>
<td class="blank">
<div></div>
</td>
</tr>
<tr class="row">
<td class="blank">
<div></div>
</td>
<td class="blank">
<div></div>
</td>
<td class="blank">
<div></div>
</td>
</tr>
</table>
<table class="die2">
<tr class="row">
<td class="blank">
<div></div>
</td>
<td class="blank">
<div></div>
</td>
<td class="blank">
<div></div>
</td>
</tr>
<tr class="row">
<td class="blank">
<div></div>
</td>
<td class="blank">
<div></div>
</td>
<td class="blank">
<div></div>
</td>
</tr>
<tr class="row">
<td class="blank">
<div></div>
</td>
<td class="blank">
<div></div>
</td>
<td class="blank">
<div></div>
</td>
</tr>
</table>
</section>
<form id="ui">
<fieldset id="set">
<legend>Distribute Chips in any Combination</legend>
<label>Chips Remaining:
<output id="wallet" name="wallet" for="ui" form="ui">10</output>
</label>
<br/>
<section class="subFieldset">
<label>
<input type="button" id="b-2" class="feed" value="02" form="ui">
</label>
<label>
<input type="button" id="b-3" class="feed" value="03" form="ui">
</label>
<label>
<input type="button" id="b-4" class="feed" value="04" form="ui">
</label>
<label>
<input type="button" id="b-5" class="feed" value="05" form="ui">
</label>
<label>
<input type="button" id="b-6" class="feed" value="06" form="ui">
</label>
<label>
<input type="button" id="b-7 " class="feed" value="07" form="ui">
</label>
<label>
<input type="button" id="b-8" class="feed" value="08" form="ui">
</label>
<label>
<input type="button" id="b-9" class="feed" value="09" form="ui">
</label>
<label>
<input type="button" id="b-10" class="feed" value="10" form="ui">
</label>
<label>
<input type="button" id="b-11" class="feed" value="11" form="ui">
</label>
<label>
<input type="button" id="b-12" class="feed" value="12" form="ui">
</label>
</section>
<textarea id="slotDisplay" readonly cols="30" rows="1" form="ui"></textarea>
</fieldset>
</form>
</main>
</section>
<script>
/*/////////////][ GLOBAL ][//////////////*/
var slots = [];
var chip = 10;
var roll = 0;
var set = document.getElementById("set");
/*/////////////][ PHASE I ][//////////////*/
set.addEventListener("click", execFeed, false);
function execFeed(event) {
if (event.target !== event.currentTarget) {
var tgt = event.target.id;
console.log('trueTarget: ' + tgt);
var feed = document.getElementById(tgt);
console.log('feed: ' + feed);
var val = feed.value;
console.log('val: ' + val);
var idx = parseInt(splitPop(tgt, '-'), 10) - 2;
console.log('idx: ' + idx);
chip = feedSlot(val, slots);
if (chip === 0) {
set.removeEventListener('click', execFeed, false);
tos.setAttribute('enabled', true);
var str0 = 'Roll the Dice to Match Each Number';
var col0 = 'lime';
msg(str0, col0);
}
}
event.stopPropagation();
}
function feedSlot(val, Arr) {
var wallet = document.getElementById('wallet');
var view = document.getElementById('slotDisplay');
Arr.push(val);
console.log('Arr: ' + Arr);
view.value = Arr;
chip--;
wallet.value = chip;
return chip;
}
var tos = document.getElementById('tossed');
/*/////////////][ PHASE II ][//////////////*/
tos.addEventListener('click', matchRoll, false);
function execRoll() {
var thrown = document.getElementById('thrown');
var scored = document.getElementById('scored');
var die1 = document.querySelector('.die1');
var die2 = document.querySelector('.die2');
var pip1 = selArr('td', die1);
var pip2 = selArr('td', die2);
var rd1 = rollDice(pip1);
var rd2 = rollDice(pip2);
var points = rd1 + rd2;
scored.value = leadZero(points, 2);
roll++;
thrown.value = leadZero(roll, 2);
return points;
}
function matchRoll() {
var val = execRoll();
var tgt = leadZero(val, 2);
console.log('execRoll: ' + tgt);
var arr = slots;
console.log('slots: ' + slots);
var mR = arr.indexOf(tgt);
if (mR === -1) {
var str1 = 'No Match, Roll Again';
var col1 = 'orange';
msg(str1, col1);
} else if (mR > -1 && chip < 9) {
++chip;
var toGo = 10 - chip;
var str2 = tgt + ' Matched, ' + toGo + ' More Matches Left';
var col2 = 'blue';
arr.splice(mR, 1);
msg(str2, col2);
} else {
++chip;
var exit = document.getElementById('reset');
var str3 = 'Completed in ' + roll + ' Rolls';
var col3 = 'yellow';
arr.splice(mR, 1);
msg(str3, col3);
exit.style.display = "block";
tos.style.display = "none";
}
wallet.value = chip;
return false;
}
function rollDice(arr) {
var ran6 = Math.floor(Math.random() * 6) + 1;
blank(arr);
switch (ran6) {
case 1:
arr[4].classList.remove('blank');
arr[4].classList.add('pip');
break;
case 2:
arr[0].classList.remove('blank');
arr[0].classList.add('pip');
arr[8].classList.remove('blank');
arr[8].classList.add('pip');
break;
case 3:
arr[0].classList.remove('blank');
arr[0].classList.add('pip');
arr[4].classList.remove('blank');
arr[4].classList.add('pip');
arr[8].classList.remove('blank');
arr[8].classList.add('pip');
break;
case 4:
arr[0].classList.remove('blank');
arr[0].classList.add('pip');
arr[2].classList.remove('blank');
arr[2].classList.add('pip');
arr[6].classList.remove('blank');
arr[6].classList.add('pip');
arr[8].classList.remove('blank');
arr[8].classList.add('pip');
break;
case 5:
arr[0].classList.remove('blank');
arr[0].classList.add('pip');
arr[2].classList.remove('blank');
arr[2].classList.add('pip');
arr[4].classList.remove('blank');
arr[4].classList.add('pip');
arr[6].classList.remove('blank');
arr[6].classList.add('pip');
arr[8].classList.remove('blank');
arr[8].classList.add('pip');
break;
case 6:
arr[0].classList.remove('blank');
arr[0].classList.add('pip');
arr[2].classList.remove('blank');
arr[2].classList.add('pip');
arr[3].classList.remove('blank');
arr[3].classList.add('pip');
arr[5].classList.remove('blank');
arr[5].classList.add('pip');
arr[6].classList.remove('blank');
arr[6].classList.add('pip');
arr[8].classList.remove('blank');
arr[8].classList.add('pip');
break;
}
var pts = ran6;
return pts;
}
/*/////////////][ UTILITIES ][//////////////*/
function msg(str, col) {
var title = document.querySelector('legend');
title.style.color = col;
title.innerHTML = str;
}
function selArr(sel, ele) {
if (!ele) {
ele = document;
}
return Array.prototype.slice.call(ele.querySelectorAll(sel));
}
function blank(arr) {
for (var i = 0; i < arr.length; i++) {
arr[i].classList.remove('pip');
arr[i].classList.add('blank');
}
return false;
}
function leadZero(num, len) {
var str = num.toString();
var zeros = len - str.length;
for (var i = 1; i <= zeros; i++) {
str = "0" + str;
}
return str;
}
function splitPop(str, delim) {
var strX = str.split(delim).pop();
return strX;
}
</script>
</body>
</html>
OLD CONTENT
I made the fun part of this dice game, it's up to you, sir to finish the rest. JS is annotated, good luck.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Dice</title>
<style>
html, body { box-sizing: border-box; font: 400 16px/1.5 'Source Code Pro'; height: 100vh; width: 100vw; }
*, *:before, *:after { box-sizing: inherit; margin: 0; padding: 0; border: 0; }
body { background-color: #222; color: #EFE; font-variant: small-caps; overflow: hidden; -webkit-tap-highlight-color: rgba(0,0,0,0); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
.shell { position: relative; padding: 1.5em .75em; margin: 0 auto; height: 100%; width: 100%; }
.content { postion: absolute; font-variant: normal; }
.die1, .die2 { width: 48px; height: 48px; background-color: hsla(0,100%,50%,.6); border-radius: 7px; display: inline-table; margin: 2em; padding-left: 4px; }
.pip div { width: 8px; height: 8px; background-color: hsla(60,100%,80%,1); border-radius: 60px; padding: 1px; text-align: center; }
.row { width: 24px; height: 8px; }
.blank div { width: 8px; height: 8px; padding: 1px; text-align: center; }
#toss { height: 32px; width: 64px; border: 1px inset hsla(0,0%,50%,1); border-radius: 6px; text-align: center; font-size: 1.2rem; font-variant: small-caps; display: inline-table; }
</style>
</head>
<body>
<header>
<h1>Dice</h1>
</header>
<section class="shell">
<main class="content">
<table class="die1">
<tr class="row">
<td class="blank"><div></div></td><td class="blank"><div></div></td><td class="blank"><div></div></td>
</tr>
<tr class="row">
<td class="blank"><div></div></td><td class="blank"><div></div></td><td class="blank"><div></div></td>
</tr>
<tr class="row">
<td class="blank"><div></div></td><td class="blank"><div></div></td><td class="blank"><div></div></td>
</tr>
</table>
<button id="toss">Roll</button>
<table class="die2">
<tr class="row">
<td class="blank"><div></div></td><td class="blank"><div></div></td><td class="blank"><div></div></td>
</tr>
<tr class="row">
<td class="blank"><div></div></td><td class="blank"><div></div></td><td class="blank"><div></div></td>
</tr>
<tr class="row">
<td class="blank"><div></div></td><td class="blank"><div></div></td><td class="blank"><div></div></td>
</tr>
</table>
</main>
</section>
<script>
// Reference to Dice (2 tables in DOM)
var die1 = document.querySelector('.die1');
var die2 = document.querySelector('.die2');
// Reference to Pips (2 arrays of table-cells in Dice) derived from selArr(sel, ele)☆
var pip1 = selArr('td', die1);
var pip2 = selArr('td', die2);
// Reference to the Toss (1 button triggers the random "roll" of the Dice)
var toss = document.getElementById('toss');
/*
** When the Toss button is clicked, execute function roll(arr)★ twice;
** once for the array of table cells (Pips) in table.die1 (Die One);
** then the other one in table.die2 (Die Two)
*/
toss.addEventListener('click', function(event) {
roll(pip1);
roll(pip2);
return false;
}, false);
/* ★
** Take the array of td (Pips) and add the .blank class to each of them ✪;
** generate a random number 1 thru 6 and determine the layout of the tds (pips)
*/
function roll(arr) {
blank(arr);
var ran6 = Math.floor(Math.random() * 6) + 1;
switch(ran6) {
case 1:
arr[4].classList.remove('blank');
arr[4].classList.add('pip');
break;
case 2:
arr[0].classList.remove('blank');
arr[0].classList.add('pip');
arr[8].classList.remove('blank');
arr[8].classList.add('pip');
break;
case 3:
arr[0].classList.remove('blank');
arr[0].classList.add('pip');
arr[4].classList.remove('blank');
arr[4].classList.add('pip');
arr[8].classList.remove('blank');
arr[8].classList.add('pip');
break;
case 4:
arr[0].classList.remove('blank');
arr[0].classList.add('pip');
arr[2].classList.remove('blank');
arr[2].classList.add('pip');
arr[6].classList.remove('blank');
arr[6].classList.add('pip');
arr[8].classList.remove('blank');
arr[8].classList.add('pip');
break;
case 5:
arr[0].classList.remove('blank');
arr[0].classList.add('pip');
arr[2].classList.remove('blank');
arr[2].classList.add('pip');
arr[4].classList.remove('blank');
arr[4].classList.add('pip');
arr[6].classList.remove('blank');
arr[6].classList.add('pip');
arr[8].classList.remove('blank');
arr[8].classList.add('pip');
break;
case 6:
arr[0].classList.remove('blank');
arr[0].classList.add('pip');
arr[2].classList.remove('blank');
arr[2].classList.add('pip');
arr[3].classList.remove('blank');
arr[3].classList.add('pip');
arr[5].classList.remove('blank');
arr[5].classList.add('pip');
arr[6].classList.remove('blank');
arr[6].classList.add('pip');
arr[8].classList.remove('blank');
arr[8].classList.add('pip');
break;
}
}
/* ☆
** selArr(sel, ele) (selectorArray) this utility takes a collection of selectors
** and converts them into a real array
*/
function selArr(sel, ele) {
if(!ele) {
ele = document;
}
return Array.prototype.slice.call(ele.querySelectorAll(sel));
}
/* ✪
** blank(arr) takes an array of td (Pips) and adds the .blank class to each one of them
*/
function blank(arr) {
for(var i=0; i < arr.length; i++) {
arr[i].classList.remove('pip');
arr[i].classList.add('blank');
}
return false;
}
</script>
</body>
</html>
How to remove this "Rs." part from this js ? if i remove it html page not providing correct value its not working well i wannt stop replacing "Rs." on to my html page ?
function print_today() {
// ***********************************************
// AUTHOR: WWW.CGISCRIPT.NET, LLC
// URL: http://www.cgiscript.net
// Use the script, just leave this message intact.
// Download your FREE CGI/Perl Scripts today!
// ( http://www.cgiscript.net/scripts.htm )
// ***********************************************
var now = new Date();
var months = new Array('January','February','March','April','May','June','July','August','September','October','November','December');
var date = ((now.getDate()<10) ? "0" : "")+ now.getDate();
function fourdigits(number) {
return (number < 1000) ? number + 1900 : number;
}
var today = months[now.getMonth()] + " " + date + ", " + (fourdigits(now.getYear()));
return today;
}
// from http://www.mediacollege.com/internet/javascript/number/round.html
function roundNumber(number,decimals) {
var newString;// The new rounded number
decimals = Number(decimals);
if (decimals < 1) {
newString = (Math.round(number)).toString();
} else {
var numString = number.toString();
if (numString.lastIndexOf(".") == -1) {// If there is no decimal point
numString += ".";// give it one at the end
}
var cutoff = numString.lastIndexOf(".") + decimals;// The point at which to truncate the number
var d1 = Number(numString.substring(cutoff,cutoff+1));// The value of the last decimal place that we'll end up with
var d2 = Number(numString.substring(cutoff+1,cutoff+2));// The next decimal, after the last one we want
if (d2 >= 5) {// Do we need to round up at all? If not, the string will just be truncated
if (d1 == 9 && cutoff > 0) {// If the last digit is 9, find a new cutoff point
while (cutoff > 0 && (d1 == 9 || isNaN(d1))) {
if (d1 != ".") {
cutoff -= 1;
d1 = Number(numString.substring(cutoff,cutoff+1));
} else {
cutoff -= 1;
}
}
}
d1 += 1;
}
if (d1 == 10) {
numString = numString.substring(0, numString.lastIndexOf("."));
var roundedNum = Number(numString) + 1;
newString = roundedNum.toString() + '.';
} else {
newString = numString.substring(0,cutoff) + d1.toString();
}
}
if (newString.lastIndexOf(".") == -1) {// Do this again, to the new string
newString += ".";
}
var decs = (newString.substring(newString.lastIndexOf(".")+1)).length;
for(var i=0;i<decimals-decs;i++) newString += "0";
//var newNumber = Number(newString);// make it a number if you like
return newString; // Output the result to the form field (change for your purposes)
}
function update_total() {
var total = 0;
$('.price').each(function(i){
price = $(this).html().replace("Rs.","");
if (!isNaN(price)) total += Number(price);
});
total = roundNumber(total,2);
$('#subtotal').html("Rs."+total);
$('#total').html("Rs."+total);
update_balance();
}
function update_balance() {
var due = $("#total").html().replace("Rs.","") - $("#paid").val().replace("Rs.","");
due = roundNumber(due,2);
$('.due').html("Rs."+due);
}
function update_price() {
var row = $(this).parents('.item-row');
var price = row.find('.cost').val().replace("Rs.","") * row.find('.qty').val();
price = roundNumber(price,2);
isNaN(price) ? row.find('.price').html("N/A") : row.find('.price').html("Rs."+price);
update_total();
}
function bind() {
$(".cost").blur(update_price);
$(".qty").blur(update_price);
}
$(document).ready(function() {
$('input').click(function(){
$(this).select();
});
$("#paid").blur(update_balance);
$("#addrow").click(function(){
$(".item-row:last").after('<tr class="item-row"><td class="item-name"><div class="delete-wpr"><textarea>Item Name</textarea><a class="delete" href="javascript:;" title="Remove row">X</a></div></td><td class="description"><textarea>Description</textarea></td><td><textarea class="cost">Rs.0</textarea></td><td><textarea class="qty">0</textarea></td><td><span class="price">Rs.0</span></td></tr>');
if ($(".delete").length > 0) $(".delete").show();
bind();
});
bind();
$(".delete").live('click',function(){
$(this).parents('.item-row').remove();
update_total();
if ($(".delete").length < 2) $(".delete").hide();
});
$("#cancel-logo").click(function(){
$("#logo").removeClass('edit');
});
$("#delete-logo").click(function(){
$("#logo").remove();
});
$("#change-logo").click(function(){
$("#logo").addClass('edit');
$("#imageloc").val($("#image").attr('src'));
$("#image").select();
});
$("#save-logo").click(function(){
$("#image").attr('src',$("#imageloc").val());
$("#logo").removeClass('edit');
});
$("#date").val(print_today());
});
/*
CSS-Tricks Example
by Chris Coyier
http://css-tricks.com
*/
* { margin: 0; padding: 0; }
body { font: 14px/1.4 Georgia, serif; }
#page-wrap { width: 800px; margin: 0 auto; }
textarea { border: 0; font: 14px Georgia, Serif; overflow: hidden; resize: none; }
table { border-collapse: collapse; }
table td, table th { border: 1px solid black; padding: 5px; }
#no_bodear_tbl{
border: 0px solid black; padding: 6px;
}
#header { height: 15px; width: 100%; margin: 20px 0; background: #222; text-align: center; color: white; font: bold 15px Helvetica, Sans-Serif; text-decoration: uppercase; letter-spacing: 20px; padding: 8px 0px; }
#address { width: 250px; height: 150px; float: left; }
#customer { overflow: hidden; }
#logo { text-align: right; float: right; position: relative; margin-top: 25px; border: 1px solid #fff; max-width: 540px; max-height: 100px; overflow: hidden; }
#logo:hover, #logo.edit { border: 1px solid #000; margin-top: 0px; max-height: 125px; }
#logoctr { display: none; }
#logo:hover #logoctr, #logo.edit #logoctr { display: block; text-align: right; line-height: 25px; background: #eee; padding: 0 5px; }
#logohelp { text-align: left; display: none; font-style: italic; padding: 10px 5px;}
#logohelp input { margin-bottom: 5px; }
.edit #logohelp { display: block; }
.edit #save-logo, .edit #cancel-logo { display: inline; }
.edit #image, #save-logo, #cancel-logo, .edit #change-logo, .edit #delete-logo { display: none; }
#customer-title { font-size: 20px; font-weight: bold; float: left; }
#meta { margin-top: 1px; width: 300px; float: right; }
#meta td { text-align: right; }
#meta td.meta-head { text-align: left; background: #eee; }
#meta td textarea { width: 100%; height: 20px; text-align: right; }
#items { clear: both; width: 100%; margin: 30px 0 0 0; border: 1px solid black; }
#items th { background: #eee; }
#items textarea { width: 80px; height: 50px; }
#items tr.item-row td { border: 0; vertical-align: top; }
#items td.description { width: 300px; }
#items td.item-name { width: 175px; }
#items td.description textarea, #items td.item-name textarea { width: 100%; }
#items td.total-line { border-right: 0; text-align: right; }
#items td.total-value { border-left: 0; padding: 10px; }
#items td.total-value textarea { height: 20px; background: none; }
#items td.balance { background: #eee; }
#items td.blank { border: 0; }
#terms { text-align: center; margin: 20px 0 0 0; }
#terms h5 { text-transform: uppercase; font: 13px Helvetica, Sans-Serif; letter-spacing: 10px; border-bottom: 1px solid black; padding: 0 0 8px 0; margin: 0 0 8px 0; }
#terms textarea { width: 100%; text-align: center;}
textarea:hover, textarea:focus, #items td.total-value textarea:hover, #items td.total-value textarea:focus, .delete:hover { background-color:#EEFF88; }
.delete-wpr { position: relative; }
.delete { display: block; color: #000; text-decoration: none; position: absolute; background: #EEEEEE; font-weight: bold; padding: 0px 3px; border: 1px solid; top: -6px; left: -22px; font-family: Verdana; font-size: 12px; }
<!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>infintiaLK Billing</title>
<link rel='stylesheet' type='text/css' href='css/style_bill.css' />
<link rel='stylesheet' type='text/css' href='css/print_bill.css' media="print" />
<script type='text/javascript' src='js/jquery-1.3.2.min_bill.js'></script>
<script type='text/javascript' src='js/example_bill.js'></script>
<style type="text/css" media="print">
.dontprint
{ display: none; }
</style>
</head>
<body>
<?php
function wlcmMsg() {
echo "Welcome ! ".$name=$_SESSION['adminlog'];
}
session_start();
if(!isset($_SESSION['adminlog'])){
}
else if(isset($_SESSION['adminlog'])){
echo '<table align="right" border="0" class="dontprint">
<tr width="50%"><td>Hi! '.$name=$_SESSION['adminlog']; echo '</td>
<td><form align="right" action="menu.php"><input type="submit" value="Back" /></form></td>
<td><form align="right" action="logout.php"><input type="submit" value="logout" id="search"/></form></td>
</tr></table>';
}
//connecting to the database
define('DB_HOST', 'localhost');
define('DB_NAME', 'infinitiabill');
define('DB_USER','root');
define('DB_PASSWORD','');
$con=mysql_connect(DB_HOST,DB_USER,DB_PASSWORD) or die("Failed to connect to MySQL: " . mysql_error());
$db=mysql_select_db(DB_NAME,$con) or die("Failed to connect to MySQL: " . mysql_error());
//inserting Record to the database
$result = mysql_query('SELECT InvoiceNo FROM billdata ORDER BY InvoiceNo DESC LIMIT 1;');
if (mysql_num_rows($result) > 0) {
$max_InvoiceNo = mysql_fetch_row($result);
//echo $max_InvoiceNo[0]; //Here it is
}
mysql_close($con);
?>
<script>
function myFunction() {
window.print();
}
</script>
<div id="page-wrap">
<form action="save_process.php" name="invicedata" method="post">
<textarea id="header">INVOICE</textarea>
<div id="identity">
<textarea id="address">infintiaLK
No.210,Temple Road,
Ulukade Junction, Ganemulla,
Sri Lanka 11020.
(+94)76 75 57 909 / (+94)71 95 57 909
infinitialk#gmail.com
</textarea>
<div id="logo">
<div id="logoctr">
<!--Change Logo-->
Save |
<!--Delete Logo-->
Cancel
</div>
<div id="logohelp">
<input id="imageloc" type="text" size="50" value="" /><br />
(max width: 540px, max height: 100px)
</div>
<img id="image" src="images/logo1_bill.png" alt="logo" />
</div>
</div>
<div style="clear:both"></div>
<div id="customer">
<textarea name="CmpnyName" id="customer-title">Company Name</textarea>
<table id="meta">
<tr name="invno">
<td class="meta-head">Invoice #</td>
<td ><?php echo $max_InvoiceNo[0]+1; ?></td>
</tr>
<tr>
<td class="meta-head">Date</td>
<td><textarea name="issedate" id="date"></textarea></td>
</tr>
<tr>
<td class="meta-head">Created by</td>
<td><?php echo $name=$_SESSION['adminlog']; ?></div></td>
</tr>
<tr>
<td class="meta-head">Amount Due Rs.</td>
<td><textarea class="due" name="due" readonly>0.00</textarea></td>
</tr>
</table>
</div>
<table id="items">
<tr>
<th>Item</th>
<th>Description</th>
<th>Unit Cost</th>
<th>Quantity</th>
<th>Price</th>
</tr>
<tr class="item-row">
<td class="item-name"><div class="delete-wpr"><textarea name="itemname">Web Updates</textarea><a class="delete" href="javascript:;" title="Remove row">X</a></div></td>
<td class="description"><textarea name="item_details">Monthly web updates for http://widgetcorp.com (Nov. 1 - Nov. 30, 2009)</textarea></td>
<td><textarea class="cost">Rs.650.00</textarea></td>
<td><textarea class="qty">1</textarea></td>
<td>Rs.<span class="price">650.00</span></td>
</tr>
<tr class="item-row">
<td name="item_details" class="item-name"><div class="delete-wpr"><textarea name="itemname">SSL Renewals</textarea><a class="delete" href="javascript:;" title="Remove row">X</a></div></td>
<td class="description"><textarea name="item_details">Yearly renewals of SSL certificates on main domain and several subdomains</textarea></td>
<td><textarea class="cost">Rs.75.00</textarea></td>
<td><textarea class="qty">3</textarea></td>
<td>Rs.<span class="price">225.00</span></td>
</tr>
<tr id="hiderow">
<td colspan="5"><a id="addrow" href="javascript:;" title="Add a row">Add a item</a></td>
</tr>
<tr>
<td colspan="2" class="blank"> </td>
<td colspan="2" class="total-line">Subtotal Rs.</td>
<td class="total-value" >875.00</td>
</tr>
<tr>
<td colspan="2" class="blank"> </td>
<td colspan="2" class="total-line">Total Rs.</td>
<td class="total-value"><textarea id="total" name="total" readonly>875.00</textarea></td>
</tr>
<tr>
<td colspan="2" class="blank"> </td>
<td colspan="2" class="total-line">Amount Paid Rs.</td>
<td class="total-value"><textarea name="paid" id="paid">0.00</textarea></td>
</tr>
<tr>
<td colspan="2" class="blank"> </td>
<td colspan="2" class="total-line balance">Balance Due Rs.</td>
<td class="total-value balance"><div class="due">0.00</div></td>
</tr>
</table>
<div id="terms">
<h5>Terms</h5>
NET 30 Days. Finance Charge of 1.5% will be made on unpaid balances after 30 days.
Make all checks payable to infinitiaLK.<br> THANK YOU FOR YOUR BUSINESS!
</div>
<div class="dontprint"><br>
<center><table name="no_bodear_tbl">
<tr><td>
<form action="save_process.php">
<input type="submit" value="Save" ></form></td>
<td></td>
<td><form action="http://pdfcrowd.com/url_to_pdf/">
<input type="submit" value="Save to a PDF">
</form></td>
</tr></table></center>
</div>
<!--<button onclick="myFunction()">Print Bill</button>-->
</form>
<footer><br/>
<center> Copyright © 2012 - 2015 infinitiaLK Inc.
</footer><br/>
</body>
</html>
here m add html and css codes too herer
Try doing split instead.
Ex:
function update_balance() {
var total= parseInt($("#total").html().split("Rs.")[1]);
var pval=parseInt($("#paid").val().split("Rs.")[1]);
var due = total-pval;
due = roundNumber(due,2);
$('.due').html("Rs."+due);
}
Same goes with update_price()
Edited, #Sampath M Jay, I just change some code you just post on your snippet to make it work. Something need to know:
Did you see the the code snippet needs jQuery? I think that may be the reason that your snippet is not working, anyway, I chose jQuery 1.11.0, which makes .live deprecated, so I change $(".delete").live(... to $(".delete").on(..., it just do the same thing.
The PHP part of your snippet is removed because stack snippet will not try to resolve it, so I believe whether to remove it or not is a minor issue.
Some of the html part also has the Rs. prefix, so remove them.
In js part, the update_total, update_balance, update_price and some part of the domready code which is
$("#addrow").click(function() {
$(".item-row:last").after('<tr class="item-row"><td class="item-name"><div...
bind();
...})
all of them have the relation with Rs., so removed them.
Left is 'should-be-ok' version without the bothering Rs., enjoy, and feel free to ask if there's any problem.
function print_today() {
// ***********************************************
// AUTHOR: WWW.CGISCRIPT.NET, LLC
// URL: http://www.cgiscript.net
// Use the script, just leave this message intact.
// Download your FREE CGI/Perl Scripts today!
// ( http://www.cgiscript.net/scripts.htm )
// ***********************************************
var now = new Date();
var months = new Array('January','February','March','April','May','June','July','August','September','October','November','December');
var date = ((now.getDate()<10) ? "0" : "")+ now.getDate();
function fourdigits(number) {
return (number < 1000) ? number + 1900 : number;
}
var today = months[now.getMonth()] + " " + date + ", " + (fourdigits(now.getYear()));
return today;
}
// from http://www.mediacollege.com/internet/javascript/number/round.html
function roundNumber(number,decimals) {
var newString;// The new rounded number
decimals = Number(decimals);
if (decimals < 1) {
newString = (Math.round(number)).toString();
} else {
var numString = number.toString();
if (numString.lastIndexOf(".") == -1) {// If there is no decimal point
numString += ".";// give it one at the end
}
var cutoff = numString.lastIndexOf(".") + decimals;// The point at which to truncate the number
var d1 = Number(numString.substring(cutoff,cutoff+1));// The value of the last decimal place that we'll end up with
var d2 = Number(numString.substring(cutoff+1,cutoff+2));// The next decimal, after the last one we want
if (d2 >= 5) {// Do we need to round up at all? If not, the string will just be truncated
if (d1 == 9 && cutoff > 0) {// If the last digit is 9, find a new cutoff point
while (cutoff > 0 && (d1 == 9 || isNaN(d1))) {
if (d1 != ".") {
cutoff -= 1;
d1 = Number(numString.substring(cutoff,cutoff+1));
} else {
cutoff -= 1;
}
}
}
d1 += 1;
}
if (d1 == 10) {
numString = numString.substring(0, numString.lastIndexOf("."));
var roundedNum = Number(numString) + 1;
newString = roundedNum.toString() + '.';
} else {
newString = numString.substring(0,cutoff) + d1.toString();
}
}
if (newString.lastIndexOf(".") == -1) {// Do this again, to the new string
newString += ".";
}
var decs = (newString.substring(newString.lastIndexOf(".")+1)).length;
for(var i=0;i<decimals-decs;i++) newString += "0";
//var newNumber = Number(newString);// make it a number if you like
return newString; // Output the result to the form field (change for your purposes)
}
function update_total() {
var total = 0;
$('.price').each(function(i){
price = parseInt($(this).html());
if (!isNaN(price)) total += Number(price);
});
total = roundNumber(total,2);
$('#subtotal').html(total);
$('#total').html(total);
update_balance();
}
function update_balance() {
var due = parseInt($("#total").html(), 10) - $("#paid").val();
due = roundNumber(due,2);
$('.due').html(due);
}
function update_price() {
var row = $(this).parents('.item-row');
var price = row.find('.cost').val() * row.find('.qty').val();
price = roundNumber(price,2);
isNaN(price) ? row.find('.price').html("N/A") : row.find('.price').html(price);
update_total();
}
function bind() {
$(".cost").blur(update_price);
$(".qty").blur(update_price);
}
$(document).ready(function() {
$('input').click(function(){
$(this).select();
});
$("#paid").blur(update_balance);
$("#addrow").click(function(){
$(".item-row:last").after('<tr class="item-row"><td class="item-name"><div class="delete-wpr"><textarea>Item Name</textarea><a class="delete" href="javascript:;" title="Remove row">X</a></div></td><td class="description"><textarea>Description</textarea></td><td><textarea class="cost">0</textarea></td><td><textarea class="qty">0</textarea></td><td><span class="price">0</span></td></tr>');
if ($(".delete").length > 0) $(".delete").show();
bind();
});
bind();
$(".delete").on('click',function(){
$(this).parents('.item-row').remove();
update_total();
if ($(".delete").length < 2) $(".delete").hide();
});
$("#cancel-logo").click(function(){
$("#logo").removeClass('edit');
});
$("#delete-logo").click(function(){
$("#logo").remove();
});
$("#change-logo").click(function(){
$("#logo").addClass('edit');
$("#imageloc").val($("#image").attr('src'));
$("#image").select();
});
$("#save-logo").click(function(){
$("#image").attr('src',$("#imageloc").val());
$("#logo").removeClass('edit');
});
$("#date").val(print_today());
});
/*
CSS-Tricks Example
by Chris Coyier
http://css-tricks.com
*/
* { margin: 0; padding: 0; }
body { font: 14px/1.4 Georgia, serif; }
#page-wrap { width: 800px; margin: 0 auto; }
textarea { border: 0; font: 14px Georgia, Serif; overflow: hidden; resize: none; }
table { border-collapse: collapse; }
table td, table th { border: 1px solid black; padding: 5px; }
#no_bodear_tbl{
border: 0px solid black; padding: 6px;
}
#header { height: 15px; width: 100%; margin: 20px 0; background: #222; text-align: center; color: white; font: bold 15px Helvetica, Sans-Serif; text-decoration: uppercase; letter-spacing: 20px; padding: 8px 0px; }
#address { width: 250px; height: 150px; float: left; }
#customer { overflow: hidden; }
#logo { text-align: right; float: right; position: relative; margin-top: 25px; border: 1px solid #fff; max-width: 540px; max-height: 100px; overflow: hidden; }
#logo:hover, #logo.edit { border: 1px solid #000; margin-top: 0px; max-height: 125px; }
#logoctr { display: none; }
#logo:hover #logoctr, #logo.edit #logoctr { display: block; text-align: right; line-height: 25px; background: #eee; padding: 0 5px; }
#logohelp { text-align: left; display: none; font-style: italic; padding: 10px 5px;}
#logohelp input { margin-bottom: 5px; }
.edit #logohelp { display: block; }
.edit #save-logo, .edit #cancel-logo { display: inline; }
.edit #image, #save-logo, #cancel-logo, .edit #change-logo, .edit #delete-logo { display: none; }
#customer-title { font-size: 20px; font-weight: bold; float: left; }
#meta { margin-top: 1px; width: 300px; float: right; }
#meta td { text-align: right; }
#meta td.meta-head { text-align: left; background: #eee; }
#meta td textarea { width: 100%; height: 20px; text-align: right; }
#items { clear: both; width: 100%; margin: 30px 0 0 0; border: 1px solid black; }
#items th { background: #eee; }
#items textarea { width: 80px; height: 50px; }
#items tr.item-row td { border: 0; vertical-align: top; }
#items td.description { width: 300px; }
#items td.item-name { width: 175px; }
#items td.description textarea, #items td.item-name textarea { width: 100%; }
#items td.total-line { border-right: 0; text-align: right; }
#items td.total-value { border-left: 0; padding: 10px; }
#items td.total-value textarea { height: 20px; background: none; }
#items td.balance { background: #eee; }
#items td.blank { border: 0; }
#terms { text-align: center; margin: 20px 0 0 0; }
#terms h5 { text-transform: uppercase; font: 13px Helvetica, Sans-Serif; letter-spacing: 10px; border-bottom: 1px solid black; padding: 0 0 8px 0; margin: 0 0 8px 0; }
#terms textarea { width: 100%; text-align: center;}
textarea:hover, textarea:focus, #items td.total-value textarea:hover, #items td.total-value textarea:focus, .delete:hover { background-color:#EEFF88; }
.delete-wpr { position: relative; }
.delete { display: block; color: #000; text-decoration: none; position: absolute; background: #EEEEEE; font-weight: bold; padding: 0px 3px; border: 1px solid; top: -6px; left: -22px; font-family: Verdana; font-size: 12px; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<!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>infintiaLK Billing</title>
<link rel='stylesheet' type='text/css' href='css/style_bill.css' />
<link rel='stylesheet' type='text/css' href='css/print_bill.css' media="print" />
<script type='text/javascript' src='js/jquery-1.3.2.min_bill.js'></script>
<script type='text/javascript' src='js/example_bill.js'></script>
<style type="text/css" media="print">
.dontprint
{ display: none; }
</style>
</head>
<body>
<script>
function myFunction() {
window.print();
}
</script>
<div id="page-wrap">
<form action="save_process.php" name="invicedata" method="post">
<textarea id="header">INVOICE</textarea>
<div id="identity">
<textarea id="address">infintiaLK
No.210,Temple Road,
Ulukade Junction, Ganemulla,
Sri Lanka 11020.
(+94)76 75 57 909 / (+94)71 95 57 909
infinitialk#gmail.com
</textarea>
<div id="logo">
<div id="logoctr">
<!--Change Logo-->
Save |
<!--Delete Logo-->
Cancel
</div>
<div id="logohelp">
<input id="imageloc" type="text" size="50" value="" /><br />
(max width: 540px, max height: 100px)
</div>
<img id="image" src="images/logo1_bill.png" alt="logo" />
</div>
</div>
<div style="clear:both"></div>
<div id="customer">
<textarea name="CmpnyName" id="customer-title">Company Name</textarea>
<table id="meta">
<tr name="invno">
<td class="meta-head">Invoice #</td>
<td ><?php echo $max_InvoiceNo[0]+1; ?></td>
</tr>
<tr>
<td class="meta-head">Date</td>
<td><textarea name="issedate" id="date"></textarea></td>
</tr>
<tr>
<td class="meta-head">Created by</td>
<td><?php echo $name=$_SESSION['adminlog']; ?></div></td>
</tr>
<tr>
<td class="meta-head">Amount Due </td>
<td><textarea class="due" name="due" readonly>0.00</textarea></td>
</tr>
</table>
</div>
<table id="items">
<tr>
<th>Item</th>
<th>Description</th>
<th>Unit Cost</th>
<th>Quantity</th>
<th>Price</th>
</tr>
<tr class="item-row">
<td class="item-name"><div class="delete-wpr"><textarea name="itemname">Web Updates</textarea><a class="delete" href="javascript:;" title="Remove row">X</a></div></td>
<td class="description"><textarea name="item_details">Monthly web updates for http://widgetcorp.com (Nov. 1 - Nov. 30, 2009)</textarea></td>
<td><textarea class="cost">650.00</textarea></td>
<td><textarea class="qty">1</textarea></td>
<td><span class="price">650.00</span></td>
</tr>
<tr class="item-row">
<td name="item_details" class="item-name"><div class="delete-wpr"><textarea name="itemname">SSL Renewals</textarea><a class="delete" href="javascript:;" title="Remove row">X</a></div></td>
<td class="description"><textarea name="item_details">Yearly renewals of SSL certificates on main domain and several subdomains</textarea></td>
<td><textarea class="cost">75.00</textarea></td>
<td><textarea class="qty">3</textarea></td>
<td><span class="price">225.00</span></td>
</tr>
<tr id="hiderow">
<td colspan="5"><a id="addrow" href="javascript:;" title="Add a row">Add a item</a></td>
</tr>
<tr>
<td colspan="2" class="blank"> </td>
<td colspan="2" class="total-line">Subtotal</td>
<td class="total-value" >875.00</td>
</tr>
<tr>
<td colspan="2" class="blank"> </td>
<td colspan="2" class="total-line">Total</td>
<td class="total-value"><textarea id="total" name="total" readonly>875.00</textarea></td>
</tr>
<tr>
<td colspan="2" class="blank"> </td>
<td colspan="2" class="total-line">Amount Paid</td>
<td class="total-value"><textarea name="paid" id="paid">0.00</textarea></td>
</tr>
<tr>
<td colspan="2" class="blank"> </td>
<td colspan="2" class="total-line balance">Balance Due</td>
<td class="total-value balance"><div class="due">0.00</div></td>
</tr>
</table>
<div id="terms">
<h5>Terms</h5>
NET 30 Days. Finance Charge of 1.5% will be made on unpaid balances after 30 days.
Make all checks payable to infinitiaLK.<br> THANK YOU FOR YOUR BUSINESS!
</div>
<div class="dontprint"><br>
<center><table name="no_bodear_tbl">
<tr><td>
<form action="save_process.php">
<input type="submit" value="Save" ></form></td>
<td></td>
<td><form action="http://pdfcrowd.com/url_to_pdf/">
<input type="submit" value="Save to a PDF">
</form></td>
</tr></table></center>
</div>
<!--<button onclick="myFunction()">Print Bill</button>-->
</form>
<footer><br/>
<center> Copyright © 2012 - 2015 infinitiaLK Inc.
</footer><br/>
</body>
</html>
You should remove "Rs" string being added at locations mentioned below. Then you can remove all replace("Rs.","")
function update_total() {
...
$('#subtotal').html("Rs."+total);
$('#total').html("Rs."+total);
...
}
function update_balance() {
...
$('.due').html("Rs."+due);
...
}
function update_price() {
...
row.find('.price').html("Rs."+price);
...
}