HTML - Invoice: How to add values to text field and calculate total

Question

I was able to create the template, but I'm not sure what to do from here.

When I click my add item button, I want the values to go into the text area I created on the bottom and change the subtotal and total as I keep adding items.

<html>
    <head>
        <meta charset = "utf-8">


        <h1>Invoice Manager</h1>

        <style type "text/css">
        div      {position: absolute;
                  top: 200px;
                  left: 90px;
                  z-index: 1;}
        </style>

        <script type = "text/javascript">

        </script>


    </head>

    <body>

        <table>

            <tr>
              <td align="right">Item Code:</td>
              <td align="left"><input type="text" name="code" /></td>
            </tr>

            <tr>
              <td align="right">Item Name:</td>
              <td align="left"><input type="text" name="itemName" /></td>
            </tr>

            <tr>
              <td align="right">Item Cost:</td>
              <td align="left"><input type="text" name="cost" /></td>
            </tr>

            <tr>
              <td align="right">Quantity:</td>
              <td align="left"><input type="text" name="quantity" /></td>
            </tr>
          </table>

          <div id="AddItemButton">
            <td align = "left"><input type="submit" name="Submit" value="Add Item"></td>
          </div>

        </form>

     <br></br> <br></br>
    <font size = "5">Current Invoice</font>

    <hr style = "height:2px;border:none;color:#333;background-color:#333;"></hr>

    <p><label> <br>
            <textarea name = "textarea"
                rows = "12" cols = "180"></textarea>
            </label></p>    

    <form>
            <table>

            <tr>
              <td align="right">Subtotal:</td>
              <td align="left"><input type="text" name="subtotal" /></td>
            </tr>

            <tr>
              <td align="right">Sales Tax:</td>
              <td align="left"><input type="text" name="tax" /></td>
            </tr>

            <tr>
              <td align="right">Total:</td>
              <td align="left"><input type="text" name="total" /></td>
            </tr>

          </table>
    </form>


    <form>      
        <input type = "button" value = "Add Item" onclick="textarea"/> <input type = "text" id = "cost" size ="20" />
    </form>

That's what I have as a template. When I type in Item Code, Item Name, Item Cost and Quantity in those fields, I'd like those values to go in the text area on the bottom. I imagine I would need to write something in the script.

I'm not sure how to achieve this, but I was thinking that the first batch of info the user adds could equal a variable like a

Then the second values inputted could equal b

So let's say the user adds 3 items.

total = (a + b + c)

Or something like that.

Here's an example of what one "Add Item" would do. I'd like these submissions to appear in the text field I created like so

---Item Code---         ---Item Name---      ---Item Cost---       ---Quantity---

     3                        Dell              499                  1

Any ideas on what I could do? I'm at a loss

Thanks

EDIT: I'm adding my script, I'm wondering if there's something wrong with it

<script type = "text/javascript">
        function computeCost(){
            var code = document.getElementById("code").value;
            var a = code; // item code

            var itemName = document.getElementById("itemName").value;
            var b = itemName; // item name

            var cost = document.getElementById("cost").value;
            var c = cost; // calculate cost 

            var quantity = document.getElementById("quantity").value;
            var d = quantity; // calculate quantity of items

            var subtotal = document.getElementById("subtotal").value;
            var e = c * d; // multiplying cost by quantity = subtotal

            var tax = document.getElementById("tax").value;
            var f = e * .7; // multiplying subtotal by tax(.7) = amount of tax owed

            var total = document.getElementById("total").value;
            var g = f + e; //adding tax to subtotal = total value

            document.getElementByID("yo").value = total;



        }

        function clear()
            {
        document.getElementById("a","b","c","d", "e", "f", "g").reset();
            } // end of clear

        </script>

Have you seen this article on this topic on css tricks? http://css-tricks.com/examples/EditableInvoice/ — Martin Malinda, Oct 20 '14 at 18:04
Yeah, I saw that briefly, but my invoice needs to be in a layout similar to the one I created. I think it needs to be completely user generated. — user3577397, Oct 20 '14 at 18:06

Martin Malinda · Accepted Answer · 2014-10-21T07:13:40.403

1

I dont have much time to give a polished script, but this provides basic functionality EDIT: added script tags and basic JQUERY things note that because of loading JQUERY from the internet, it wont work without internet connection, if you wish to use it without internet con, download the script and link it locally

<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
        <script type = "text/javascript">
          $(function(){
  var textContent = $('textarea').val();
    var textRow = "";
    $('input[type=submit]').click(function(){
      $('input[type=text]').each(function(){
        textRow = textRow+$(this).val()+'\t';
      });
      textContent = textContent + '\n' + textRow;
      textRow = "";
      $('textarea').val(textContent);

    });  
});  
        </script>

edited Oct 21 '14 at 07:13

answered Oct 20 '14 at 18:19

Martin Malinda

1,573
11
20

Thank you. I think I can use this. I tried adding this as my script, but couldn't get it to add the values to the textarea below. I see you assigned 'textarea' to 'textContent' which you created. The bottom of my code has a form, and it say "onclick = "textarea". That should bring the from TextContent to the textarea, right? – user3577397 Oct 20 '14 at 21:26
If I edit my code, and put it above, could you help me? I feel like I'm getting close, but I can't get my computed values to go in the text fields below. – user3577397 Oct 21 '14 at 01:36
This should work on its own actually. But you need jquery loaded and put this in an appropriate function. Gimme a min and ill update the post – Martin Malinda Oct 21 '14 at 07:03
I guess I don't have an appropriate function because I can't get it to work. – user3577397 Oct 21 '14 at 14:49
Should I be using document.write to get the values in my tables? I'm trying to get big chunks of code in the document.write, but I can't do it for some reason – user3577397 Oct 21 '14 at 14:50

score 1 · Answer 2 · answered Oct 20 '14 at 18:23

this is just the necessary JS and HTML, nothing fancy:

function id(id){return document.getElementById(id);}
var val1 = 0;
var val2 = 0;
function val(){
  val1 = parseInt(id("t1").value);
  val2 = parseInt(id("t2").value);
  id("total").innerHTML = ((val1 > 0 && val2 > 0))? val1 * val2 : 0;
}

<input id="t1" onkeyup="val()" type="number">
<input id="t2" onkeyup="val()" type="number">
<h1 id="total"></h1>

HTML - Invoice: How to add values to text field and calculate total

2 Answers2