Progress bar fill with form inputs

Question

I'm trying to get this progress bar working, but i keep getting wrong results. The problem is when i fill in the first input (whatever input), then i get 60% in stead of the percentage of the specified input.

$(function () {
$("#progressbar").progressbar({
  value: 0
});

$("#profil input").change(function () {
    var pbVal = 0;
    if ($("#name").val().length > 0) pbVal += 10;
    if ($("#prenoun").val().length > 0) pbVal += 10;
    if ($("#birthday").val().length > 0) pbVal += 10;
    if ($("#telephone").val().length > 0) pbVal += 10;
    if ($("#region").val().length > 0) pbVal += 10;
    if ($("#ville").val().length > 0) pbVal += 10;
    if ($("#etablissement").val().length > 0) pbVal += 10;
    if ($("#matiere").val().length > 0) pbVal += 10;
    if ($("#etablistud").val().length > 0) pbVal += 10;
    if ($("#niveau").val().length > 0) pbVal += 10;
    if ($("#branche").val().length > 0) pbVal += 10;
    $("#progressbar").progressbar("option", "value", pbVal);
    return false;
});

});

Any solution please ? here it is jsfiddle

score 4 · Accepted Answer · answered Jan 08 '15 at 16:15

.val() for your dropdowns is returning 'default' so the length will be greater than 0. Try changing it to this instead

if ($("#name").val().length > 0) pbVal += 10;
if ($("#prenoun").val().length > 0) pbVal += 10;
if ($("#birthday").val().length > 0) pbVal += 10;
if ($("#telephone").val().length > 0) pbVal += 10;
if ($("#region").val() != 'default') pbVal += 10;
if ($("#ville").val() != 'default') pbVal += 10;
if ($("#etablissement").val().length > 0) pbVal += 10;
if ($("#matiere").val().length > 0) pbVal += 10;
if ($("#etablistud").val() != 'default') pbVal += 10;
if ($("#niveau").val() != 'default') pbVal += 10;
if ($("#branche").val() != 'default') pbVal += 10;

Thanks @cspete, its working fine now. i also forgot to target selects, better use .val() than .length. Thanks again — Ochelh, Jan 08 '15 at 23:15

Progress bar fill with form inputs

1 Answers1