jquery sum динамически добавленных текстовых полей

-2

У меня есть страница, где я могу добавлять и удалять строки с текстовым полем с классом 'prijs'. при загрузке страницы уже есть одна строка.jquery sum динамически добавленных текстовых полей

Теперь мне нужно суммировать значения всех текстовых полей с помощью класса 'prijs' и отображать его в TD с идентификатором 'totaalexbtw'. вот моя проблема: он не перебирает добавленные текстовые поля. также, когда текстовое поле удаляется, общее значение должно быть затронуто.

Некоторая помощь была бы очень признательна! Я застрял целыми днями!

Заранее благодарен!

<html> 
<head> 
    <script type="text/javascript" src="javascript/jquery_v2.0.3.js"></script> 
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 
    <script type="text/javascript"> 
     function kiesklant(str) 
     { 
      var xmlhttp; 
      if (str=="") 
      { 
       document.getElementById("klantinfo").innerHTML="<table><tr><td>Naam:</td><td</td></tr><td>Adres:</td><td></td></tr><td>Tel:</td><td></td></tr>"; 
       return; 
      } 

      if (window.XMLHttpRequest) 
      { 
       xmlhttp = new XMLHttpRequest(); 
      } 
      else 
      { 
       xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); 
      } 

      xmlhttp.onreadystatechange = function() 
      { 
       if (xmlhttp.readyState==4 && xmlhttp.status==200) 
       { 
        document.getElementById("klantinfo").innerHTML = xmlhttp.responseText; 
       } 
      } 

      xmlhttp.open("GET", "kiesklant.php?q="+str, true); 
      xmlhttp.send(); 
     }; 


     var linenumber = 0; 
     function addLine() 
     { 
      linenumber++; 
      var newRow = document.createElement('tr'); 
      var newCell = document.createElement('td'); 

      newCell = document.createElement('td'); 
      var inputNode = document.createElement('input'); 
      inputNode.name = 'dienstomschrijving'; 
      inputNode.setAttribute('type', 'text'); 
      inputNode.setAttribute('style', 'width: 200px'); 
      newCell.appendChild(inputNode); 
      newRow.appendChild(newCell); 

      newCell = document.createElement('td'); 
      inputNode = document.createElement('input'); 
      inputNode.name = 'prijs'; 
      inputNode.setAttribute('type', 'text'); 
      inputNode.setAttribute('style', 'width: 100px'); 
      inputNode.className = 'prijs'; 
      newCell.appendChild(inputNode); 
      newRow.appendChild(newCell); 

      newCell = document.createElement('td'); 
      inputNode = document.createElement('input'); 
      inputNode.name = 'verwijder_dienst'; 
      inputNode.setAttribute('type', 'button'); 
      inputNode.setAttribute('onclick', 'delLine(this)'); 
      inputNode.value = 'Verwijder dienst'; 

      newCell.appendChild(inputNode); 
      newRow.appendChild(newCell); 

      document.getElementById('dienst').appendChild(newRow); 
     }; 

     function delLine(line) 
     { 
      var row = line.parentNode.parentNode; 
      row.parentNode.removeChild(row); 
     }; 


     function bereken() 
     { 
      var sumexbtw = $('.prijs').sum(function() 
      { 
       return +parseFloat(this.value) || 0; 
      }); 

      $('#totaalexbtw').val(sumexbtw.toFixed(2)); 

      var btw = sumexbtw * 0,21; 

      $('#btw').val(btw.toFixed(2)); 

      var totaal = sumexbtw + btw; 

      $('#totaal').val(totaal.toFixed(2)); 
     }; 

     $(document).on('change', 'input.prijs', bereken); 

    </script> 
