HTML - Invoice: Как добавить значения в текстовое поле и вычислить итоговое значение

Я смог создать шаблон, но я не уверен, что делать дальше.

Когда я нажимаю кнопку "Добавить элемент", я хочу, чтобы значения вошли в текстовую область, которую я создал внизу, и изменили промежуточный итог и итог по мере добавления элементов.

<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>
Источник

2 ответа

Решение

У меня не так много времени, чтобы дать отполированный сценарий, но это обеспечивает базовую функциональность EDIT: добавленные теги сценария и основные вещи JQUERY отмечают, что из-за загрузки JQUERY из Интернета он не будет работать без подключения к Интернету, если вы хотите использовать его без Интернета con, скачайте скрипт и свяжите его локально

<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>
Источник

Это просто необходимые 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>

Источник
Другие вопросы по тегам