CODEWITHSUNDEEP
javascriptjquery
Imam Herlambang
Imam Herlambang

Reputation: 51

Limit Sum Value of Multiple Input Fields

I need some help with javascript or jQuery.

I have three (3) input fields that I want to filter (sum of three fields).

the total value of 3 input fields is must 100. If the user fills more than 100, it will be automatically change the value that the total is 100.

you can see this example

<input type="text" name="text1" size="3"> text1<br />
<input type="text" name="text2" size="3"> text2<br />
<input type="text" name="text3" size="3"> text3<br />

    <p>The maximum value of total 3 fields above is 100.</p>
    <pre>example 1 :

    text1 : 20;
    text2 : 30;
    text3 : 50; (will automatically filled with 50 because the total value must 100)</pre>
    <pre>example 2 :

    text1 : 37;
    text2 : 60;
    text3 :  3; (will automatically filled with 3 because the total value must 100)</pre>

Thanks for helping me, I need it :)

Upvotes: 1

Views: 4512

Answers (4)

Bhushan Kawadkar
Bhushan Kawadkar

Reputation: 28523

   $(function(){

$('input[name="text1"]').keyup(function(){

    var text1Value = $('input[name="text1"]').val();
    if(text1Value >=100)
    {
     $('input[name="text1"]').val(100);
     $('input[name="text2"]').val('');
     $('input[name="text3"]').val('');
     $('input[name="text2"]').attr('disabled','disabled'); 
     $('input[name="text3"]').attr('disabled','disabled'); 
    }
    else
    {
     $('input[name="text2"]').removeAttr('disabled'); 
     $('input[name="text3"]').removeAttr('disabled');
    }
});
$('input[name="text2"]').keyup(function(){
    var text1Value = parseInt($('input[name="text1"]').val());
    var text2Value = parseInt($('input[name="text2"]').val());
    if(isNaN(text1Value))
    {
     text1Value =0;
    }

    if(isNaN(text2Value))
    {
     text2Value =0;
    }
    var total = text1Value + text2Value;

    if(total >=100)
    {
     $('input[name="text2"]').val(100-text1Value);
     $('input[name="text3"]').val('');
     $('input[name="text3"]').attr('disabled','disabled'); 
    }
    else
    {
     $('input[name="text3"]').removeAttr('disabled');
     $('input[name="text3"]').val(100-total);
    }
});

});

I am checking if sum of all text boxes if exceeding 100, then making correction in the last entered textbox with disabling the next textbox.

Upvotes: 0

Anoop Joshi P
Anoop Joshi P

Reputation: 25537

<head>
<script type="text/javascript">
function check() {
    var sum = 0;
    var inputs = $(".test");
    for (i = 0; i < inputs.length; i++) {
        if (inputs[i].value == parseInt(inputs[i].value)) {
            sum += parseInt(inputs[i].value);
            if (sum > 100) {
                sum -= parseInt(inputs[i].value);
                inputs[i].value =  100-sum;

             }
         }
    }

 }



</script>
</head>
<body>
<input type="text" onkeyup="check()" class="test" size="3"> 
<input type="text" onkeyup="check()" class="test" size="3">
<input type="text" onkeyup="check()" class="test" size="3">

Upvotes: 1

Praveen Kumar Purushothaman
Praveen Kumar Purushothaman

Reputation: 167250

This is the simplest thing I can think of!

$(document).ready(function(){
    $('input[name="text2"]').blur(function(){
        $('input[name="text3"]').val(100 - $('input[name="text1"]').val() - $('input[name="text2"]').val());
    });
});

IMO, you can do these:

  1. Give only two characters for both the inputs. Don't allow more than that!
  2. You also need to check if the sum of the two inputs should not exceed 101!
  3. Keep the input 2 readonly, until something has been entered in input 1.
  4. Keep the input 3 always readonly.

Fiddle: http://jsfiddle.net/praveenscience/D5F3p/5/

Upvotes: 1

VisioN
VisioN

Reputation: 145478

$("input:lt(2)").on("change", function() {
    var other = $("input:lt(2)").not(this).val();
    if (other.length)
        $("input:eq(2)").val(100 - this.value - other);
});

DEMO: http://jsfiddle.net/D5F3p/3/

Upvotes: 3

Related Questions