Grow your CSS skills. Land your dream job.

Editable/Printable Invoice, Version 2

Published by Chris Coyier

I knew as soon as I released the previous version of the Editable Invoice that using some JavaScript to spiff it up would be a good idea. I was thinking of doing a screencast on it perhaps, but then multiple people stepped up and starting doing it themselves! Everyone did a great job, but ultimately the version I'm releasing as version 2 is by Vinh Pham.

New features:

  • Inserts todays date automatically
  • Few extra things are editable, like "invoice" title and "terms"
  • Does the math automatically when you change quantities and amounts
  • Add and remove rows of items
  • Edit the logo by providing a URL path to a new logo
  • Rollover colors for the textareas to indicate editability
  • Print stylesheet to eliminate extra functionality bits from printing

View Demo   Download Files

Big thanks to Vinh, who says:
If interested, you can learn more about: online invoices and bookkeeping.

Comments

  1. Ahmed
    Permalink to comment#

    You know, you should add an option to export this baby to PDF ;)

    • Print > Save as PDF

    • Permalink to comment#

      On mac you can save as pdf easily but windows theres no option in the print dialogue.

      You can install a fake printer that will convert to pdf but some people may not know how so you should probably add that, it would be useful.

    • If you install Adobe Reader I think it becomes a default option. I just don’t see a huge need to reinvent the wheel there with a lot of fancy technology when it’s easier to use tools built to do the job and have a wider usefulness range.

      Like Alton Brown says: “NO uni-taskers!”

    • Thanks to You & Vinh Phan for the great code.

      PS: I love Alton Brown! lol

    • Ryan T
      Permalink to comment#

      Acrobat Pro is required to save or print to PDF on Windows. It is not included in Reader. As commenter Chris stated, there are alternative free open source options to add a pseudo printer to “print to pdf”.

      There are open source “export to pdf” libraries that can be implemented on the page, such as dompdf .

    • If you use Firefox as your web browser (and I’m sure there are others) the feature for PDF printing is built in.

    • Permalink to comment#

      Love it. I’ll start using it ASAP. I read a great article on A List Apart yesterday about giving clients an option to approve an invoice or quote with a “digital signature” using PDF and PHP. Would your invoicing system above lend itself to a digital signature like that without too much hassle?

    • Iain
      Permalink to comment#

      This looks great..
      Although it doesn’t work when using pounds.. :(
      Is there any book keeping things like this which do work with pounds?

      Thanks

    • Permalink to comment#

      Hi Chris! Or other code savvy people,

      I was wondering, is there anyway to change the default currency for this form to Swedish Krone? I tried modifying the php but it doesn’t seem to recognize the syntax.

      Cheers!

      -Ot

  2. Manne
    Permalink to comment#

    You should allow for the currency to be set by the user. Great work

  3. Nice, might have to start using this..

  4. Permalink to comment#

    Nice, nice and Nice!

    k.

  5. Pound signs confuse it good ;-)

  6. Permalink to comment#

    The next step is obviously a WordPress theme, yes?

  7. I dunno why, but having that super-editable interface and then having the values update on blur rather than onchange coupled with the ugly ‘Add Row’ button just makes it seem ‘old’. Still, love the conecept.

  8. Ryan T
    Permalink to comment#

    Hey Chris, I notice the css-tricks site is loading slower for me today than usual. It seems to take a long time to locate the site.

    • Ryan T
      Permalink to comment#

      FYI, it is loading better now. I saw on twitter where you enabled cache yesterday or today. It may have been just building the cache, but who knows…all is good now. Thanks for all your great work and generosity to share it with the community.

  9. Permalink to comment#

    Thanks Chris, it will be very usefull.

    I’m trying to add two new element in the calculation, the two taxes we got here in the province of Quebec.

    After the Subtotal I got to add the TPS (Subtotal * 0.05)
    And after the TPS, I got to add the TVQ (Subtotal + TPS * 0.075) and then calculate Subtotal + TPS + TVQ to get the Total…

    I’m working on this since this morning but I can’t figure out.

    • Permalink to comment#

      Hi!
      If you find a way, please let me know. In Italy we also have 2 taxes (4% and 20%).
      Thanks,
      -L.

  10. Permalink to comment#

    If you are a windows user and you can’t print as a PDF, look no further. There is a program called CuteWriter that basically give you the option to print anything as a PDF.

    You also have to install something called ghost script, but it will prompt you and do so after the installation.

    http://www.cutepdf.com/download/CuteWriter.exe

    Thanks Chris! This is going to save me money on having to upgrade my freshbooks account…for now.

  11. Permalink to comment#

    this is getting really nice, even usable!! ;)

  12. Matt
    Permalink to comment#

    Super nice to use and learn from. Thanks.

    For me, I would love to be able to drag sort the line items. What direction would you go to do this?

  13. Permalink to comment#

    This is really great Chris (and Vinh). One thing I would do to improve it is have it automatically change the “quantity” to “1″ when you fill in the unit cost. That would save an extra step in many cases.

    But a great little mini-app, and a great idea.

  14. Permalink to comment#

    Awesome stuff.
    I am really thinking about adopting this method for myself.

    Thanks.

  15. Rob
    Permalink to comment#

    Weirdness…

    Try deleting the logo, then refresh the page…watch the invoice number. (It fills with the date)

    Then try deleting the logo AND changing the invoice number, then refresh the page…watch the customer name. (It fills with the invoice number)

    Otherwise…very cool.

  16. Joe
    Permalink to comment#

    This looks great..
    Although it doesn’t work when using pounds.. :(
    Is there any book keeping things like this which do work with pounds?

    Thanks

  17. This is plain awesome! The Printlimiminator than this… Amazing job Chris!

  18. Barry
    Permalink to comment#

    This is awesome. Can we save as non-editable html (eg. 00123.html) file so that we can email to customer.

    • I think you can find some php scripts that could easily accomplish that functionality.

      -A

    • Permalink to comment#

      There’s nothing that stops you from saving it in your browser, just go File > Save. Of course, if you want them to be saved automatically on the server whenever you push a button, you could write something in PHP for that.

  19. David
    Permalink to comment#

    This is just awesome. Grateful for this piece Chris.

  20. Permalink to comment#

    Great Job!
    This is Awesome!

  21. Navas
    Permalink to comment#

    Nice Chris.

  22. Will
    Permalink to comment#

    This is great!

    Love the changes since the previous version was posted Chris! :)

  23. Permalink to comment#

    This absolutely rocks! saves having invoicing being software dependent. Meaning anyone can create an invoice for me leaving even more time for work ;O) meaning more invoices yippee!

    But please please, how can I get it to work with UK £ ? Hope you can point me in the right direction.

    Every time I come to this site you have a solution! Thankyou :o)

  24. Iain
    Permalink to comment#

    Same as above, I can’t manage to convert the code into £ sterling…

    • Permalink to comment#

      Hi Iain, A colleague of mine has changed it to sterling for me. So if you want a copy just send me an email. :o) cheers mark

  25. Sid
    Permalink to comment#

    PDF Creator is free and adds a “Print to PDF” option on any Windows application. http://sourceforge.net/projects/pdfcreator/

  26. Permalink to comment#

    I should use it, maybe this another solution beside my current invoice Bamboo Invoice that running great too.

    If this Invoice tools have ability to record history the transaction will be better ;)

  27. Permalink to comment#

    Great Job. Defo it will be my first choice.
    but can i export the invoice to .PDF

  28. Chris
    Permalink to comment#

    This is great! I’m so tired of using a Quickbooks template…

  29. Adam
    Permalink to comment#

    Can someone please explain how to change the currency? I change in the main file and all “$” in the JS, but that doesnt get them all, and also results in NaN

  30. Felix
    Permalink to comment#

    simple+customizable+usefull=great!
    tks!

  31. ronald
    Permalink to comment#

    hi guys, I am a newbie programmer . I have download this Editable invoice and I am trying to use it for project . I want to retrieve the ID of the (add and remove items) for me to perform sql query does anyone knows how to do it . please help me thank you

  32. Marlon Lizardo
    Permalink to comment#

    Hi guys if someone can change the currency of the invoice please let me know.

  33. Permalink to comment#

    I would like to change the amount paid value into a tax(VAT) calculation? I’ve tried several solutions but I can’t get it to work. Can anoyone modify the example.js for me so that the amount paid is replaced with a tax calculation?
    Thanks in advance.

    Riekelt

    • Chris
      Permalink to comment#

      If you wish to use GBP / pounds sterling (£) then don’t forget to use the HTML entity version £ instead of the literal character.

  34. As for changing the currency….open the js folder, open the example.js file….in the function that starts with $(“#addrow”).click(function(){ look for textarea class =”cost”, change the dollar sign to &#163 for pounds and &#128 for euro then save your recent changes….open the editable invoice and click on add row you will see the new currency symbol….now you may have to find the rest to change….be careful not to change a variable….

  35. i have a question of my own….. i added a drop down box to the index.php file to allow users select different currencies….please chris coyier how do i change the currency value on my invoice upon the selection of any currency? …..see my html drop down box:
    &#8358
    &#128
    &#163
    &#36
    &#165
    999

    p.s. the last one 999 is just a “control”….

This comment thread is closed. If you have important information to share, you can always contact me.

*May or may not contain any actual "CSS" or "Tricks".