CODEWITHSUNDEEP
javascriptjqueryhtmljquery-uijquery-ui-progressbar
Krupal Shah
Krupal Shah

Reputation: 9187

jquery-ui : detect first time change in input

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?

Upvotes: 1

Views: 2116

Answers (2)

Ankit Saroch
Ankit Saroch

Reputation: 690

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.

Upvotes: 2

Manik Arora
Manik Arora

Reputation: 4792

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);
                  }           
              });   
            });
        });

Upvotes: 2

Related Questions