How to pass a html table to controller in rails?

How to pass a html table to controller in rails? - javascript

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...

Related

Need Assist with adding an undo and redo button to my CRUD Table

I'm trying to edit my javascript code and having some undo and redo functionality to this crud design. When I click undo after I put the data from the table and delete it, an error comes up. The error message states that "Cannot read properties of null (reading 'pop')". I'm fairly new to coding so I know I have plenty to learn.
<!DOCTYPE html>
<html>
<head>
<title>
Html CRUD with Pure JavaScript
</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<table>
<tr>
<td>
<form onsubmit="event.preventDefault();onFormSubmit();">
<div>
<label>Product Name</label>
<input type="text" name="productName" id="productName">
</div>
<div>
<label>Product ID</label>
<input type="text" name="productID" id="productID">
</div>
<div>
<label>Product Location</label>
<input type="text" name="productLocation" id="productLocation">
</div>
<div>
<label>Comment</label>
<input type="text" name="comment" id="comment">
</div>
<div class="form-action-buttons">
<input type="submit" value="Submit">
</div>
<div class="form-action-buttons">
<input type="button" value="undo" onclick="onUndo();">
</div>
<div class="form-action-buttons">
<input type="button" value="redo" onclick="alert('You clicked the button!')">
</div>
</form>
</td>
<td>
<table class="list" id="fullList">
<thead>
<tr>
<th>Product Name</th>
<th>Product ID</th>
<th>Product Location</th>
<th>Comment</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</td>
</tr>
</table>
<script src="script.js"></script>
</body>
</html>
var selectedRow = null
const input = document.querySelector('input')
function onFormSubmit(){
var formData = readFormData();
if(selectedRow == null)
insertNewRecord(formData);
else
updateRecord(formData)
resetForm();
}
function saveSelectedRow(){
selectedRow.push(input.value)
}
function onUndo(){
const lastSelectedRow = selectedRow.pop()
input.value = lastSelectedRow ? lastSelectedRow : input.value
resetForm();
}
function readFormData(){
var formData= {};
formData["productName"] = document.getElementById("productName").value;
formData["productID"] = document.getElementById("productID").value;
formData["productLocation"] = document.getElementById("productLocation").value;
formData["comment"] = document.getElementById("comment").value;
return formData;
}
function insertNewRecord(data){
var table = document.getElementById("fullList").getElementsByTagName('tbody')[0];
var newRow = table.insertRow(table.length);
cell1 = newRow.insertCell(0);
cell1.innerHTML = data.productName;
cell2 = newRow.insertCell(1);
cell2.innerHTML = data.productID;
cell3 = newRow.insertCell(2);
cell3.innerHTML = data.productLocation;
cell4 = newRow.insertCell(3);
cell4.innerHTML = data.comment;
cell4 = newRow.insertCell(4);
cell4.innerHTML = `<a onClick="onEdit(this)">Edit</a>
<a onClick="onDelete(this)">Delete/Comment</a>`;
}
function resetForm(){
document.getElementById("productName").value = "";
document.getElementById("productID").value = "";
document.getElementById("productLocation").value = "";
document.getElementById("comment").value = "";
selectedRow = null
}
function onEdit(td){
selectedRow = td.parentElement.parentElement;
document.getElementById("productName").value = selectedRow.cells[0].innerHTML;
document.getElementById("productID").value = selectedRow.cells[1].innerHTML;
document.getElementById("productLocation").value = selectedRow.cells[2].innerHTML;
document.getElementById("comment").value = selectedRow.cells[3].innerHTML;
}
function updateRecord(formData) {
selectedRow.cells[0].innerHTML = formData.productName;
selectedRow.cells[1].innerHTML = formData.productID;
selectedRow.cells[2].innerHTML = formData.productLocation;
selectedRow.cells[3].innerHTML = formData.comment;
}
function onDelete(td) {
if (confirm('Are you sure to delete this record ?'))
row = td.parentElement.parentElement;
document.getElementById("fullList").deleteRow(row.rowIndex);;
onEdit(td);
}
function onUndelete(td){
if(confirm('Are you sure you want to undelete this record?'))
row = td.parentElement.parentElement;
document.getElementById("fullList");
undo();
}
body > table{
width: 80%;
}
table{
border-collapse: collapse;
}
table.list{
width:100%;
}
td, th {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}
tr:nth-child(even),table.list thead>tr {
background-color: #dddddd;
}
input[type=text], input[type=number] {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
}
input[type=submit]{
width: 30%;
background-color: #ddd;
color: #000;
padding: 14px 20px;
margin: 8px 0;
border: none;
border-radius: 4px;
cursor: pointer;
}
input[type=button]{
width: 30%;
background-color: #ddd;
color: #000;
padding: 14px 20px;
margin: 8px 0;
border: none;
border-radius: 4px;
cursor: pointer;
}
form div.form-action-buttons{
text-align: right;
}
a{
cursor: pointer;
text-decoration: underline;
color: #0000ee;
margin-right: 4px;
}
label.validation-error{
color: red;
margin-left: 5px;
}
.hide{
display:none;
}

