Sintari Sintari - 6 months ago 10
Javascript Question

value of input changes div's content dynamically

im kinda new to javascript. I would like to multiple the total value by the days value dynamically. Was trying for some time but couldnt find the solution. Thanks in advance.



$(document).ready(function() {

$('.kalorie').click(function() {

var varKalorie = $('input[name=kalorie]:checked').val()
$('.posilki').prop("disabled", false);

if (varKalorie == 1000) {

$('.posilki').click(function() {
var total = 0;

$('.posilki:checked').each(function() {
var posilkiChecked = $('.posilki:checked').length;
if (posilkiChecked >= 3) {
posilkiEach = parseFloat($(this).val());
total += posilkiEach;
$('.qtyminus').prop("disabled", false);
$('.qtyplus').prop("disabled", false);
} else {
total = "Musisz zaznaczyc przynajmniej 3 dania";
}
});

$('#total').html(total);

});
}

if (varKalorie == 1250) {

$('.posilki').click(function() {
var total = 0;

$('.posilki:checked').each(function() {
var posilkiChecked = $('.posilki:checked').length;
if (posilkiChecked >= 3) {
posilkiEach = parseFloat($(this).val()) * 1.1;
total += posilkiEach;
$('.qtyminus').prop("disabled", false);
$('.qtyplus').prop("disabled", false);
} else {
total = "Musisz zaznaczyc przynajmniej 3 dania";
}
});

$('#total').html(total + 'pln');

});
}

if (varKalorie == 1500) {

$('.posilki').click(function() {
var total = 0;

$('.posilki:checked').each(function() {
var posilkiChecked = $('.posilki:checked').length;
if (posilkiChecked >= 3) {
posilkiEach = parseFloat($(this).val()) * 1.2;
total += posilkiEach;
$('.qtyminus').prop("disabled", false);
$('.qtyplus').prop("disabled", false);
} else {
total = "Musisz zaznaczyc przynajmniej 3 dania";
}
});

$('#total').html(total + 'pln');

});
}

if (varKalorie == 2000) {

$('.posilki').click(function() {
var total = 0;

$('.posilki:checked').each(function() {
var posilkiChecked = $('.posilki:checked').length;
if (posilkiChecked >= 3) {
posilkiEach = parseFloat($(this).val()) * 1.4;
total += posilkiEach;
$('.qtyminus').prop("disabled", false);
$('.qtyplus').prop("disabled", false);
} else {
total = "Musisz zaznaczyc przynajmniej 3 dania";
}
});

$('#total').html(total + 'pln');

});
}

if (varKalorie == 2500) {

$('.posilki').click(function() {
var total = 0;

$('.posilki:checked').each(function() {
var posilkiChecked = $('.posilki:checked').length;
if (posilkiChecked >= 3) {
posilkiEach = parseFloat($(this).val()) * 1.6;
total += posilkiEach;
$('.qtyminus').prop("disabled", false);
$('.qtyplus').prop("disabled", false);
} else {
total = "Musisz zaznaczyc przynajmniej 3 dania";
}
});

$('#total').html(total + 'pln');

});
}
});

console.log($('#total').text());

// This button will increment the value
$('.qtyplus').click(function(e) {
// Stop acting like a button
e.preventDefault();
// Get the field name
fieldName = $(this).attr('field');
// Get its current value
var currentVal = parseInt($('input[name=' + fieldName + ']').val());
// If is not undefined
if (!isNaN(currentVal)) {
// Increment
$('input[name=' + fieldName + ']').val(currentVal + 1);
} else {
// Otherwise put a 0 there
$('input[name=' + fieldName + ']').val(0);
}
});
// This button will decrement the value till 0
$(".qtyminus").click(function(e) {
// Stop acting like a button
e.preventDefault();
// Get the field name
fieldName = $(this).attr('field');
// Get its current value
var currentVal = parseInt($('input[name=' + fieldName + ']').val());
// If it isn't undefined or its greater than 0
if (!isNaN(currentVal) && currentVal > 0) {
// Decrement one
$('input[name=' + fieldName + ']').val(currentVal - 1);
} else {
// Otherwise put a 0 there
$('input[name=' + fieldName + ']').val(0);
}
});

})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<h2 class="global-title">Cennik</h2>
<input type="radio" name="kalorie" class="kalorie" value="1000" />1000
<input type="radio" name="kalorie" class="kalorie" value="1250" />1250
<input type="radio" name="kalorie" class="kalorie" value="1500" />1500
<input type="radio" name="kalorie" class="kalorie" value="2000" />2000
<input type="radio" name="kalorie" class="kalorie" value="2500" />2500
<br/>
<br/>

