jQuery Mulitple input fields to limit number range and calculate to 100% -
i have 9 input fields in form want ideally following with:
- each input can have numeric value between 0 , 100
- if example have 30 in 1 input, 30 in , 40 in adds 100 (%) , disables other fields max , of course if changed enable other empty fields can add value until again @ 100%
- show in real time total % adding inputted values enable button click
im not sure start new cool if on this.
this far got, needs have add change change total value, know not lot best ive got far:
$(".control-group input").change(function() { var fields = $(".control-group input"); $(fields).each(function() { var num = parseint(this.value, 10); if (!isnan(num)) { total += num; } if (total == 100){ // disable buttons console.log('max reached'); } else { console.log('max not reached'); } $("#total").text(string(total) + '%'); }); });
above latest have done, not adding % correctly, ideas?
here jsfiddle made. @ think want.
js:
$('input').keyup( function () { //limit value between 0 , 100 var thisval = parseint($(this).val(), 10); if (!isnan(thisval)) { thisval = math.max(0, math.min(100, thisval)); $(this).val(thisval); } //get total of values var total = 0; $('input').each(function() { var thisval = parseint($(this).val(), 10); if (!isnan(thisval)) total += thisval; }); //enable submit button if (total == 100) $('#submit_button').removeattr('disabled'); else $('#submit_button').attr('disabled','disabled'); //update percentage $('#percent').html(total); });
html:
<form class="control-group"> <input></input> <input></input> <input></input> <input></input> <input></input> <input></input> <input></input> <input></input> <input></input> <input id='submit_button' type="button" value="submit" disabled></input> </form> <span id="percent">0</span>%
Comments
Post a Comment