...

View Full Version : Adding tax to an invoice and performing a bind



mbarandao
11-15-2010, 10:40 PM
Good day all:

I have an editable invoice that I have added a sales tax option with a js function doMath(). Prior to my modification with the sales tax option all worked well. the invoice which code is the following:



<textarea id="address" rows="6" cols="38" disabled="true">Website:
Email:
TaxID:
</textarea >
<div id="vehicleid"><label><strong><u>Vehicle Information</u></strong></label><p>Year: <?php echo $edit_caryear?></p><p>Type: <?php echo $dhtmlgoodies_categoryupdate?></p><p>Make: <?php echo $dhtmlgoodies_subcategoryupdate?></p><p>ClientID# <?php echo $edit_clientID?></p><p>Current Mileage <?php echo $edit_mileage?></p></div>


<!--</div>-->
<!--<div id="logo">

<div id="logoctr">
<a href="javascript:;" id="change-logo" title="Change logo">Change Logo</a>
<a href="javascript:;" id="save-logo" title="Save changes">Save</a>
|
<a href="javascript:;" id="delete-logo" title="Delete logo">Delete Logo</a>
<a href="javascript:;" id="cancel-logo" title="Cancel changes">Cancel</a>
</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/logo.png" alt="logo" width="280" height="33" />
</div>-->

</div>

<div style="clear:both"></div>
<br>
<div id="customer">
<?php echo $edit_firstname ?> <?php echo $edit_lastname?><p><?php echo $edit_address?></p><p><?php echo $edit_city?>, <?php echo $edit_state?>, <?php echo $edit_zipcode?></p>
</div>

<div id=invoicehead>
<table id="meta">
<tr>
<td class="meta-head">Invoice #</td>
<td><textarea style="background: transparent;" name="invoicenum" id="invoicenun" disabled="true"><?php
srand(time());
$random = (rand()%1000000);
print("$random");
?></textarea></td>
</tr>
<tr>

<td class="meta-head">Date</td>
<td><textarea name="date" id="date">December 15, 2009</textarea></td>
</tr>
<tr>
<td class="meta-head">Amount Due</td>
<td><div name="due" class="due">$0.00</div></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">
<!--<label for=\"dhtmlgoodies_category\">Make:</label>-->
<?php echo $edit_servicearea?><br>
<!--<SELECT NAME="edit_servicearea">
<OPTION>Select One
<OPTION>Air Intake
<OPTION>Brake
<OPTION>Clutch
<OPTION>Cooling System
<OPTION>Driveshaft & Axle
<OPTION>Engine Mechanical
<OPTION>Exhaust
<OPTION>Steering
<OPTION>Suspension
<OPTION>Transmission
<OPTION>Other
</SELECT>-->
<a class="delete" href="javascript:;" title="Remove row">X</a></div></td>
<td class="description">

<textarea name="servicedesc" cols="255" rows="20"><?php echo str_replace('<br/>', "\n", "$inputbox");?></textarea></td>
<td><textarea name="cost" class="cost">$0.00</textarea></td>
<td><textarea name="qty" class="qty">1</textarea></td>
<td><span name="price" class="price">$0.00</span></td>
</tr>

<tr class="item-row">
<td class="item-name"><div class="delete-wpr">
<textarea name="Labor rate" cols="20" rows="3">Labor</textarea><a class="delete" href="javascript:;" title="Remove row">X</a></div></td>

<td class="description" wrap=virtual><textarea>Labor rate for the performance of work --excluding cost for parts.</textarea></td>
<td><textarea class="cost">$75.00</textarea></td>
<td><textarea class="qty" rows="2" cols="10">0</textarea></td>
<td><span class="price">$0.00</span></td>
</tr>

<tr id="hiderow">
<td colspan="5"><a id="addrow" href="javascript:;" title="Add a row">Add a row</a></td>
</tr>

<tr>
<td colspan="2" class="blank"> </td>
<td colspan="2" class="total-line">Subtotal</td>
<td class="total-value"><div id="subtotal">$0.00</div></td>
</tr>
<tr>
<td colspan="2" class="blank"> </td>
<td colspan="2" class="tax-line" style="text-align: left" valign="top">INCLUDE TAX? <input type = "checkbox" id = "taxbox" onclick = "doMath()"><br>DC
5.576%</td>
<td class="total-value"><textarea class="tax" id="tax" >$0.00</textarea></td> </tr>
<tr>

<td colspan="2" class="blank"> </td>
<td colspan="2" class="total-line">Total</td>
<td class="total-value"><div id="total">$0.00</div></td>
</tr>
<tr>
<td colspan="2" class="blank"> </td>
<td colspan="2" class="total-line">Amount Paid</td>
<td class="total-value"><textarea 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>


<!--<div id="terms">
<h5>Terms</h5>
<textarea>NET 30 Days. Finance Charge of 1.5% will be made on unpaid balances after 30 days.</textarea>
</div>-->