</head> 
<body> 
    <?php 
     include("function.php"); 

     // haal max factuurnr op uit database 
     $sth1 = maakConnectie() -> prepare("SELECT MAX(factuurnummer) as 'max' FROM factuur"); 
     $sth1 -> execute(); 
     $result = $sth1 -> fetchAll(PDO :: FETCH_ASSOC); 

     // tel hier 1 bij op zodat er steeds opeenvolgende nummers worden genereerd 
     foreach($result as $rij) 
     { 
      $factuurnr = $rij['max'] + 1; 
     } 

     $datum = date("d-m-Y"); 

     $sth2 = maakConnectie() -> prepare("SELECT voornaam, achternaam FROM gebruiker"); 
     $sth2 -> execute(); 
     $result2 = $sth2 -> fetchAll (PDO::FETCH_ASSOC); 
    ?> 


    <form method="GET" action="aanmaken_factuur.php" class="formulier"> 
     <table> 
      <tr> 
       <td>Factuur nr:</td> 
       <td align="right"><?php print($factuurnr);?></td> 
      </tr> 
      <tr> 
       <td>Datum:</td> 
       <td align="right"><?php print($datum);?></td> 
      </tr> 
     </table> 
     <br> 
     <table> 
      <tr> 
       <td><select name="klanten" onchange="kiesklant(this.value)"> 
         <option value="" selected>Kies klant</option> 
         <?php foreach($result2 as $rij) 
         { 
          print("<option value=\"".$rij["voornaam"]." ".$rij["achternaam"]."\">".$rij["voornaam"]." ".$rij["achternaam"]."</option>"); 
         }?> 
        </select> 
       </td> 
      </tr> 
     </table> 
     <div id="klantinfo"> 
      <table> 
       <tr> 
        <td>Naam:</td> 
        <td></td> 
       </tr> 
       <tr> 
        <td>Adres:</td> 
        <td></td> 
       </tr> 
       <tr> 
        <td>Tel:</td> 
        <td></td> 
       </tr> 
      </table> 
     </div> 
     <br> 
     <table id="dienst2"> 
      <tbody id="dienst"> 
       <tr> 
        <th align="left">Dienstomschrijving</th> 
        <th align="left">Prijs</th> 
       </tr> 
       <tr> 
        <td><input style="width: 200px" type="text" name="dienstomschrijving"></td> 
        <td><input style="width: 100px" type="text" name="prijs" class="prijs"></td> 
        <td><input type="button" name="verwijder_dienst" value="Verwijder dienst" onclick="delLine(this);"/></td> 
       </tr> 
      </tbody> 
       <tr> 
        <td><input type="button" name="toevoegen_dienst" value="Voeg dienst toe" onclick="addLine();" /></td> 
       </tr> 
     </table><br> 
     <table id="totaal"> 
      <tr> 
       <td align="right">Totaal excl. BTW</td> 
       <td align="center" id="totaalexbtw"></td> 
      </tr> 
      <tr> 
       <td align="right">BTW 21%</td> 
       <td align="center" id="btw"></td> 
      </tr> 
      <tr> 
       <td colspan=2 align="center">_________________________________________</td> 
      </tr> 
      <tr> 
       <td align="right">Factuur totaal</td> 
       <td align="center" id="totaal"></td> 
      </tr> 
      <tr> 
       <td align="right"><button onclick="index2.php" name="annuleren">Annuleren</button></td> 
       <td align="right"><input type="submit" name="submit" value="Maak factuur aan"></td> 
      </tr> 
     </table> 
    </form>

источник

2013-12-10 eMulsie

'$ (» Prijs.) изменение (berekentotaalexbtw). 'И перед тем как задавать вопросы, вы должны открыть консоль , возможно ... –

Поскольку я только что сделал то же самое вчера:

(function($) { 
    $.fn.sum = function (callback) { 
     var sum = 0; 
     this.each(function() { 
      sum += 1 * callback.apply(this); 
     }); 
     return sum; 
    }; 
})(jQuery);

это просто функция вспомогательной функции, так что вы можете сделать:. $ (». Prijs') сумма (....) ; вместо того, чтобы использовать .each (....)

и вот ваш ответ

// If you do $('.prijs').change() it binds it to the currently existing elements. 
// i think you are adding and deleting them dynamically, so you needed a delegated event. 
function berekentotaalexbtw() { 
    var sum = $('.prijs').sum(function() { 
     // just a shorter version of all the 'isNan' stuff you got going on. 
     // defaults to 0 if it's NaN 
     return +parseFloat(this.value) || 0; 
    }); 
    // Since you want it printed like a currency: use sum.toFixed(2) to format it :-) 
    $('#totaalexbtw').val(sum.toFixed(2)); 
} 
$(document).on('change','input.prijs',berekentotaalexbtw); 
// and on deletion of an element: berekentotaalexbtw();

источник

2013-12-10 15:13:00 DoXicK

спасибо за быстрый и полезный ответ !! но почему-то это пока не работает ... и я просто не могу понять, что случилось. Я новичок в javascript, и у меня нет времени, чтобы полностью изучить его ... я представил весь код ... возможно, вы можете найти проблему! – eMulsie

теперь я использовал ваш код и поместил его в одну функцию с другими функциями. Я обновил свой вопрос. Теперь мои кнопки добавления и удаления не работают и все еще не имеют результата ... – eMulsie

@ user3087338 Я быстро перейду, я вернусь к вам немного – DoXicK

Есть две ошибки в коде

$('.prijs').each.change(berekentotaalexbtw()); 
      ^^^^       ^^

Нет необходимости использовать каждый, и вы не присвоив функцию, вы вызываете его.

$('.prijs').change(berekentotaalexbtw);

источник

2013-12-10 15:03:44 epascarello

jquery sum динамически добавленных текстовых полей

ответ

Смежные вопросы