Add an input value to a database value

Question

I am working on a project where I have to add a database value to in input value.

<div>
    <div class="price">680</div>
    <div class="price">
        <input type="number" name="name">
    </div>
</div>

In above code 680 will come from the database. Here I want to add an input number to that 680. I am very new to jQuery.

My JavaScript code is

    $(document).ready(function() {
        var total = 0;
        $("input").keyup(function(){
            var priceList = $('.price');
            $.each(priceList, function(i, price){
                total += parseFloat($(price).text());
            });
            alert(total);
        });
    });

</script>

In this it outputs "NaN".

Answer 1

In this it outputs "NaN".

You get this message since you're trying to loop through div's and parsing the text of them, when it's empty. You need to loop over input's instead.

You could init the total with the database value then loop through the input's and add the parsed values to total in every iteration.

NOTE: Use input event instead when you track the user input since it's more efficient.

Multiple inputs:

$(document).ready(function() {
  var db_val = parseFloat($('.price:first').text());
  var total = 0;

  $(".price input").on('input', function() {
    var total = db_val;

    $('.price input').each(function() {
      total += parseFloat($(this).val()) || 0;
    });

    $(".total").text(total);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div>
  <div class="price">680</div>
  <div class="price">
    <input type="number" name="name">
  </div>
  <div class="price">
    <input type="number" name="name">
  </div>
  <div class="price">
    <input type="number" name="name">
  </div>
  <div class="total">680</div>
</div>

Single input:

$(document).ready(function() {
  var db_val = parseFloat($('.price:first').text());
  var total = 0;

  $(".price input").on('input', function() {
    var total = db_val;

    total += parseFloat($(this).val()) || 0;

    $(".total").text(total);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div>
  <div class="price">680</div>
  <div class="price">
    <input type="number" name="name">
  </div>
  <div class="total">680</div>
</div>

Answer 2

Here you go

var result = 0;
var price = +$('#price').text();

$('input[type="number"]').on('input', function() {
  var val = +$(this).val();
  result = parseInt(val + price);
  $('#price').text(result)
  console.log(result);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <div class="price" id="price">680</div>
  <div class="price">
    <input type="number" name="name">
  </div>