HTML - 發票：如何給文本字段添加值並計算總計

我能夠創建模板，但我不確定要從這裏執行什麼操作。HTML - 發票：如何給文本字段添加值並計算總計

當我點擊我的添加項目按鈕時，我希望這些值進入我創建的文本區域的底部，並在繼續添加項目時更改小計和總計。

<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個項目。

total =（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>

來源

2014-10-20 user3577397

你看到這篇文章對CSS技巧這個話題？ http://css-tricks.com/examples/EditableInvoice/ – 2014-10-20 18:04:05

是的，我簡單地看到了這一點，但我的發票需要與我創建的發票類似。我認爲它需要完全由用戶生成。 – user3577397 2014-10-20 18:06:25

我沒有太多的時間給拋光腳本，但這提供了基本的功能編輯：添加腳本標籤和基本的JQUERY東西請注意，因爲從互聯網加載JQUERY，它不會工作沒有互聯網連接，如果你想使用它沒有互聯網控制，下載腳本和鏈接它在本地

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

來源

2014-10-20 18:19:01

謝謝。我想我可以用這個。我試着將它添加爲我的腳本，但無法將它添加到下面的textarea中。我看到你將'textarea'分配給了你創建的'textContent'。我的代碼的底部有一個表單，它會顯示「onclick =」textarea「，這應該將TextContent帶到textarea，對吧？ – user3577397 2014-10-20 21:26:11

如果我編輯我的代碼並放在上面，你能幫助我嗎？就像我越來越接近，但我不能讓我的計算值進入下面的文本字段 – user3577397 2014-10-21 01:36:43

這應該是它自己的工作，但你需要jquery加載，並把它放在一個合適的功能。給我一分鐘和不適當的更新後 – 2014-10-21 07:03:06

這僅僅是必要的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>

來源

2014-10-20 18:23:38 DividedByZero

HTML - 發票：如何給文本字段添加值並計算總計

回答

相關問題