Javascript - Add rows and sum values in field

Question

I have a form with this filed and by button I can add rows: book_desc[], book_pages[]. The field for sum of books_pages[] is book_pages_tot. With my javascript I want to add rows with value in each book_pages field and sum this values in a book_pages_tot field there are the total values.

This is the script: the form and fields

<form method="POST" action="addpages.php" name="books" onmouseover="javascript:sum();">

<button type="button" onClick="addRow('dataTable')">  Add pages </button>
    <table id="dataTable" class="form">
        <input type="text" class="form-control" name="book_pages[]"  onblur="javascript:sum();">
        <input type="text" class="form-control" name="book_pages_total"  onblur="javascript:sum();">
    </table>
</form>

The javascript:

<script language="javascript">
    function sum() {
        var a = parseInt(document.books.book_pages[].value);
        var result = a +a[];
    document.books.tot_prestazioni_A.value = result;
}       
</script>

This script not work. How to sum the values put in each book_pages[] in the book_pages_tot filed?

I hope to explain my problem.

Thanks

zer00ne · Accepted Answer · 2017-01-20 05:21:35Z

Nothing made any sense so I rewrote the whole thing. The action is to a real test server, but it won't submit in SO due to security restrictions, but it will submit if you use it on your own. Details are commented in the Snippet.

SNIPPET

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1, user-scalable=no">
  <title>00A00</title>
  <style>
    button,
    input {
      font: inherit;
    }
    .pages {
      width: 6ch;
    }
  </style>
</head>

<body>
    <form method="post" action="http://httpbin.org/post" name="books">
      <button type="button" onClick="addRow()">Add Book</button>
      <table id='dataTable'>
        <tbody id='dataMain'>
          <tr id='original' class='row'>
            <td>
              <input class='book' placeholder='Enter Title'>
            </td>
            <td>
              <input type="number" class="form-control pages" name="pages" min='1' max='9999' value='1' oninput='totalPgs();'>
            </td>
          </tr>
        </tbody>
        <tbody>
          <tr id='dataTotal'>
            <td>
              <input type='submit'>
            </td>
            <td>
              <output id='total' class="form-control" name="total"></output>
            </td>
          </tr>
        </tbody>
      </table>
    </form>
  <script>
    function addRow() {
      // Reference the first <tr> as row
      var row = document.getElementById('original');
      // Reference the first <tbody> as main
      var main = document.getElementById('dataMain');
      // Clone row
      var clone = row.cloneNode(true);
      // Remove clone's id
      clone.removeAttribute('id');
      // Clean clone of any data
      clone.querySelectorAll('input').forEach(function(inp) {
        inp.value = ''
      });
      // Append clone as the last child of main
      main.appendChild(clone);
    }

    function totalPgs() {
      // Reference the <output> as out 
      var out = document.getElementById('total');
      // Collect all nodes with class .pages into a NodeList called pgs
      var pgs = document.querySelectorAll('.pages');

        /* Array called arr is made by...
	|| ...map.call pgs NodeList on each node called pg...
	|| ...convert each pg value to a true number...
	|| ...return all number values as an array called arr
	*/
      var arr = Array.prototype.map.call(pgs, function(pg) {
        var cnt = parseInt(pg.value, 10);
        return cnt;
      });
      // .apply the function sum() to array called arr
      var total = sum.apply(sum, arr);
      // The value of out is whatever total is
      out.value = total;
      // return the value of total
      return total;
    }

    /* sum() will take any amount of numbers and add...
    || ...them up. Works best with .apply() or .call()
    || Usage: 
    || var totalNumber = sum.apply(sum, array);
    || or
    || var totalNumber = sum.call(sum, object);
    */
    function sum() {
      var res = 0;
      var i = 0;
      var qty = arguments.length;
      while (i < qty) {
        res += arguments[i];
        i++;
      }
      return res;
    }
  </script>
</body>

</html>

You are very welcome, sir and thank you very much. I was only going to do the second half but I got carried away.

talkhabi · Accepted Answer · 2017-01-20 01:00:46Z

0

Use this function :

function sum() {
    var inputs = document.books["book_pages[]"],
        result = 0;

    for(var i in inputs){

        var input = inputs[i],
            val   = input.value;
        if(val !== undefined && val !== '')
            result += parseInt(val);
    }
    document.books.tot_prestazioni_A.value = result;
}

Demo

answered Jan 20, 2017 at 1:00

talkhabi

2,7693 gold badges22 silver badges29 bronze badges

Collectives™ on Stack Overflow

Javascript - Add rows and sum values in field

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related