How to make a progress bar that fills every time a textbox is filled

Question

Today i'm trying to put a progress bar that fills every time the user fills a textbox, like this : let's say i have 10 textbox on the screen if none is filled i want the progress bar to be at 0% but if the user fills 5 of them i want it to be 50%. I found how to make the progress bar but can't figure how to make this condition to work with a TextBoxFor

If someone could help

score 3 · Answer 1 · answered May 10 '16 at 14:58

3

Lets say yours textbox (input type=text ?).

<input type="text" class="check-fill">

You can add the jQuery keyup event on each input field, to check the number of input fields already done.

$(function(){ //When document is ready
    $(".check-fill").keyup(function(){ //Prefer keyup so you check after, in case the user delete his entry.
        var $fields = $(".check-fill");
        var count = 0;
        $fields.each(function(){
             if($(this).val().length > 0)
                  count++;
        });
    });

    var percentage = Math.floor(count * 100 / $fields.length);
    //Here you have your percentage;

});

You can replace the keyup event by the "focusout" one, to reduce the numbers of verifitcations, but it will only check when the user click out of the input field.

answered May 10 '16 at 14:58

Scotow

432
7
8

That's looks fine but after that how this will be related to my progress bar ? – Chris May 10 '16 at 15:16
How can i say to my bar you percentage is equal to the percantage made by the jquery ? – Chris May 10 '16 at 15:23
How do you do your progress bar ? With the tag or with a kind of div element with css to make it looks like a progress bar ? – Scotow May 10 '16 at 15:27
with the progress-bar bootstrap – Chris May 10 '16 at 15:36
1

