Question

Jquery-ui Progress Bar

Forms

Updated March 9, 2015

asked on March 6, 2015

Hello,

I am looking for a way to create a progress bar to show the 'Form Completion' progress that will show how far along the submitter is. I'm starting with a simple task to count the number of characters in a given field (formprogress) and the progress bar is displaying as 100% full. I've attached the code and a screenshot of my form as reference.

//Progress
$.getScript('http://L7711/Forms/js/jquery-ui.js', function () {
  $("#q20").keyup(function() {
    	
   		var len = $(this).val().length;
    	console.log(len);
    
    	var total = null;
        total = len * 10;
    
    	barUpdate(total);
  });
 
  function barUpdate(total) {
  $("#progressBar").progressbar({
    value: total //Note:  When I hard code a value (e.g. 25) in the 'value: total' area of the code, the progress bar displays correctly.  
    }); 
}
});
//End Progress Bar

Please let me know if you can see where I'm doing wrong.

Thanks,

Nate

Progress Bar - Correct.JPG (14.68 KB)

| Download

Progress Bar - Incorrect.JPG (16.47 KB)

| Download

0 0

Answer

SELECTED ANSWER

replied on March 6, 2015 • Show version history

Hi Nathan,

I switched the selector from using Q1, to Field1, as Q1 is a larger element holding the field value and label and it works.

*EDIT* In your case it would be Field20 instead of Field1 if it's noted as Q20 in your Forms designer.


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

$(document).ready(function(){
	
  $("#Field1").keyup(function() {
    var len = $(this).val().length;
    console.log(len);
    
    var total = null;
    total = len * 10;
    
    barUpdate(total);
  });
});

Cheers,

Carl

1 0

Replies

replied on March 9, 2015

That was it! Thanks Carl!

0 0

You are not allowed to follow up in this post.

Question

Question

Jquery-ui Progress Bar

Answer

Replies

Sign in to reply to this post.