Webpage output does not last

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>

How to show one button element in table column

I may mess up a bit with explaining the problem.
I have a table, if I press my table column name, it will expand and show the input and also a button. The problem begins with showing all the buttons in each column in the beginning of the page, also buttons appear closing/opening while expanding.
What I would like to do, is instead of showing all the buttons in each column, I want to display only one button in the column that got expanded (clicked) and also in one row.
$(document).ready(
function() {
$('th input').slideUp();
$('th a').click(
function() {
var clicks = $(this).data('clicks');
if (clicks) {
$(this).closest(".butt").hide();
} else {
$(this).closest(".butt").show();
}
$(this).data("clicks", !clicks);
$(this).closest('th').find('input').slideToggle();
}
);
}
);
button {
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
background: rgba(1, 1, 1, 0.1);
height: 30px;
width: 70px;
}
table {
display: block;
width: 400px;
font-family: Helvetica, Arial, sans-serif;
border-spacing: 0;
max-height: 400px;
overflow: auto;
}
.naitamine2 table {
position: fixed;
width: 700px;
height: ;
font-family: Helvetica, Arial, sans-serif;
border-spacing: 0;
overflow: auto;
}
#table table {
position: fixed;
width: 500px;
font-family: Helvetica, Arial, sans-serif;
border-spacing: 0;
}
tr,
th {
border: 1px solid #CCC;
background-color: white;
}
th {
background: #F3F3F3;
font-weight: bold;
}
tr:nth-child(even) th {
background: #4DAF7C;
}
tr:nth-child(odd) th {
background: #FFA400;
}
tr th:hover {
background: #666;
color: #FFF;
}
.butt {
margin-left: 5px;
margin-top: -10px;
height: 10px;
}
table.scroll {
width: 100%;
/* Optional */
/* border-collapse: collapse; */
border-spacing: 0;
border: 2px solid black;
}
table.scroll tbody {
height: 100px;
overflow-y: auto;
overflow-x: hidden;
}
tbody td,
thead th {
width: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="scroll">
<thead>
<tr>
<th>Name</th>
<th>Product</th>
<th>Price</th>
<th>Avaible</th>
</tr>
</thead>
<tbody class='av'>
<tr>
<form method='POST'>
<input type='hidden' name='id' value='$id'></input>
<th><a>Nimi</a>
<input name='namem' placeholder='Name'>
<button type='submit' name='button' class='butt' value='+'></button>
</input>
</th>
<th><a>JUra</a>
<input name='productm' placeholder='Product'></input>
</th>
<th><a>Asi</a>
<input name='pricem' type='number' step='1.00' placeholder='Price'></input>
</th>
<th><a>Ei</a>
<input name='avaiblem' placeholder='Avaible'></input>
</th>
</form>
</tr>
</tbody>
<tbody class='av'>
<tr>
<form method='POST'>
<input type='hidden' name='id' value='$id'></input>
<th><a>Nimi</a>
<input name='namem' placeholder='Name'>
<button type='submit' name='button' class='butt' value='+'></button>
</input>
</th>
<th><a>JUra</a>
<input name='productm' placeholder='Product'></input>
</th>
<th><a>Asi</a>
<input name='pricem' type='number' step='1.00' placeholder='Price'></input>
</th>
<th><a>Ei</a>
<input name='avaiblem' placeholder='Avaible'></input>
</th>
</form>
</tr>
</tbody>
<tbody class='av'>
<tr>
<form method='POST'>
<input type='hidden' name='id' value='$id'></input>
<th><a>Nimi</a>
<input name='namem' placeholder='Name'>
<button type='submit' name='button' class='butt' value='+'></button>
</input>
</th>
<th><a>JUra</a>
<input name='productm' placeholder='Product'></input>
</th>
<th><a>Asi</a>
<input name='pricem' type='number' step='1.00' placeholder='Price'></input>
</th>
<th><a>Ei</a>
<input name='avaiblem' placeholder='Avaible'></input>
</th>
</form>
</tr>
</tbody>
<table>

$(document).ready( function() {
$('th input').slideUp();
$('th a').click( function() {
$('th input').slideUp();
var clicks = $(this).data('clicks');
if (clicks) {
$(this).closest(".butt").hide();
} else {
$(this).closest(".butt").show();
}
$(this).data("clicks", !clicks);
$(this).closest('th').find('input').slideToggle();
});
});
Not sure if i got your requirement right. But this would show only one button for the column you clicked. Right?

That did not fix my problem, It still shows all the buttons in each column. And also, slide up in click function is soo wrong, because I cant hide my input when I press the column cell again.
I also changed all the table header cells to standard cells.

jQuery Copy dynamically added table row values into next row

<table>
<tr>
<td>Name</td>
<td>Location</td>
<td>Date</td>
<td>Valid</td>
<td>Add</td>
</tr>
<tr class="tr_clone">
<td>
<input type="text" >
</td>
<td>
<input type="text" >
</td>
<td>
<input type="text" class="datepicker">
</td>
<td>
<input type="checkbox" >
</td>
<td>
<input type="button" name="add" value="Add">
</td>
</tr>
</table>
I need to insert only the values from the table row (not include the input filed) into next row in the table.
Please give your valuable suggestions.

i'll give you something for your information
var localDb = [];
var emptyVar = '';
(function(){
//define local storage
var dataFiles = JSON.parse(localStorage.getItem('key'));
console.log(dataFiles);
if (dataFiles == null){
$('#no-data').show();
//alert('its working');
}else{
$('#no-data').hide();
$('.data-box').html('<table><tbody><tr><th>Serial No</th><th>Name</th><th>Age</th><th>Email</th><th>Address</th><th>Options</th></tr></tbody><tbody id="uploadFiles"></tbody></table>');
for (var i=0; i<dataFiles.length; i++){
localDb.push(dataFiles[i]);
emptyVar += '<tr id="number'+i+'">';
emptyVar += '<td>'+i+'</td>';
emptyVar += '<td>'+dataFiles[i].name+'</td>';
emptyVar += '<td>'+dataFiles[i].age+'</td>';
emptyVar += '<td>'+dataFiles[i].email+'</td>';
emptyVar += '<td>'+dataFiles[i].address+'</td>';
emptyVar += '<td>'+'<input type="button" value="Remove" onclick="getId(this);" />'+'</td>';
emptyVar += '</tr>'
};
$('#uploadFiles').html(emptyVar);
};
})();
function add(){
var name = $('#name').val();
var age = $('#age').val();
var email = $('#email').val();
var address = $('#address').val();
var fullDetails = {};
fullDetails.name = name;
fullDetails.age = age;
fullDetails.email = email;
fullDetails.address = address;
localDb.push(fullDetails);
window.localStorage.setItem('key',JSON.stringify(localDb));
window.location.reload();
};
function getId(e){
var removeID = e.closest('tr').id;
//alert(removeID);
var dataFiles = JSON.parse(localStorage.getItem('key'));
localDb.pop(dataFiles[removeID]);
$('#'+removeID).remove();
window.localStorage.setItem('key',JSON.stringify(localDb));
window.location.reload();
};
* {
box-sizing:border-box;
-webkit-box-sizing:border-box;
-ms-box-sizing:border-box;
-moz-box-sizing:border-box;
}
.outer-wrapper {
float:left;
width:100%;
}
.form-area {
width:100%;
float:left;
height:100%;
background:#CCC;
padding:15px;
}
.data-box {
width:100%;
float:left;
height:100%;
margin-top: 6px;
}
input[type='text']{
width:20%;
float:left;
padding:10px 15px;
margin-bottom:15px;
margin-right: 15px;
}
input[type='button']{
width:15%;
float:left;
margin-top: 1px;
padding:8px 15px;
margin-bottom:15px;
background:#F00;
border:none;
color:#fff;
font-size:15px;
text-transform:uppercase;
cursor:pointer;
}
#no-data {
font-size: 60px;
margin-top: 15%;
opacity: 0.5;
text-align: center;
text-transform: uppercase;
}
table,tbody {
width: 100%;
float: left;
}
tr {
width:100%;
float:left;
}
th {
font-size:18px;
color:#000;
font-weight:bold;
}
td , th{
width:18.3%;
float:left;
text-align:center;
border:1px solid #000;
padding: 15px;
}
td {
min-height:55px;
}
td input[type="button"] {
padding: 7px 15px;
font-size: 12px;
margin: 9px 0;
width: 100%;
}
td:last-child {
padding: 0 15px;
}
.form-area h2 {
margin: 0;
padding-bottom: 15px;
text-align: center;
}
td:first-child ,th:first-child {
width: 8%;
}
td:nth-child(2), th:nth-child(2) {
width: 8%;
}
td:nth-child(3), th:nth-child(3) {
width: 7%;
}
td:nth-child(5), th:nth-child(5) {
width: 50%;
}
td:last-child ,th:last-child {
width: 8%;
}
<div class="outer-wrapper">
<div class="form-area">
<h2>Fill your data</h2>
<input type="text" placeholder="Name" id="name" />
<input type="text" placeholder="Age" id="age" />
<input type="text" placeholder="Email" id="email" />
<input type="text" placeholder="Address" id="address" />
<input type="button" value="Submit" id="sumbit" onclick="add();" />
</div><!-- /.form-area -->
<div class="data-box">
<h2 id="no-data">No data found here </h2>
</div><!-- /.data-box -->
</div><!-- /.outer-wrapper -->

