CODEWITHSUNDEEP
javascriptjquerytwitter-bootstrap
lance smith
lance smith

Reputation: 73

updage jquery bootstrap progress bar on form completion

I am trying to find a way for my progress bar to fill up after completing the set of inputs, but all i can get it to do is fill up after the first input is filled in...sorry that I'm sort of a js noob so bear with me! I have a jsfiddle going at

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 +"%");
})

Upvotes: 0

Views: 1658

Answers (3)

Mateusz Rogulski
Mateusz Rogulski

Reputation: 7445

I think this is what are you're looking for:

$(document).ready(function () {
    $(".moo").change(function () {
        var completedInputs = 0;
        $(".moo").each(function () {
            if($(this).val() !== "") {
                console.log($(this).val());
                completedInputs++;
            }
        });
        $(".bar").css("width", (completedInputs*20)+"%");   
        if(completedInputs == 5) {
            if($(".bar").parent().hasClass("active")){
                $(".bar").parent().removeClass("active");
            }
        }else {
            if(!$(".bar").parent().hasClass("active")){
                $(".bar").parent().addClass("active");
            }
        }
    })
});

jsFiddle

Upvotes: 3

Mark Schultheiss
Mark Schultheiss

Reputation: 34168

Here is a quite verbose version that will detect the number of "moo" inputs and give a percentage that have some 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");
    }
});

Upvotes: 3

gustavohenke
gustavohenke

Reputation: 41440

That happens because you are setting the same percentage, always.

Try to do this:

$(".moo").on('change keypress paste focus textInput input',function () {
    var width = (1 / 5 * 100);

    var filled = $(".bar").data( "filled" ) || 0;
    $(".bar").data( "filled", ++filled );

    $(".bar").css( "width", (width * filled) +"%" );
});

Upvotes: 0

Related Questions