Welcome, Guest
Username: Password: Remember me

TOPIC: Display commas in long numeric inputs

Re: Display commas in long numeric inputs 2 years 11 months ago #68687

  • tpartner
  • tpartner's Avatar
  • OFFLINE
  • LimeSurvey Team
  • Posts: 4272
  • Thank you received: 806
  • Karma: 369
I tested with your template, making no changes except the code below in template.js (you will need to modify the SGQA values). The data is correct - you can see my results in the image below.
$(document).ready(function() {			   
	// Define custom masks
	$.mask.masks = $.extend($.mask.masks,{
		customMaskThousands:{mask: '.999,999,999,9', type : 'reverse'}  
	});
 
	// Set the 'alt' attributes of the inputs
	$('#answer45236X983X12483').attr('alt', 'customMaskThousands'); // a custom mask					   
 
	// Tell the plugin to apply masks to these inputs
	$('#answer45236X983X12483').setMask();
 
	// Interrupt next/submit function 
	$('#movenextbtn, #movesubmitbtn, #moveprevbtn, #saveallbtn').click(function(){
 
		$('.numeric input.text, .numeric-multi input.text').each(function(){
			$(this).val($(this).val().replace(/,/g,''));
		});
 
		return true;
	});
 
});

Here's my test survey:

File Attachment:

File Name: limesurvey_survey_45236.lss
File Size: 16 KB


And the results:
Capture2_2011-11-08.PNG
Cheers,
Tony Partner

Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.

LimeSurvey is open-source and run entirely by volunteers so please consider donating to support the project.
Last Edit: 2 years 11 months ago by tpartner.
The administrator has disabled public write access.

Re: Display commas in long numeric inputs 2 years 11 months ago #68839

  • Fred
  • Fred's Avatar
  • OFFLINE
  • Gold Lime
  • Posts: 163
  • Thank you received: 5
  • Karma: 3
Tony, Thank you!! Sorry I'm locked up all day today and can't try this until tomorrow.

So are you saying that all the javascript in your post should go in the template.js as opposed to putting the mask stuff in the question text in the survey?
The administrator has disabled public write access.

Re: Display commas in long numeric inputs 2 years 11 months ago #68841

  • tpartner
  • tpartner's Avatar
  • OFFLINE
  • LimeSurvey Team
  • Posts: 4272
  • Thank you received: 806
  • Karma: 369
In this case, because you're not using any lime replacement tags, it shouldn't matter whether it's in the question source or in template.js.

I just use template.js because it's faster to edit.
Cheers,
Tony Partner

Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.

LimeSurvey is open-source and run entirely by volunteers so please consider donating to support the project.
The administrator has disabled public write access.

Re: Display commas in long numeric inputs 2 years 11 months ago #69246

  • Fred
  • Fred's Avatar
  • OFFLINE
  • Gold Lime
  • Posts: 163
  • Thank you received: 5
  • Karma: 3
Hi Tony, Thanks again for your awesome help on this.

I got the numbers to save correctly when pressing submit. When I save responses, it's still not saving correctly.

I was thinking also if I have a lot of these dollar questions across many surveys, the template.js will get a little cluttered. Wouldn't it have to load all those lines of code on every page for every survey?
The administrator has disabled public write access.

Re: Display commas in long numeric inputs 2 years 11 months ago #69258

  • tpartner
  • tpartner's Avatar
  • OFFLINE
  • LimeSurvey Team
  • Posts: 4272
  • Thank you received: 806
  • Karma: 369
When I save responses, it's still not saving correctly.
Hmm...somehow we got the wrong selector.

