DollarChills DollarChills - 6 months ago 22
Javascript Question

Multiple input types sum

I'm looking to sum multiple inputs together from select, radio and text.

I have the following code, which works, but cancels out each different input, i'm looking to add them all together.

I know there would be a better way to structure this, but I can't seem to work out a good solution.

View

<select>
<option value='0.0'>Product 1</option>
<option value='0.5'>Product 2</option>
<option value='1.0'>Product 3</option>
<option value='0.5'>Product 4</option>
</select>

<h4>Desired price</h4>
<input class="inputBox form-control" type="text" id="desired_price" >

<form>
<label class="radio inline">
<input type="radio" name="location" value="0.1" > location 1
</label>
<label class="radio inline">
<input type="radio" name="location" value="0.1" > location 2
</label>
<label class="radio inline">
<input type="radio" name="location" value="0.4" > location 3
</label>
<label class="radio inline">
<input type="radio" name="location" value="0.7" > location 4
</label>
<label class="radio inline">
<input type="radio" name="location" value="1.0" > location 5
</label>
</form>

<b id="score_total">0</b>


jQuery

$(document).ready(function() {
var desiredPrice = document.getElementById("desired_price");

desiredPrice.onkeyup = calc;

function calc() {
document.getElementById("score_total").innerHTML = parseFloat(desiredPrice.value).toFixed(1);
}

// All radios sum gathered
$('input[type=radio]').change(function(){
var total = 0;
$('input[type=radio]:checked').each(function(){
total += Number($(this).val());
});
$('#score_total').html(total);
});

// select
$('select').change(function(){
var variety = 0;
$('select :selected').each(function() {
variety += Number($(this).val());
});
$('#score_total').html(variety);
});

});

Answer

you must define a 'change' event handler for #score_total, and then trigger #score_total change event on select, radio, and textbox change.

this code can help you.

you can edit code here and use it after edit.

$(document).ready(function() {
  $('#score_total').on('change', function() {
    var sum = 0;
    $('select, [type=text], [type=radio]:checked').each(function(){
      sum += Number($(this).val());	
    });
    $(this).text(sum);
  });
  $('select').on('change', function(){
  	$('#score_total').trigger('change');	
  });
  $('[type=text]').on('keyup', function(){
  	$('#score_total').trigger('change');
  });
  $('[type=radio]').on('click', function(){
  	$('#score_total').trigger('change');
  })
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<select>
  <option value='0.0'>Product 1</option>
  <option value='0.5'>Product 2</option>
  <option value='1.0'>Product 3</option>
  <option value='0.5'>Product 4</option>
</select>

<h4>Desired price</h4>
<input class="inputBox form-control" type="text" id="desired_price">

<form>
  <label class="radio inline">
    <input type="radio" name="location" value="0.1"> location 1
  </label>
  <label class="radio inline">
    <input type="radio" name="location" value="0.1"> location 2
  </label>
  <label class="radio inline">
    <input type="radio" name="location" value="0.4"> location 3
  </label>
  <label class="radio inline">
    <input type="radio" name="location" value="0.7"> location 4
  </label>
  <label class="radio inline">
    <input type="radio" name="location" value="1.0"> location 5
  </label>
</form>

<b id="score_total">0</b>