Javascript - 将计算值输入发票的文本区域

标签 javascript jquery html textarea invoice

所以我的任务是创建发票。我能够做到这一点,并用它来计算总额、税金和小计。

我现在需要做的是获取我在文本区域中输入的值。

<textarea  input type ="text" name = "textarea" id = "textarea" rows = "12" cols = "180"></textarea>

我将把迄今为止的代码放在下面。它会计算,但我希望输入的值位于我在“当前发票”下方创建的大文本区域中。

类似于(下面的内容将进入文本区域)

---Item Code---             ---Item Name-----        ----Item Cost----     ----Quantity----    
   (user input)                  (user input)               user input             user input

---  Subtotal----                ---tax-------        ----Total------
     (calculation)               (calculation)           (calculation)

我将向您展示我的代码

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


        <h1>Invoice Manager</h1>

        <style type "text/css">
        div      {position: absolute;
                  top: 200px;
                  left: 90px;
                  z-index: 1;}
        l         
        </style>
        <script src="//code.jquery.com/jquery-1.11.0.min.js"></script>

        <script type = "text/javascript">


        function computeCost(){
            var code = document.getElementById("code").value;
            var code = code; // item code

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

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

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

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

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

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

            var textContent = document.getElementById("textarea").value;





            document.getElementById("subtotal").value = subtotal;

            document.getElementById("tax").value = tax;

            document.getElementById("total").value = total;

            document.getElementById("textContent").value = textContent;


        }


        </script>



    <body>

    <form action = ""method = "post" name = "myForm">   
        <table>

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

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

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

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

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

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

    <textarea  input type ="text" name = "textarea" id = "textarea" rows = "12" cols = "180"></textarea>
    </label>




            <table>

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

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

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

          </table>
    </form>




      <form>
        <div id="AddItemButton">
            <td align = "left"><input type="button" value= "Add Item" id = "add" onclick="computeCost();"/>
            <td> 
        </div>
      </form>




</body>
</html>

有什么想法吗?我正在努力在文本区域中输入值。

我尝试调用“getElementById(input = 'text').value;”但这没有用。

如有任何帮助,我们将不胜感激。

编辑:

这是我的文本区域

看起来工作正常

document.getElementById('textarea').value =  "--" + code + "--" + " " + " " + "--" + "--" + itemName + "--" + " " + " " + "--" + cost +"--" + " " + " " + "--" + quantity + "--" + " " + " " + "--" + subtotal + "--" + " " + " " + " " + "--" + tax + "--" + " " + " " + "--" + total + "--";

这可能不是正确的代码。

最佳答案

如果您想对文本区域进行一些格式化,您可以使用 TINYMCE

您可以在文本区域附加 html 元素。

关于Javascript - 将计算值输入发票的文本区域,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26498634/

相关文章:

javascript - 查看一个数组有多少个值相同

使用其他脚本后,Javascript 脚本不运行

javascript - Google Chrome 中的 jQuery 问题?淡入淡出

javascript - 如何解决这个烦人的 jQuery 鼠标悬停问题?

javascript - Flexnav 菜单按钮仅使用其内容的宽度

html - 我想在 HTML 和 CSS 中创建一个小的方形颜色填充框。最重要的是——我想在框后写一行

javascript - 在 Here map 上隐藏/显示 map 标记

javascript - Angular Js 试图从主按钮回调中动态更改模式文本并且不起作用

javascript - 单击鼠标左键的上下文菜单?

javascript - 如何使用一个 XSLT 文件中的变量到另一个 XSLT 文件