jquery-ui : detect first time change in input

Question

I was trying to make jquery-ui progress bar which shows progress with filling inputs in form. My code is as following:

html:

    <div id="progress" class="progress"></div>
   //form and inputs

script:

$(document).ready(function(){

    var elementcount = document.getElementById("events").length;

    var totallength = 100;

    var relativelength = totallength/elementcount;

    var initial = 0;

    $('#progress').progressbar({
        value: initial,     
    });

    $('#events').find(':input').each(function(){    

          $(this).change(function(){

              if($(this).val()==""){                  
                     var value =   initial - relativelength;
                     $('#progress').progressbar("value",value);
                     initial = value;
              }           
              else{               
                  var value =   initial + relativelength;
                  $('#progress').progressbar("value",value);
                  initial = value;           
              }           
          });   
        });
    });

In above code I have first counted no. of elements in the form and set the relative length(the length to be increased for each filled input). The progress bar is increased for change in input value. If input value is empted(i.e. blank), then it is decreased.

This works fine but the problem is that it detects change every time in change in input. So if I fill input and fill it second time, then again the progress bar is increased.

Is there any solution by which I can detect the first time change in input ans stop progress bar progressing after that change?

Ankit Saroch · Accepted Answer · 2015-02-19T09:05:52.357

What you can do is make a class, let say 'valid', when the user has entered anything that makes the input element valid, then add that class to the input element, otherwise remove it.

$(this).change(function(){

          if($(this).val()==""){                  
                 var value =   initial - relativelength;
                 $('#progress').progressbar("value",value);
                 initial = value;
                 $(this).removeClass('valid');
          }           
          else if(!$(this).hasClass('valid')){               
              var value =   initial + relativelength;
              $('#progress').progressbar("value",value);
              initial = value;
              $(this).addClass('valid');
          }           
      });

Find the working code here.

score 2 · Answer 2 · answered Feb 19 '15 at 07:16

You can use an array which adds one item when text have been added in the input field and removes one item when the input field gets empty like this-

    var items = [];
    $('#events').find(':input').each(function(){    
              $(this).change(function(){
                  if($(this).val()==""){                  
                         items.slice(0);
                         $('#progress').progressbar("value",items.length);
                  }           
                  else{               
                      items.push('1');
                      $('#progress').progressbar("value",items.length);
                  }           
              });   
            });
        });

jquery-ui : detect first time change in input

2 Answers2