Page 1 of 1
Custom text format
Posted: Thu Jul 30, 2015 5:21 pm
by sloranger
Hi, is this possible to put custom text format in text fields (phone number, postal code, etc)?
Re: Custom text format
Posted: Fri Sep 11, 2015 8:18 pm
by Richsurvey
Hi,
I'm also interested in finding a solution to this dilemma. I've found this post on the NuBuilder blog (
http://nubuilder.blogspot.ca/2009/07/nu ... icity.html) pretty much informing me that this solution will not be implemented, but you can create a JavaScript to solve the problem (which is perfectly fine). I also found this jQuery plug (
http://digitalbush.com/projects/masked-input-plugin/) - pretty nice, but I don't know how to implement the plug-in to NuBuilder.
any help will be greatly appreciated. either a complete solution (add an input mask to a textbox) or adding the above plug-in to NuBuilder. Or even pointing me in the right direction on how to write the script (not a programmer - but willing to learn).
Thanks in advance!
Rich
Re: Custom text format
Posted: Mon Sep 14, 2015 7:51 am
by admin
Here are some samples that you can put on a Form's Javascript Custom Code and called onchange of the Object you are trying to format...
Code: Select all
function nuFormatPhone(t){
if(t.value.length != 10){
alert('Must have 10 numbers');
t.value = '';
return;
}
t.value = t.value.replace(/(\d{2})(\d{4})(\d{4})/, '$1 $2 $3');
t.value = String(t.value).substr(0,12);
}
function nuFormatMobile(t){
if(t.value.length != 10){
alert('Must have 10 numbers');
t.value = '';
return;
}
t.value = t.value.replace(/(\d{4})(\d{3})(\d{3})/, '$1 $2 $3');
t.value = String(t.value).substr(0,12);
}
function nuFormatABN(t){
if(t.value.length != 11){
alert('Must have 11 numbers');
t.value = '';
return;
}
t.value = t.value.replace(/(\d{2})(\d{3})(\d{3})(\d{3})/, '$1 $2 $3 $4');
//t.value = String(t.value).substr(0,11);
}
function nuFormatPC(t){
if(t.value.length != 4){
alert('Must have 4 numbers');
t.value = '';
return;
}
t.value = t.value.replace(/(\d{4})/, '$1');
}
Steven
Re: Custom text format
Posted: Wed Sep 16, 2015 7:50 pm
by Richsurvey
Hi Steven,
Thank you very much for the quick reply. That code works, but my desired mask is a bit different. I'm looking to have users enter 2 to 4 uppercase letters (ideally I want it to be upper case while they are entering) a space after the letter and the date in the following format: ##-##-## and with a letter in uppercase after the date (e.g PI 15-12-16A or PIN 15-09-13 or PINS 15-09-12J). In MS Access the input mask I created for this is: >LL??\ 00\-00\-00?;0;_
I've looked online and found a couple of solutions for an input mask plugin (e.g
http://javascriptools.sourceforge.net/s ... _mask.html), but I'm still stuck as to how to implement them into NuBuilder. I've tried inputing the JavaScript plugin to the index.php and adding the code into the form's JavaScript custom code, but no dice. can you please let me know if this type of solution is possible.
Again, I'll take any help you can provide. Thanks!
Rich
Re: Custom text format
Posted: Fri Sep 18, 2015 1:58 am
by admin
Rich,
Put the JavaScript on the Form that it will be called from..
c1.PNG
Put an event that calls the JavaScript on the Object you want to format..
c2.PNG
Steven
Re: Custom text format
Posted: Tue Oct 06, 2015 9:48 pm
by Richsurvey
Hi Steven,
Thanks for your help. this works! I'm sure most users in hear knows how to do this, but if not here is how i got the plug-in to work (I’m using the following plugin
http://javascriptools.sourceforge.net/s ... _mask.html)
1. Save the plug-in/script in a folder in nuBuilder – I saved mine in “nubuilder\jquery”
2. open “index.php” in a text editor (I use Notepad++) and add the script location.
3. In the custom code -> JavaScript of the form create a function that uses the script/plug-in you added. Mine looks like the following:
Code: Select all
function setup() {
var custom1 = new InputMask([fieldBuilder.upperLetters(2, 4), fieldBuilder.literal(" "), fieldBuilder.inputNumbers(2), fieldBuilder.literal("-"), fieldBuilder.inputNumbers(2), fieldBuilder.literal("-"), fieldBuilder.inputNumbers(2), fieldBuilder.upperLetters(0, 1)], "study_");
}
4. In the events tab of the object you want to use this function/feature call the function based on an event. Mine is:
Onfocus : setup().
DONE! - Any easy way to test if the plug-in/script is working is in fast form - If when you click on “E” (View edit form) the edit screen opens then the script is working.
I'm not sure if jQuery plug-in works (I tried a few, but with little success). I’m slowly learning, but in the end I would like my forms to look like this:
http://classicforms.workforfood.pro/ful ... rvice.html
- is this possible? the authors website is here:
http://codecanyon.net/item/classic-form ... k/12938156
Again thanks for all your help Steven.
Re: Custom text format
Posted: Wed Oct 07, 2015 12:36 am
by admin
Rich,
Instead of step 2, as you have done, you could add the script location in System Setup.
Capture.PNG
That way it won't interfere with future nuBuilderPro updates.
Steven