Change:
$('#movenextbtn, #movesubmitbtn, #moveprevbtn, #saveallbtn').click(function(){

To:
$('#movenextbtn, #movesubmitbtn, #moveprevbtn, .saveall').click(function(){
Cheers,
Tony Partner

Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.

LimeSurvey is open-source and run entirely by volunteers so please consider donating to support the project.
The administrator has disabled public write access.

Re: Display commas in long numeric inputs 2 years 11 months ago #69259

  • tpartner
  • tpartner's Avatar
  • OFFLINE
  • LimeSurvey Team
  • Posts: 4272
  • Thank you received: 806
  • Karma: 369
I was thinking also if I have a lot of these dollar questions across many surveys, the template.js will get a little cluttered.
Yeah, if you have lots of them it could get a little messy.

How about putting a flag in the masked questions that contains the mask to be applied. The code in template.js could find all of these flags and apply the appropriate mask to all text inputs in their parent question.

So, for all questions you would like to apply the "customMaskThousands" mask to, add the following to the source of the question text or help:
<span class="maskFlag" style="display:none;">customMaskThousands</span>

And then change the code in template.js to this:
$(document).ready(function() {	
 
	// Only if there are mask flags found on this page
	if($('.maskFlag').length > 0) {
 
		// Define custom masks
		$.mask.masks = $.extend($.mask.masks,{
			customMaskThousands:{mask: '.999,999,999,9', type : 'reverse'}  
		});
 
		// Find all mask flags, apply the appropriate mask to the inputs in that question
		// and add classes to the inputs so we can tweak/validate the values on submit
		$('.maskFlag').each(function(i){
			var maskName = $(this).text();
			var el = $(this).parents('div[id^="question"]');
			$('input.text', el).attr('alt', maskName).addClass('maskedInput '+maskName);
		});
 
		// Apply masks to the inputs
		$('input.maskedInput').setMask();
 
		// Interrupt next/submit function 
		$('#movenextbtn, #movesubmitbtn, #moveprevbtn, .saveall').click(function(){
 
			// Remove all commas from the customMaskThousands inputs
			$('input.customMaskThousands').each(function(){
				$(this).val($(this).val().replace(/,/g,''));
			});
 
			return true;
		});
	}
 
});

You can define as many masks as you like and simply change "customMaskThousands" in the flag with the mask name.
Cheers,
Tony Partner

Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.

LimeSurvey is open-source and run entirely by volunteers so please consider donating to support the project.
Last Edit: 2 years 11 months ago by tpartner. Reason: typo
The administrator has disabled public write access.

Re: Display commas in long numeric inputs 2 years 11 months ago #69330

  • Fred
  • Fred's Avatar
  • OFFLINE
  • Gold Lime
  • Posts: 163
  • Thank you received: 5
  • Karma: 3
Tony, I am pulling my hair out. Either this is impossible or it's something really simple I'm missing. See below for the javascript I'm using. The mask is controlling the display correctly and inserts the commas in the right places, and if you just enter a value and press submit, it also saves to the DB correctly. But if you save and resume the questionnaire, it truncates the values. I attached an Excel file showing some sample tests.

I confirmed from checking the DB that the bad values are stored right when you press "Resume."

Depending on the number of digits and the number of trailing zeros in the number, it mangles it in different ways. Sometimes it replaces one of the commas with a decimals. It may drop some digits or not. Not sure what the pattern is.

Any last ideas before I give up? :(

By the way, I've checked SurveyMonkey, SurveyGizmo, and Google Forms, and interestingly, none of them handle this masking. Could be a competitive advantage for LS if we (ie, you) can figure it out!


Code display:
$(document).ready(function() {			   
	// Define custom masks
	$.mask.masks = $.extend($.mask.masks,{
		customMaskThousands:{mask: '.999,999,999,9', type : 'reverse'}  
	});
 
	// Set the 'alt' attributes of the inputs	
	$('#answer93956X23X2422010').attr('alt', 'customMaskThousands');				   
	$('#answer93956X23X2422009').attr('alt', 'customMaskThousands');
    $('#answer93956X23X2422008').attr('alt', 'customMaskThousands');				   
 
	// Tell the plugin to apply masks to these inputs
	$('input:#answer93956X23X2422010').setMask();	
	$('input:#answer93956X23X2422009').setMask();	
	$('input:#answer93956X23X2422008').setMask();
 
 
	// Interrupt next/submit function 
		$('#movenextbtn, #movesubmitbtn, #moveprevbtn, .saveall').click(function(){
 
			$('.numeric input.text, .numeric-multi input.text').each(function(){
				$(this).val($(this).val().replace(/,/g,''));
			});
 
			return true;
		});
 
});
The administrator has disabled public write access.

Re: Display commas in long numeric inputs 2 years 11 months ago #69335

  • tpartner
  • tpartner's Avatar
  • OFFLINE
  • LimeSurvey Team
  • Posts: 4272
  • Thank you received: 806
  • Karma: 369
Okay, it's because the page is redirecting before the script can clean up the inputs so we'll use a mousedown event for that button instaed if a click function.

Change this:
			// Interrupt next/submit function 
			$('#movenextbtn, #movesubmitbtn, #moveprevbtn').click(function(){
 
				// Remove all commas from the customMaskThousands inputs
				$('input.customMaskThousands').each(function(){
					$(this).val($(this).val().replace(/,/g,''));
					$(this).blur();
				});
 
				return true;
			});

To this:
			// Interrupt next/submit function 
			$('#movenextbtn, #movesubmitbtn, #moveprevbtn').click(function(){
 
				// Remove all commas from the customMaskThousands inputs
				$('input.customMaskThousands').each(function(){
					$(this).val($(this).val().replace(/,/g,''));
					$(this).blur();
				});
 
				return true;
			});
 
			// Interrupt Resume function 
			$('.saveall').mousedown(function(){
 
				// Remove all commas from the customMaskThousands inputs
				$('input.customMaskThousands').each(function(){
					$(this).val($(this).val().replace(/,/g,''));
					$(this).blur();
				});
 
				return true;
			});
Cheers,
Tony Partner

Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.

LimeSurvey is open-source and run entirely by volunteers so please consider donating to support the project.
The administrator has disabled public write access.

Re: Display commas in long numeric inputs 2 years 11 months ago #69336

  • tpartner
  • tpartner's Avatar
  • OFFLINE
  • LimeSurvey Team
  • Posts: 4272
  • Thank you received: 806
  • Karma: 369
So the full script in template.js should now be:
$(document).ready(function() {	
 
	// Only if there are mask flags found on this page
	if($('.maskFlag').length > 0) {
 
		// Define custom masks
		$.mask.masks = $.extend($.mask.masks,{
			customMaskThousands:{mask: '.999,999,999,9', type : 'reverse'}  
		});
 
		// Find all mask flags, apply the appropriate mask to the inputs in that question
		// and add classes to the inputs so we can tweak/validate the values on submit
		$('.maskFlag').each(function(i){
			var maskName = $(this).text();
			var el = $(this).parents('div[id^="question"]');
			$('input.text', el).attr('alt', maskName).addClass('maskedInput '+maskName);
		});
 
		// Apply masks to the inputs
		$('input.maskedInput').setMask();
 
		// Interrupt next/submit function 
		$('#movenextbtn, #movesubmitbtn, #moveprevbtn').click(function(){
 
			// Remove all commas from the customMaskThousands inputs
			$('input.customMaskThousands').each(function(){
				$(this).val($(this).val().replace(/,/g,''));
				$(this).blur();
			});
 
			return true;
		});
 
		// Interrupt Resume function 
		$('.saveall').mousedown(function(){
 
			// Remove all commas from the customMaskThousands inputs
			$('input.customMaskThousands').each(function(){
				$(this).val($(this).val().replace(/,/g,''));
				$(this).blur();
			});
 
			return true;
		});
	}
 
});
Cheers,
Tony Partner

Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.

LimeSurvey is open-source and run entirely by volunteers so please consider donating to support the project.
The administrator has disabled public write access.

Re: Display commas in long numeric inputs 2 years 11 months ago #69416

  • Fred
  • Fred's Avatar
  • OFFLINE
  • Gold Lime
  • Posts: 163
  • Thank you received: 5
  • Karma: 3
Tony, wow, I ran this through on one question and it looks amazing. Note, the mask definition is missing in the code from your last post. I just had to add that in. I will do some more tests by tomorrow.

Thanks again!
$.mask.masks = $.extend($.mask.masks,{
			customMaskThousands:{mask: '.999,999,999,9', type : 'reverse'}  
		});
The administrator has disabled public write access.
Moderators: ITEd
Time to create page: 0.209 seconds
Donation Image