If your progress bar width is set with % you can use $(".progress-bar").css("width", percentage + "%"); if your progress bar html code looks like this one [here](http://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_progressbar1&stacked=h) – Scotow May 10 '16 at 15:46
So i could add this on my script ? Sorry i'm little lost with this – Chris May 10 '16 at 15:53
If your progress bar use the same class as linked in the w3school example yes you can add it to your code, just after the percentage calculation. – Scotow May 10 '16 at 15:57
First, in your jsfiddle, jquery is disable, and bootstrap is not available in jsfiddle. https://jsfiddle.net/py9svchn/3/ Here is a example of a update from your code. You can try typind in the input fields. – Scotow May 10 '16 at 17:18

score 0 · Answer 2 · answered May 10 '16 at 14:57

If you are using JQuery you could use Progressbar. Then you can apply a certain class to all inputs OR a selector that apply to all of them, and finally attach an event to capture when they are not empty.

Example:

The form can be something like this:

<form class="progessform" ...>
    <input type="text" ..../>
    <input type="text" ..../>
</form>

And you can select these by using .progressform input[type=text] in a jquery script:

$('.progressform input[type=text]').on('change', function (e) {

   var total = count all .progressform input[type=text] within the same form

   var filled = count all .progressform input[type=text] values that are not empty

   modify your progressbar according to the count: filled * 100 / total
}

This event is attached to every input text inside your form with class progressform, and it is called anytime the input text is changed.

Note that you might need to do extra things on this to distinguish if the input is validated correctly or not (ie, not to count some input in the progressbar if the value is not correct, like an invalid email or alphab characters in a numerical phone input)

score 0 · Answer 3 · answered Nov 23 '16 at 14:47

** **PROGRESS BAR FILLUP ACCORDING TO TIME SET IN SECOUNDS ** **

function move() {
  var elem = document.getElementById("myBar");
  var width = 1;
  var id = setInterval(frame, 100); // set time ex: 100 as 10s & 1000 as 1min
  function frame() {
    if (width >= 100) {
      clearInterval(id);
    } else {
      width++;
      elem.style.width = width + '%';
      document.getElementById("label").innerHTML = width * 1  + '%';
    }
  }
return false;
}

<style>
<body>
#label {
  text-align: center;
  line-height: 22px;
  color: white;
}
.meter {
    height: 20px;
    position: relative;
    margin: 60px 0 20px 0;
    background: #555;
    -moz-border-radius: 25px;
    -webkit-border-radius: 25px;
    border-radius: 25px;
    padding: 10px;
    -webkit-box-shadow: inset 0 -1px 1px rgba(255,255,255,0.3);
    -moz-box-shadow: inset 0 -1px 1px rgba(255,255,255,0.3);
    box-shadow: inset 0 -1px 1px rgba(255,255,255,0.3);
}
.meter > span {
    display: block;
    width:1%;
    height: 100%;
    -webkit-border-top-right-radius: 8px;
    -webkit-border-bottom-right-radius: 8px;
    -moz-border-radius-topright: 8px;
    -moz-border-radius-bottomright: 8px;
    border-top-right-radius: 8px;
    border-bottom-right-radius: 8px;
    -webkit-border-top-left-radius: 20px;
    -webkit-border-bottom-left-radius: 20px;
    -moz-border-radius-topleft: 20px;
    -moz-border-radius-bottomleft: 20px;
    border-top-left-radius: 20px;
    border-bottom-left-radius: 20px;
    background-color: rgb(43,194,83);
    background-image: -webkit-gradient( linear, left bottom, left top, color-stop(0, rgb(43,194,83)), color-stop(1, rgb(84,240,84)) );
    background-image: -moz-linear-gradient( center bottom, rgb(43,194,83) 37%, rgb(84,240,84) 69% );
    -webkit-box-shadow: inset 0 2px 9px rgba(255,255,255,0.3), inset 0 -2px 6px rgba(0,0,0,0.4);
    -moz-box-shadow: inset 0 2px 9px rgba(255,255,255,0.3), inset 0 -2px 6px rgba(0,0,0,0.4);
    box-shadow: inset 0 2px 9px rgba(255,255,255,0.3), inset 0 -2px 6px rgba(0,0,0,0.4);
    position: relative;
    overflow: hidden;
}
.meter > span:after, .animate > span > span {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background-image: -webkit-gradient(linear, 0 0, 100% 100%, color-stop(.25, rgba(255, 255, 255, .2)), color-stop(.25, transparent), color-stop(.5, transparent), color-stop(.5, rgba(255, 255, 255, .2)), color-stop(.75, rgba(255, 255, 255, .2)), color-stop(.75, transparent), to(transparent) );
    background-image: -moz-linear-gradient( -45deg, rgba(255, 255, 255, .2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%, transparent 75%, transparent );
    z-index: 1;
    -webkit-background-size: 50px 50px;
    -moz-background-size: 50px 50px;
    background-size: 50px 50px;
    -webkit-animation: move 1s linear infinite;
    -moz-animation: move 2s linear infinite;
    -webkit-border-top-right-radius: 8px;
    -webkit-border-bottom-right-radius: 8px;
    -moz-border-radius-topright: 8px;
    -moz-border-radius-bottomright: 8px;
    border-top-right-radius: 8px;
    border-bottom-right-radius: 8px;
    -webkit-border-top-left-radius: 20px;
    -webkit-border-bottom-left-radius: 20px;
    -moz-border-radius-topleft: 20px;
    -moz-border-radius-bottomleft: 20px;
    border-top-left-radius: 20px;
    border-bottom-left-radius: 20px;
    overflow: hidden;
}
</style>

<body onload="move()">



<div id="myProgress" class="meter">
  <span id="myBar">
    <center><div id="label">1%</div></center>
  </span>
</div>

<br>




</body>

This is a nice progress bar, but it doesn't answer the initial question - how to get it to fill based on the number of textboxes with text in them. Also, if providing code, it helps to comment or discuss what you're doing. — amadan, Nov 23 '16 at 15:06
what u mean agin i cant understand maybe my language problem or don't know. — Arjun Singh, Nov 23 '16 at 16:56
u mean to say , when someone type text/numbers in bar then its filled or something else ? — Arjun Singh, Nov 23 '16 at 16:57
It's not my question, but I think it's this: say you have three textboxes. While they are all empty, the progress bar is 0%. When one has text, the progress bar is 33%. Two filled, it's 66%. All full, it's 100%. — amadan, Nov 23 '16 at 16:59
ok ok sorry now i read your full question OOPS my mistake , i think i know how to solve this problem , but i need 24 hours becoz of my exam today :( — Arjun Singh, Nov 23 '16 at 17:00
oh tankyou soo much it might helps me to understand now , now i 'll be able to make this easy but tommarow :P — Arjun Singh, Nov 23 '16 at 17:05

How to make a progress bar that fills every time a textbox is filled

3 Answers3