</div>
<div>
<SCRIPT LANGUAGE="JavaScript">
document.write('<form><input type=button value="Refresh" onClick="history.go()"></form>')
</script>
</div><br>

<div id="option">
<input type="button" id="button" value="Return to Main Menu" onclick="window.location='/andy/addentry.php' " />
<input type="hidden" name="servicedesc" value="<?php echo $_POST['servicedesc']; ?>">
<br>
&nbsp;<p>
<! I added this button, so that it returns us to the main Menu.>
<INPUT TYPE="button" onClick="window.print()" value="Print" /><br>
&nbsp;</p>
<p><! The above button Clears all the Field's contents ><input type="submit" name="submit" value="Save Changes">
</div>
</form>



the section of the code higlighted in red is where my problem arises. To achieve the desired results(at least so that I thought), I included the following fuction in my js fuction file which is as follows:



function update_total() {
var total = 0;
$('.price').each(function(i){
price = $(this).html().replace("$","");
if (!isNaN(price)) total += Number(price);
});

total =roundNumber(total,2);

$('#subtotal').html("$"+total);
$('#total').html("$"+total);
//$('#tax').html("$"+total);


update_balance();
}
var taxRate = .0575;
function doMath(){
//var subtotal = 0.00;//$('.price').each(function(i);
var subtotal = ('#subtotal');//.html("$"+total);
if (document.getElementById("taxbox").checked) {
tax = subtotal* taxRate; //DC 5.576%
tax = roundNumber(tax,2);//the 2 represent the number of digits to round numbers to after decimal point
//tx = " Incl. 5.576%";
}
document.getElementById("tax").value = "$" +tax;
}function update_balance() {
var due = $("#total").html().replace("$","") - $("#paid").val().replace("$","");
due = roundNumber(due,2);

$('.due').html("$"+due);
}
function update_price() {
var row = $(this).parents('.item-row');
var price = row.find('.cost').val().replace("$","") * 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"><SELECT NAME="edit_servicearea"><option>Select One<option>Air Intake<option>Brakes<option>Clutch<option>Cooling System<option>Driveshaft & Axle<option>Engine Mechanical<option>Exhaust<option>Steering<option>Suspension<option>Transmission<option>Other</select><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();
});

$(".tax").blur(update_total);//binding tax
//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());

});


Again, here my sales tax is highlighted in red. My problem specifically is that I'm unable to:
1.) get the sales tax rate to calculate based on the value of the subtotal, and
2.) on selection for including taxes, to bind the sale tax amount to the total.

I trust someone can provide some guidance!
Mossa

Old Pedant
11-15-2010, 10:50 PM
Ummm...shouldn't that be

var subtotal = $('#subtotal').value;

???

(1) You omitted the $ selector
(2) $(xxx) gets an *OBJECT REFERNCE*. If you want a property of that reference, you must name the propery. In this case, .value

No?

mbarandao
11-15-2010, 10:57 PM
I have tried that as well when the check box is selected, I get the following results :"$NaN.00"

Old Pedant
11-15-2010, 10:58 PM
And why do you sometimes use jQuery and sometimes not???

Why
document.getElementById("taxbox").checked
instead of
$("#taxbox").checked
???

And, finally, your roundNumber( ) function is really unneeded.



function doMath()
{
var tax = 0; // default
if ( $("taxbox").checked)
{
tax = taxRate * $('#subtotal').value;
}
$("tax").value = "$" +tax.toFixed(2);
}

Old Pedant
11-15-2010, 11:00 PM
Well, DEBUG!


function doMath()
{
var tax = 0; // default
if ( $("taxbox").checked)
{
alert("DEBUG subtotal is " + $('#subtotal').value ); // remove when all works
tax = taxRate * $('#subtotal').value;
}
$("tax").value = "$" +tax.toFixed(2);
}

mbarandao
11-15-2010, 11:07 PM
Thanks Old Pedant, I'll attempt you suggested solution and advise of the outcome shortly. Thank you for your time.

mbarandao
11-16-2010, 03:40 AM
The debugging with the with the doMath() seems to be unresponsive when the check box is selected. No errors are displayed either! any ideas?
I disgarded the previous function and used thefollowing:


function doMath(){
var taxRate = .0575;
var tax = 0; // default
if ( $("taxbox").checked)
{
alert("DEBUG subtotal is " + $('#subtotal').value );
tax = taxRate * $('#subtotal').value;
}
$("tax").value = "$" +tax.toFixed(2);
}

Old Pedant
11-16-2010, 03:44 AM
Show the page live. If you aren't getting the alert when the taxbox is checked, then something is is wrong.

mbarandao
11-16-2010, 03:56 AM
Ok, I tried the debugging with the my previous doMath function and got an error. the function which you advised against:


function doMath(){
var taxRate = .0575;
//var subtotal = 0.00;//$('.price').each(function(i);
var subtotal = $('#subtotal').value;//('#subtotal');//.html("$"+total);
$("#taxbox").checked
alert("DEBUG subtotal is " + $('#subtotal').value ); // remove when all works
//if (document.getElementById("taxbox").checked) {
tax = subtotal* taxRate; //DC 5.576%
tax = roundNumber(tax,2);//the 2 represent the number of digits to round numbers to after decimal point
document.getElementById("tax").value = "$" +tax;
}



