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 @
<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
Post a Comment