jQuery calculation with HTML

Question

I need to calculate input values using jQuery. If the input Gvalue is 100 and selected percentage is 10% then in the final value it should display a total value of 110 which should be like this 100*10% + 100 = 110.

value
<input type="text" name="gvalue"  class="input" required/>

Percentage
<select name="percent" id="percent" class="input" onchange="setStates();">
  <option value="Country" selected>Select Percentage</option>
  <option value="5">5</option>
  <option value="10">10</option>
  <option value="15">15</option>
</select>

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

Pranav C Balan · Accepted Answer · 2017-01-28 06:29:52Z

1

Use an event handler and calculate the total based on input values.

// bind event handler to both input and select tag
$('#percent,#input').on('change input', function() {
  // parse input field value, if NaN treat as 0
  var val = Number($('#input').val()) || 0,
    // parse select field value, if NaN treat as 0
    per = Number($('#percent').val()) || 0;
  // calculate and update the total
  $('#total').val(val + val * per / 100)
})

<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>

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

answered Jan 28, 2017 at 6:29

Pranav C Balan

115k25 gold badges173 silver badges195 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

udhay Over a year ago

I need onchange event it has another query <select name="percent" id="percent" class="input" onchange="setStates();">

Pranav C Balan Over a year ago

@udhay do the same within that function

udhay Over a year ago

Thanks buddy that's not an error there was another mistake

JohnEnrico · Accepted Answer · 2017-01-28 06:33:32Z

0

$(document).on('change', 'select[name="percent"]', function(){
  var total = parseInt($('input[name="gvalue"]').val()) /   (parseInt($('select[name="percent"]').val()) / 100 ) + 100)
$('input[name="flvalue"]').val(total);
    })

answered Jan 28, 2017 at 6:33

JohnEnrico

362 bronze badges

Comments

Peter Mortensen · Accepted Answer · 2017-03-04 06:01:18Z

Your HTML:

value
<input type="text" name="gvalue" id="gvalue" class="input" required/>

Percentage
<select name="percent" id="percent" class="input" onchange="setStates();">
  <option value="Country" selected>Select Percentage</option>
  <option value="5">5</option>
  <option value="10">10</option>
  <option value="15">15</option>
</select>

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

Your JavaScript code:

<script>
    function setStates(){
        var gvalue = $('#gvalue').val();
        if(gvalue){
            var gvalue = parseInt(gvalue);
            var percent = parseInt($('#percent').val());
            var final = (gvalue*percent/100)+100;
            $('#total').val(final);
        } else {
            $('#gvalue').css('border-bottom-color','red');
        }
    }
</script>

Collectives™ on Stack Overflow

jQuery calculation with HTML

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related