CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Lev Myndra
Lev Myndra

Reputation: 43

how to add value from range input to total amount?

I managed to summarize the values from the radio buttons, but I just can’t add the values from range inputs, how can this be implemented?? And yet, since the slider on the two range inputs initially has a value of 1, then in Sum: should already be 2.

$(document).ready(function() {
    $(".in_objem").on('input', function() {
        $(".range-indicator").text($(this).val());
    });
    $(".in_nagrev").on('input', function() {
        $(".nagrev-indicator").text($(this).val());
    });

    // $(".in_objem").on('input', function() {
    //     var elem= parseInt($(this).val());
    // });

    $(".premium-inpts").on('click', function(){
        var sum = 0;
        $('.premium-inpts').each(function(){
            if ($(this).is(':checked')){
                sum = sum + parseInt($(this).next('.flexy-block').attr("price"));
            }
        });
        console.log(sum);
        $("#price-board").text(sum);
        $("#output-price").val(sum);
    });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
	<div>
	    <span class="nagrev-indicator">1</span><span>units1</span>
	</div>
	<div>
		<input class="in_nagrev" name="productivity1" type="range" min="1" max="30" value="1">
	</div>
</div>
<div>
	<div>
	    <span class="range-indicator">1</span><span>units2</span>
	</div>
	<div>
		<input class="in_objem" name="productivity2" type="range" min="1" max="30" value="1">
	</div>
</div>
<div>
    <input class="premium-inpts" id="a" type="radio" value="work">
        <label class="flexy-block" for="a" price="300">
	         <span>Work</span>
        </label>

	<input class="premium-inpts" id="b" type="radio" value="chill">
		<label class="flexy-block" for="b" price="20">
			<span>Chill</span>
		</label>
</div>
<div class="motors-container">
    <input class="premium-inpts" id="c" type="radio" value="Automatic"> 
        <label class="flexy-block" for="c" price="90">
	         <span>Automatic</span>
        </label>

	<input class="premium-inpts" id="d" type="radio" value="Common">
		<label class="flexy-block" for="d" price="0">
			<span>Common</span>
		</label>
</div>
<div class="price-board">Sum: <span id="price-board"></span></div>
<input id="output-price" name="Sum" type="hidden" value="">

Perhaps this is done somehow through an array, but I am not very good at js, so do not judge strictly.

Upvotes: 1

Views: 94

Answers (3)

Mamun
Mamun

Reputation: 68923

You can sum the value of all the checked radio buttons with the slider value on the input event:

$(".in_objem,.in_nagrev").on('input', function() {
   var elem = 0;
   //sum the slider value
   $(".in_objem,.in_nagrev").each(function(){
     elem += Number($(this).val());
   });     
   var v = 0;
   //sum the checked radio buttons
   $('.premium-inpts:checked').each(function(){
     v = v + parseInt($(this).next('.flexy-block').attr("price"));
   });
   $("#price-board").text(v + elem);
   $("#output-price").val(v + elem);
 });
 $(".in_objem,.in_nagrev").trigger('input'); // trigger the event to show the sum on page load

Working Code Example:

$(document).ready(function() {
  $(".in_objem").on('input', function() {
    $(".range-indicator").text($(this).val());
  });
  $(".in_nagrev").on('input', function() {
    $(".nagrev-indicator").text($(this).val());
  });

  $(".in_objem,.in_nagrev").on('input', function() {
    var elem = 0;
    $(".in_objem,.in_nagrev").each(function(){
      elem += Number($(this).val());
    });    
    var v = 0;
    $('.premium-inpts:checked').each(function(){
      v = v + parseInt($(this).next('.flexy-block').attr("price"));
    });
    $("#price-board").text(v + elem);
    $("#output-price").val(v + elem);
  });
  $(".in_objem,.in_nagrev").trigger('input');

  $(".premium-inpts").on('click', function(){
    var sum = 0;
    var n1 = Number($('.in_objem').val());
    var n2 = Number($('.in_nagrev').val());
    sum = n1+n2;
    $('.premium-inpts:checked').each(function(){
      sum = sum + parseInt($(this).next('.flexy-block').attr("price"));
    });
    //console.log(sum);
    $("#price-board").text(sum);
    $("#output-price").val(sum);
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
  <div>
    <span class="nagrev-indicator">1</span><span>units1</span>
  </div>
  <div>
    <input class="in_nagrev" name="productivity1" type="range" min="1" max="30" value="1">
  </div>
</div>
<div>
  <div>
    <span class="range-indicator">1</span><span>units2</span>
  </div>
    <div>
      <input class="in_objem" name="productivity2" type="range" min="1" max="30" value="1">
    </div>
  </div>
<div>
  <input class="premium-inpts" id="a" type="radio" value="work"> //this is value for form
    <label class="flexy-block" for="a" price="300">
      <span>Work</span>
    </label>

  <input class="premium-inpts" id="b" type="radio" value="chill">
    <label class="flexy-block" for="b" price="20">
      <span>Chill</span>
    </label>
</div>
<div class="motors-container">
  <input class="premium-inpts" id="c" type="radio" value="Automatic"> //this is value for form
    <label class="flexy-block" for="c" price="90">
       <span>Automatic</span>
    </label>

  <input class="premium-inpts" id="d" type="radio" value="Common">
    <label class="flexy-block" for="d" price="0">
      <span>Common</span>
    </label>
</div>
<div class="price-board">Sum: <span id="price-board"></span></div>
<input id="output-price" name="Sum" type="hidden" value="">

Upvotes: 1

Tibo Van Zwol
Tibo Van Zwol

Reputation: 11

As mentioned by aprouja1, you need to get their values. An easy way to do this, is by giving both range sliders an ID in HTML.(For Example slider1 & slider2).

Then use document.getElementById("slider1").value & document.getElementById("slider2").value to get their values. You can save these to a variable and calculate the sum this way.

let slider1Value = document.getElementById("slider1").value;
let slider2Value = document.getElementById("slider2").value;
sum = slider1Value + slider2Value;

Upvotes: 0

aprouja1
aprouja1

Reputation: 1810

You need to get the value of the range objects and parse them to numbers and add them in your sum: 

$(document).ready(function() {

        $(".in_objem").on('input', function() {
            $(".range-indicator").text($(this).val());
        });
        $(".in_nagrev").on('input', function() {
            $(".nagrev-indicator").text($(this).val());
        });


        //$(".in_objem").on('input', function() {
        //  var elem= parseInt($(this).val());
        //});

        $(".premium-inpts").on('click', function(){
            var sum = 0;

            $('.premium-inpts').each(function(){
                if ($(this).is(':checked')){
                    sum = sum + parseInt($(this).next('.flexy-block').attr("price")) + parseInt($(".in_objem").val(),10)+ parseInt($(".in_objem").val(),10) ;
                }
            });
        console.log(sum);
        $("#price-board").text(sum);
        $("#output-price").val(sum);
    });

})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
    <div>
        <span class="nagrev-indicator">1</span><span>units1</span>
    </div>
    <div>
        <input class="in_nagrev" name="productivity1" type="range" min="1" max="30" value="1">
    </div>
</div>
<div>
    <div>
        <span class="range-indicator">1</span><span>units2</span>
    </div>
    <div>
        <input class="in_objem" name="productivity2" type="range" min="1" max="30" value="1">
    </div>
</div>
<div>
    <input class="premium-inpts" id="a" type="radio" value="work"> //this is value for form
        <label class="flexy-block" for="a" price="300">
             <span>Work</span>
        </label>

    <input class="premium-inpts" id="b" type="radio" value="chill">
        <label class="flexy-block" for="b" price="20">
            <span>Chill</span>
        </label>
</div>
<div class="motors-container">
    <input class="premium-inpts" id="c" type="radio" value="Automatic"> //this is value for form
        <label class="flexy-block" for="c" price="90">
             <span>Automatic</span>
        </label>

    <input class="premium-inpts" id="d" type="radio" value="Common">
        <label class="flexy-block" for="d" price="0">
            <span>Common</span>
        </label>
</div>
<div class="price-board">Sum: <span id="price-board"></span></div>
<input id="output-price" name="Sum" type="hidden" value="">

Upvotes: 0

Related Questions