How can I do calculations using Jquery and output them in html?

Question

I want to calculate percentage using javascript.

If the selected value in place1 & place2 is not equal then the calculation should be displayed in both flvalue & flvalues.

Ex: If value is 1000 and selected percent is 10 and selected place1 & place2 value is equal then flvalue should be 1100.

If value is 1000 and selected percent is 10 and selected place1 & place2 value is notequal then flvalue should be 1100 and flvalues should be 1100.

<script>
$('#percent,#input,#place,#places').on('change input', function() {
  var val = Number($('#input').val()) || 0,
    per = Number($('#percent').val()) || 0;

 if($('#place').val()!=$('#places')){
  $('#total').val(val + val * per / 100)
  $('#totals').val(val + val * per / 100)
})
</script>

Value    
<input type="text" name="gvalue" id="input" class="input" required/>Percentage
    <select name="percent" id="percent" class="input">
      <option value="Country" selected>Select Percentage</option>
      <option value="5">5</option>
      <option value="10">10</option>
      <option value="15">15</option>
    </select>

Place_1
<select name="place_1" id="place_1" class="input">
  <option value="Place" selected>Place</option>
  <option value="Place 1">Place 1</option>
  <option value="Place 2">Place 2</option>
  <option value="Place 3">Place 3</option>
</select>

Place_2
<select name="place_2" id="place_2" class="input">
  <option value="Place" selected>Place</option>
  <option value="Place 1">Place 1</option>
  <option value="Place 2">Place 2</option>
  <option value="Place 3">Place 3</option>
</select>

    Final Value
    <input type="text" name="flvalue" class="input" id="total" required/>
    <input type="text" name="flvalues" class="input" id="totals" required/>

Answer 1

Give it a try to this,

$('#percent,#input,#place_2,#place_1').on('change input', function() {
     var val = Number($('#input').val()) || 0,
     per = Number($('#percent').val()) || 0;
     var tot_am = val + val * per / 100;
     if ($('#place_1').val() != $('#place_2').val()) {
      $('#total').val(tot_am);
      $('#totals').val(tot_am);
     } else if ($('#place_1').val() == $('#place_2').val()) {
      $('#total').val()
      $('#totals').val('');
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    Value    
<input type="text" name="gvalue" id="input" class="input" required/>Percentage
    <select name="percent" id="percent" class="input">
      <option value="Country" selected>Select Percentage</option>
      <option value="5">5</option>
      <option value="10">10</option>
      <option value="15">15</option>
    </select>

Place_1
<select name="place_1" id="place_1" class="input">
  <option value="Place" selected>Place</option>
  <option value="Place 1">Place 1</option>
  <option value="Place 2">Place 2</option>
  <option value="Place 3">Place 3</option>
</select>

Place_2
<select name="place_2" id="place_2" class="input">
  <option value="Place" selected>Place</option>
  <option value="Place 1">Place 1</option>
  <option value="Place 2">Place 2</option>
  <option value="Place 3">Place 3</option>
</select>

    Final Value
    <input type="text" name="flvalue" class="input" id="total" required/>
    <input type="text" name="flvalues" class="input" id="totals" required/>

Hope this will solve your problem.

Answer 2

You've just to add condition on places selected value :

if($('#place').val()=="10"){
   $('#totals').val(val + val * per / 100);
}else{
   $('#totals').val('');
}

And to add attach the change event also to the #place select :

$('#percent,#input,#place').on('change input', function() {

Hope this helps.

$('#percent,#input,#place').on('change input', function() {
  var val = Number($('#input').val()) || 0,
      per = Number($('#percent').val()) || 0;

  $('#total').val(val + val * per / 100);

  if($('#place').val()=="10"){
    $('#totals').val(val + val * per / 100);
  }else{
    $('#totals').val('');
  }
})

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


Value    
<input type="text" name="gvalue" id="input" class="input" required/>
<br>Percentage
<select name="percent" id="percent" class="input">
  <option value="Country" selected>Select Percentage</option>
  <option value="5">5</option>
  <option value="10">10</option>
  <option value="15">15</option>
</select>
<br>
Place
<select name="place" id="place" class="input">
  <option value="Country" selected>Place</option>
  <option value="5">Place 1</option>
  <option value="10">Place 2</option>
  <option value="15">Place 3</option>
</select>
<br><br>
Final Value
<input type="text" name="flvalue" class="input" id="total" required/>
<input type="text" name="flvalues" class="input" id="totals" required/>