<input type="checkbox" class="posilki" value="15" disabled/>Śniadanie
<input type="checkbox" class="posilki" value="10" disabled/>2 Śniadanie
<input type="checkbox" class="posilki" value="20" disabled/>obiad
<input type="checkbox" class="posilki" value="10" disabled/>podwieczorek
<input type="checkbox" class="posilki" value="15" disabled/>kolacja
<br/>Days

<input type='button' value='-' class='qtyminus' field='quantity' disabled/>
<input type='text' name='quantity' value='30' class='qty' id="days-input" disabled/>
<input type='button' value='+' class='qtyplus' field='quantity' disabled/>

<br/>
<br/>Total:
<div id="total">0 zł</div>
</div>




Answer

Since you mention are kind of new to javascript ... my main message is to put things in functions.

This obliges you to think: "okay, what exactly do I need to know to perform this?" ... well those are the parameters of your function.

Ad of course, functions dramatically reduces code, you don't have to copy/paste everything 6 times.

Notice: you could put all the functions within document.ready, if you want.

And, oh yes, I added label elements. This makes it nicer to the client.

Is this it?

<div class="container">
  <h2 class="global-title">Cennik</h2>

  <input type="radio" name="kalorie" class="kalorie" value="1000" id="r0" /><label for="r0">1000</label>
  <input type="radio" name="kalorie" class="kalorie" value="1250" id="r1" /><label for="r1">1250</label>
  <input type="radio" name="kalorie" class="kalorie" value="1500" id="r2" /><label for="r2">1500</label>
  <input type="radio" name="kalorie" class="kalorie" value="2000" id="r3" /><label for="r3">2000</label>
  <input type="radio" name="kalorie" class="kalorie" value="2500" id="r4" /><label for="r4">2500</label>
  <br/><br/>

  <input type="checkbox" class="posilki" id="sniadanie" value="15" ><label for="sniadanie">Sniadanie</label>
  <input type="checkbox" class="posilki" id="sniadanie2" value="10" ><label for="sniadanie2">2 Sniadanie</label>
  <input type="checkbox" class="posilki" id="obiad" value="20" ><label for="obiad">obiad</label>
  <input type="checkbox" class="posilki" id="podwieczorek" value="10" ><label for="podwieczorek">podwieczorek</label>
  <input type="checkbox" class="posilki" id="kolacja" value="15" ><label for="kolacja">kolacja</label>
  <br/><br/>Days

  <input type="button" value="-" class="qtyminus" field="quantity" >
  <input type="text" name="quantity" value="30" class="qty" id="days-input" >
  <input type="button" value="+" class="qtyplus" field="quantity" >

  <br/>
  <br/>Total:
  <div id="total">0 zl</div>
</div>
<style>
label {
  cursor: pointer;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>

// calculates the total price, displays it in id="total"
function calculateTotal(sum_price, days) {
  var result = sum_price * days;
  $('#total').html(result + ' zl');
  return result; // not really being used
}

// reads the checked checkboxes, returns their sum value
function readSumPrice() {
  var sum = 0;
  $('.posilki').each(function(i) {
    if(this.checked) {
      sum += Number($(this).val());
    }
  });
  return sum;  
}

// what ever the client changes, triggers this function.  We don't really care what has just been clicked on, we have to recalculate it anyway.
function somethingChanged() {
  // first we want to check if three meals have been chosen
  var numberOfMealsChosen = $( ".posilki:checked" ).length;
  if(numberOfMealsChosen >= 3) {
    // now we calculate
    var sum_price = readSumPrice();
    var days = Number($('#days-input').val());
    calculateTotal(sum_price, days);
  }
  else {
    $('#total').html('please choose 3 items');
  }
}

// now the events
$(document).ready(function() {
  // click on +
  $('.qtyplus').click(function() {
    var days = Number($('#days-input').val());
    $('#days-input').val(days + 1);
    somethingChanged();
  });

  // click on -
  $('.qtyminus').click(function() {
    var days = Number($('#days-input').val());
    // let's put 0 as minimum
    if(days > 0) {
      $('#days-input').val(days - 1);
      somethingChanged();
    }
  });

  // click on checkbox
  $('.posilki').click(function() {
    somethingChanged();
  });

  // click on radio.  triggers the calculation but doesn't really affect anything (yet?)
  $('.kalorie').click(function() {
    somethingChanged();
  });

});

</script>