Javascript - フィールドに行と合計の値を追加します。

私はこのフィールドを持つフォームを持っています。ボタンを使用すると、book_desc []、book_pages []を追加できます。 books_pages []の合計のフィールドはbook_pages_totです。私のjavascriptでは、各book_pagesフィールドに値のある行を追加し、この値をbook_pages_totフィールドに合計して合計値を設定します。Javascript - フィールドに行と合計の値を追加します。

これはスクリプトです：フォームとフィールド

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

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

は、このスクリプトは動作しません。 book_pages_totファイルの各book_pages []に入れた値を合計するにはどうすればよいですか？

私は自分の問題を説明したいと思います。

おかげ

出典

2017-01-20 Frankie

何も何の意味もなされていないので、私は全体を書き直しました。 actionは実際のテストサーバーですが、セキュリティ上の制約のためSOには提出しませんが、ご自身で使用する場合は提出します。詳細はスニペットでコメントされています。

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... 
 
\t || ...map.call pgs NodeList on each node called pg... 
 
\t || ...convert each pg value to a true number... 
 
\t || ...return all number values as an array called arr 
 
\t */ 
 
     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>

出典

2017-01-20 02:54:14 zer00ne

おかげで、この作業罰金！ – Frankie

大歓迎です、ありがとうございます。私は後半を行うつもりだったが、私は逃げ出した。 – zer00ne

この機能を使用：

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

出典

2017-01-20 01:00:46 talkhabi

Javascript - フィールドに行と合計の値を追加します。

答えて

関連する問題