Try this code:
var new_row = '<tr>';
$('table .tr_clone td').each(function(){
new_row += '<td>'+$(this).find('input').val()+'</td>';
});
new_row += '</tr>';
$('table').append(new_row);

<--HTML--->
<table id="mytable">
<tr>
<td>Name</td>
<td>Location</td>
<td>Date</td>
<td>Valid</td>
<td>Add</td>
</tr>
<tr class="tr_clone">
<td>
<input type="text" id="tname">
</td>
<td>
<input type="text" id="tloc">
</td>
<td>
<input type="text" class="datepicker" id="tdate">
</td>
<td>
<input type="checkbox" class="datepicker">
</td>
<td>
<input type="button" name="add" value="Add" id="addbtn">
</td>
</tr>
</table>
/**JQUERY**/
$("#addbtn").click(function(){
var name = $("#tname").val();
var loc = $("#tloc").val();
var date = $("#tdate").val();
$('#mytable tr:last').after('<tr><td>'+name+'</td><td>'+loc+'</td><td>'+date+'</td></tr>');
});

how to remove this currency mark from js?

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);
...
}

We Keep Coding

JavaScript is the programming language of the Web.

How to pass a html table to controller in rails? - javascript

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...

Related

Need Assist with adding an undo and redo button to my CRUD Table

Webpage output does not last

How to show one button element in table column

jQuery Copy dynamically added table row values into next row

how to remove this currency mark from js?

Categories

Resources