HTML - 发票：如何向文本字段添加值并计算总计答案

【问题标题】：HTML - Invoice: How to add values to text field and calculate totalHTML - 发票：如何向文本字段添加值并计算总计
【发布时间】：2014-10-20 17:20:10
【问题描述】：

我能够创建模板，但我不确定从这里做什么。

当我单击添加项目按钮时，我希望值进入我在底部创建的文本区域，并在我不断添加项目时更改小计和总计。

<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>

这就是我的模板。当我在这些字段中输入项目代码、项目名称、项目成本和数量时，我希望将这些值放在底部的文本区域中。我想我需要在脚本中写一些东西。

我不确定如何实现这一点，但我认为用户添加的第一批信息可能等于 a 之类的变量

那么输入的第二个值可以等于b

假设用户添加了 3 个项目。

总计 = (a + b + c)

或者类似的东西。

这是一个“添加项目”的示例。我希望这些提交内容出现在我创建的文本字段中

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

     3                        Dell              499                  1

关于我能做什么的任何想法？我很茫然

谢谢

编辑：我正在添加我的脚本，我想知道它是否有问题

<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>

【问题讨论】：

你看过这篇关于css技巧的文章吗？ css-tricks.com/examples/EditableInvoice
是的，我简要地看到了这一点，但我的发票需要采用与我创建的发票类似的布局。我认为它需要完全由用户生成。

标签： javascript html css invoice invoices

【解决方案1】：

我没有太多时间给出一个优美的脚本，但这提供了基本的功能编辑：添加脚本标签和基本的 JQUERY 东西请注意，由于从 Internet 加载 JQUERY，如果没有 Internet 连接，它将无法工作，如果您想在没有 Internet 的情况下使用它，请下载脚本并在本地链接它

<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>

【讨论】：

谢谢。我想我可以用这个。我尝试将此添加为我的脚本，但无法将其添加到下面的文本区域。我看到您将“textarea”分配给您创建的“textContent”。我的代码底部有一个表单，上面写着“onclick =”textarea”。这应该将来自 TextContent 的内容带到 textarea，对吧？
如果我编辑我的代码，并把它放在上面，你能帮我吗？我觉得我快要接近了，但我无法将我的计算值放入下面的文本字段中。
这实际上应该独立工作。但是您需要加载 jquery 并将其放入适当的函数中。给我一分钟，我会更新帖子
我想我没有合适的功能，因为我无法让它工作。
我应该使用 document.write 来获取表格中的值吗？我正在尝试在 document.write 中获取大量代码，但由于某种原因我不能这样做

【解决方案2】：

这只是必要的 JS 和 HTML，没什么花哨的：

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>

【讨论】：