javascript coding with £ issue

[ianhaney]

Hi

I have a invoice script that I got from the following link

https://css-tricks.com/editable-invoice-v2/

I am trying to get the invoice stored in a mysql database which it is doing but the prices are being added into the database as 0.00 and found out that it is because it just needs to be numeric but the javascript is adding a £ of the price

I tried removing £ from the javascript code but it makes it appear on the page as NaN as the javascript updates the totals itself

Is there a way to remove the £ from the javascript so the price gets stored correctly in the mysql database?

below is the coding from the javascript file

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("£","");
    if (!isNaN(price)) total += Number(price);	
  });

  total = roundNumber(total,2);

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

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"><textarea>Item Name</textarea><a class="delete" href="javascript:;" title="Remove row">X</a></div></td><td class="description"><textarea name="description">Description</textarea></td><td><textarea class="cost" name="unit_cost">£0</textarea></td><td><textarea class="qty" name="qty">1</textarea></td><td><span class="price"><textarea class="price" name="price">£0</textarea></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();
  });
  
  $("#date").val(print_today());
  
});

Below is the code from my new-invoice.php file, thought it might help

<?php
if(isset($_POST["submit"])){
$hostname='localhost';
$username='';
$password='';

try {
$dbh = new PDO("mysql:host=$hostname;dbname=dbname",$username,$password);

$dbh->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION); // <== add this line

$date= date('Y-m-d',strtotime($_POST['date']));

$sql = "INSERT INTO invoices (invoice_id, customer_name, date, item, description, unit_cost, qty, price, subtotal, amount_paid, balance_due)
VALUES ('".$_POST['invoice_id']."','".$_POST['customer_name']."','".$date."','".$_POST['item']."','".$_POST['description']."','".$_POST['unit_cost']."','".$_POST['qty']."','".$_POST['price']."','".$_POST['subtotal']."',
'".$_POST['amount_paid']."','".$_POST['balance_due']."')";

if ($dbh->query($sql)) {
echo "<script type= 'text/javascript'>alert('New Record Inserted Successfully');</script>";
}
else{
echo "<script type= 'text/javascript'>alert('Data not successfully Inserted.');</script>";
}

$dbh = null;
}
catch(PDOException $e)
{
echo $e->getMessage();
}

}

?>

<div id="page-wrap">
        
        <form action="" method="post">
        
        <textarea id="header">INVOICE</textarea>
        
            <textarea id="address">
            OUR ADDRESS
            </textarea>

            <div id="logo">
              <img id="image" src="images/logo/logo.jpg" />
            </div>
        
        <div style="clear:both"></div>
        
        <div id="customer">

            <textarea id="customer-title" name="customer_name">
            Widget Corp.
c/o Steve Widget
</textarea>

            <table id="meta">
                <tr>
                    <td class="meta-head">Invoice #</td>
                    <td><textarea name="invoice_id">000123</textarea></td>
                </tr>
                <tr>

                    <td class="meta-head">Date</td>
                    <td><textarea id="date" name="date">December 15, 2009</textarea></td>
                </tr>
                <tr>
                    <td class="meta-head">Amount Due</td>
                    <td><div class="due">£875.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"><textarea name="item">Web Updates</textarea><a class="delete" href="javascript:;" title="Remove row">X</a></div></td>
              <td class="description"><textarea name="description">Monthly web updates for http://widgetcorp.com (Nov. 1 - Nov. 30, 2009)</textarea></td>
              <td><textarea class="cost" name="unit_cost">£650.00</textarea></td>
              <td><textarea class="qty" name="qty">1</textarea></td>
              <td><span class="price"><textarea class="price" name="price">£650.00</textarea></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"><textarea name="subtotal">£875.00</textarea></div></td>
          </tr>
          <tr>

              <td colspan="2" class="blank"> </td>
              <td colspan="2" class="total-line">Total</td>
              <td class="total-value"><div id="total"><textarea name="total">£875.00</textarea></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" name="amount_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"><textarea name="balance_due">£875.00</textarea></div></td>
          </tr>
        
        </table>
        
        <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 style="clear: both;">
        <input type="submit" value=" Submit " name="submit"/>
        </div>
    </form>
    </div>

Thank you in advance

Ian

[Beverleyh]

Might be easier to target the PHP.

In the $sql = "INSERT INTO invoices ... " line, how about a few str_replace() functions to strip the £ sign? e.g.

".$_POST['price']."

becomes

".str_replace('£','',$_POST['price'])."

[ianhaney]

Hi

Thank you for the reply, appreciate it

I am using another script I found now called simple invoices that is open source but thank you for the reply Beverleyh, appreciate it