the error was : "subtotal is undefined".

glenngv
11-16-2010, 10:10 AM
To get and set the value of a textbox in jQuery, you use .val()


var taxRate = 0.0575;
function doMath(){
var tax = 0;
if ($("#taxbox").attr('checked')) {
tax = $("#subtotal").val() * taxRate;
}
$("#tax").val("$" + tax.toFixed(2));
}

sybil6
11-16-2010, 12:23 PM
if($("input[name=anonym]").is(':checked')){

}
to evaluate the is or not checked, use
is(':checked').

mbarandao
11-16-2010, 01:23 PM
Thanks sybil6 and glenngv for your replies. However, still unsuccesfull! Glenngv, I have tried replacing my existing doMath() with your suggestion, the outcome is that the checkbox when selected, nothing happens. I tried to debug using:


alert("DEBUG subtotal is " + $('#subtotal').val() );

I get "DEBUG subtotal is (blank)". When I debugged earlier with "$('#subtotal').value, it came out with a message" DEBUG subtotal is undefined". Any thoughts on this?

Sybil6, on your suggestion, I'm affraid, I need more clarity --can you elaborate!

Mossa

sybil6
11-16-2010, 01:46 PM
If you cant get the val maybe you need to parsefloat it

ex:

var total_prix= parseFloat($('#prix').val()) * initVal;


edit: that's just an example change it according to your variable names

mbarandao
11-16-2010, 03:19 PM
I'm getting
Uncaught ReferenceError: initVal is not defined.
how is this defined?

used in this manner:

var subtotal = parseFloat($('#subtotal').val())* initVal;

glenngv
11-16-2010, 07:39 PM
If you parseFloat or parseInt a blank string, it returns a NaN. It's better to use Number().


var taxRate = 0.0575;
function doMath(){
var tax = 0;
if ($("#taxbox").attr('checked')) {
tax = Number($("#subtotal").val()) * taxRate;
}
$("#tax").val("$" + tax.toFixed(2));
}

Edit
I didn't realize that subtotal looks like this - <div id="subtotal">$0.00</div> - I thought it was a textbox
The function should be like this then

var taxRate = 0.0575;
function doMath(){
var tax = 0;
if ($("#taxbox").attr('checked')) {
var subtotal = Number($("#subtotal").text().replace(/\$/, ""));
tax = subtotal * taxRate;
}
$("#tax").val("$" + tax.toFixed(2));
}

mbarandao
11-17-2010, 04:36 AM
Thanks Glenngv, that last function did the task of calculating the sales tax based on the subtotal. Onclick of the tax check box the percentage is calculated. Now I'm trying to bind it to the total.

mbarandao
11-17-2010, 06:24 AM
This is my function for update_total:


function update_total() {
var total = 0;
$('.price').each(function(i){
price = $(this).html().replace("$","");
if (!isNaN(price)) total += Number(price);
});
total =roundNumber(total,2);

$('#subtotal').html("$"+total);
$('#total').html("$"+total);

update_balance();
}


currently this function does not include my sales tax option(based on the selection of the check box), I'm thinking that the following code is what I need to enable the total to incude the value of the calculated tax amount.


var total = $("#subtotal").html().replace("$","") + $("#tax").val().replace("$","");



I need some help incorporating these two codes, thus enabling my total box to include the tax amount if the check box is selected.

glenngv
11-17-2010, 10:34 AM
You have to convert the values to numbers as they are strings before adding them. Otherwise, the values will be concatenated. And if #tax is not a textbox, don't use .val() to get its text, use .text() or .html() instead.

mbarandao
11-18-2010, 06:13 AM
Problem resolved! Here's my final solution:



var taxRate = 0.0575;

function update() {
var subtotal = 0;
$('.price').each(function(i) {
price = $(this).html().fromCurrency();
if (!isNaN(price)) subtotal += price;
});
$('#subtotal').html(subtotal.toCurrency());

//doMath
var tax = ($('#taxbox').click(update)) ? (subtotal * taxRate) : 0;
$('#tax').val(tax.toCurrency());

var total = subtotal + tax;
$('#total').html(total.toCurrency());

//update_balance
var due = total - $('#paid').val().fromCurrency();
$('.due').html(due.toCurrency());
}

function update_price() {//This could also be migrated into update
var row = $(this).parents('.item-row');
var price = row.find('.cost').val().fromCurrency() * Number(row.find('.qty').val());
isNaN(price) ? row.find('.price').html("N/A") : row.find('.price').html(price.toCurrency());
update();
}

function bind() {
$('.cost').blur(update_price);
$('.cost').keyup(update_price);//added
$('.qty').blur(update_price);
$('.qty').keyup(update_price);//added
}

Again, I thank all who assited (glenngv, Old Pedant and sybil6).
Mossa



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum