javascript - updage jquery bootstrap progress bar on form completion -


i trying find way progress bar fill after completing set of inputs, can fill after first input filled in...sorry i'm sort of js noob bear me! have jsfiddle going @

http://jsfiddle.net/skzjk/1/

<form>     <input class="moo" type="text" label="sauce" />     <input class="moo" id="sloo" type="text" />     <input class="moo" type="text" />     <input class="moo" type="text" />     <input class="moo" type="text" /> </form> <div class="progress progress-striped active">     <div class="bar"></div> </div>   $(".moo").on('change keypress paste focus textinput input',function () {     var width = (1 / 5 * 100);     $(".bar").css("width", +width +"%"); }) 

here quite verbose version detect number of "moo" inputs , give percentage have value in them:

$(".moo").on('change paste', function () {     var moocount = $('input.moo').length;     var myfilledmooscount = $('input.moo').filter(function () {         return $(this).val() === "";     }).length;     var width = ((1 / moocount) * (moocount - myfilledmooscount)) * 100;     var mymoopercent = width + "%";     $(".bar").css("width", mymoopercent); }); 

edit per comment: different questions but:

$(".moo").on('change paste', function () {     var moocount = $('input.moo').length;     var myfilledmooscount = $('input.moo').filter(function () {         return $(this).val() === "";     }).length;     var width = ((1 / moocount) * (moocount - myfilledmooscount)) * 100;     var mymoopercent = width + "%";     $(".bar").css("width", mymoopercent).text(mymoopercent);     if (width === 100) {         $(".bar").parent().removeclass("active");     } else {         $(".bar").parent().addclass("active");     } }); 

Comments

Popular posts from this blog

python - How to create a legend for 3D bar in matplotlib? -

java - Multi-Label Document Classification -

php - Dynamic url re-writing using htaccess -