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
You know, you should add an option to export this baby to PDF ;)
Print > Save as PDF
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
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.
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?
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
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
You should allow for the currency to be set by the user. Great work
Nice, might have to start using this..
Nice, nice and Nice!
k.
Pound signs confuse it good ;-)
The next step is obviously a WordPress theme, yes?
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.
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.
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.
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.
Hi!
If you find a way, please let me know. In Italy we also have 2 taxes (4% and 20%).
Thanks,
-L.
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.
this is getting really nice, even usable!! ;)
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?
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.
Awesome stuff.
I am really thinking about adopting this method for myself.
Thanks.
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.
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
This is plain awesome! The Printlimiminator than this… Amazing job Chris!
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
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.
This is just awesome. Grateful for this piece Chris.
Great Job!
This is Awesome!
Nice Chris.
This is great!
Love the changes since the previous version was posted Chris! :)
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)
Same as above, I can’t manage to convert the code into £ sterling…
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
PDF Creator is free and adds a “Print to PDF” option on any Windows application. http://sourceforge.net/projects/pdfcreator/
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 ;)
Great Job. Defo it will be my first choice.
but can i export the invoice to .PDF
This is great! I’m so tired of using a Quickbooks template…
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
simple+customizable+usefull=great!
tks!
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
Hi guys if someone can change the currency of the invoice please let me know.
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
If you wish to use GBP / pounds sterling (£) then don’t forget to use the HTML entity version £ instead of the literal character.
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 £ for pounds and € 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….
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:
₦
€
£
$
¥
999
p.s. the last one 999 is just a “control”….