Deferred - PCT COMPLETE - Track progress using $.Deferred(), .done(), and .resolve()

by bizamajig

HTML

<p>Your profile is <span id="progress">0</span>% complete.</p>

<p><input type="text" placeholder="first name" name="first"></p>
<p><input type="text" placeholder="last name" name="last"></p>
<p><input type="text" placeholder="email" name="email"></p>

<div id="thanks"></div>

CSS

body {
    font-family: Helvetica, Arial, sans-serif;
    padding:10px;
}
input[type=text] {
    padding:4px;
}
p {
    margin-bottom:5px
}

#thanks { display:none; }

JavaScript

$(function () {
    var userProgress = $.Deferred();
    var $profileFields = $("input");
    var totalFields = $profileFields.length
        
    userProgress.progress(function (filledFields) {
        var pctComplete = (filledFields/totalFields)*100;
        $("#progress").html(pctComplete.toFixed(0));
    }); 

    userProgress.done(function () {
        $("#thanks").html("Thanks for completing your profile!").show();
    });
    
    $("input").on("change", function () {
        var filledFields = $profileFields.filter("[value!='']").length;
        userProgress.notify(filledFields);
        if (filledFields == totalFields) {
            userProgress.resolve();
        }
    });
});