Changing Textfield font size using Buttons

[Former Community Member]

HI,

I have a few textfields in my form with a confined static area and the default font size is set to 11px. However, some users would like to have an option of increasing the font size in these fields. I have looked around for a solution and I understand the there are 2 ways to achieve this: either by using a button to change font size (or) with a drop-down list controlling the font size. I am wanting to do something like this:

1) Add 2 buttons on the form to control its font size. One button will have "+" (to increase the font size) and the other button will be "-" (to decrease the font size) .

2) I understand that if I am defining a fixed font size to increase to, then I can add a javascript something like this:

TextField1.font.size = "12pt"; 

But I dont want to do like this since in that case, I can only give limited options. Is there a way to write a javascript that can identity the current font size of the textfield and then either adds (or) subtracts 1pt to its font size depending whether the user clicked the "+" or "-" symbol? This way, the user can control and experiment which font size best suites them. Hope this makes sense.. I wonder if someone has an idea on how I can do this...

[BarlaeDC · Accepted solution]

Hi,

You could use code like this on the "+" and "-" buttons

//This code is for the "+" button

// get font size

var currentSize = TextField1.font.size;

// get location of the "pt" string

var ptPlace = currentSize.indexOf ( "pt");

// get the part of the string that is just numbers

var currentSizeInt = currentSize.substr ( 0, ptPlace);

// parse that new string as an integer and add 1

var newSizeInt = parseInt (currentSizeInt, 10) + 1;

// set that as the new font size ( adding the "pt" back on)

TextField1.font.size = currentSizeInt + "pt";

Obviously for the "-" you just change the line that adds one to subtract 1

Hope this helps

Malcolm

[Former Community Member]

hi Malcolm, thank you for your response..

I can now understand the method to use to change and control the font size. However, I couldnt get this to work. I just tried added a "+ button" with the above jscript code to the click event, but when its clicked nothing happens. Also there is no error report in the debugger neither...am I missing something?

[Former Community Member]

got it...there was 1 small typo in that script. its the last line it should be: TextField1.font.size = newSizeInt + "pt";

I know thats what you meant...your comments in the scripts were really helpful and explained your method...Thanks heaps!

So just to wrap it up again, this is code that I am using and it works:

/This code is for the "+" button
// get font size
var currentSize = TextField1.font.size;
// get location of the "pt" string
var ptPlace = currentSize.indexOf("pt");
// get the part of the string that is just numbers
var currentSizeInt = currentSize.substr(0,ptPlace);
// parse that new string as an integer and add 1
var newSizeInt = parseInt(currentSizeInt,10)+1;
// set that as the new font size ( adding the "pt" back on)
TextField1.font.size = newSizeInt + "pt";

Thanks again Malcolm!

[Former Community Member]

I just found out one more thing for this script....This script only works when the texfield's Field Format is set to only "Plain Text Only" and it does not work when its on "Rich Text". Is there a way to achieve the same results for Rich Texts or is it not possible?

[Former Community Member]

sorry Malcolm...I need 1 more help from you man...been stuck on this today and couldnt figure this one out:

I am slightly modifying your script so the "+" button increases the sizes of fonts in all the textfields rather than just 1 textfield. In my form, I have a table with 1 Row and 5 columns. Each of these 5 columns has a Textfield inside each cell. Also these tables rows also have 3 or more instances. So I tried the following code and it only increases the font size of the first text field and not the textfields in other table columns nor the fields in their table instances...

//This code is for the "+" button
// get font size
var currentSize = xfa.resolveNode("xfa.form.form1.pageSubform.dynamicSubform.Table1.Row1.column1Subform.Textfield1").font.size;
// get location of the "pt" string
var ptPlace = currentSize.indexOf("pt");
// get the part of the string that is just numbers
var currentSizeInt = currentSize.substr(0,ptPlace);
// parse that new string as an integer and add 1
var newSizeInt = parseInt(currentSizeInt, 10) + 1;
// set that as the new font size ( adding the "pt" back on)
//and also do the same of all its instances.
//First counting the number of dynamic rows 
var countRows = form1.pageSubform.dynamicSubform.Table1.Row1.instanceManager.count;
//loop to set new font size to this textfield and all its instances
for(var i=0; i<countRows; i++){
xfa.resolveNode("xfa.form.form1.pageSubform.dynamicSubform.Table1.Row1.column1Subform.Textfield1["+i+"]").font.size = newSizeInt + "pt";
//here doing the same for the textfields in other columns
xfa.resolveNode("xfa.form.form1.pageSubform.dynamicSubform.Table1.Row1.column2Subform.Textfield1["+i+"]").font.size = newSizeInt + "pt";
xfa.resolveNode("xfa.form.form1.pageSubform.dynamicSubform.Table1.Row1.column3Subform.Textfield1["+i+"]").font.size = newSizeInt + "pt";
xfa.resolveNode("xfa.form.form1.pageSubform.dynamicSubform.Table1.Row1.column4Subform.Textfield1["+i+"]").font.size = newSizeInt + "pt";
xfa.resolveNode("xfa.form.form1.pageSubform.dynamicSubform.Table1.Row1.column5Subform.Textfield1["+i+"]").font.size = newSizeInt + "pt";
}

All of these textfields has the same font size and dimension initially and I thought I can change the font size for all other text fields simply by adding the "newSizeInt" value to them. I tried it many ways but it doesnt work. Only the first textfield size changes and not the rest...can you help me plz? How can I modify this so the "+" button increases the size of the fonts in all the textfields in my table and its table instances?

[BarlaeDC]

Hi,

Can you post your form to a file sharing site ( e.g. acrobat.com) and post the link here then I can see how you form is made and should be able to find a solution to your problem.

regards

Malcolm

[Former Community Member]

Hi Malcolm....I got it sorted and it now works...I made a few rookie mistakes and I was able to figure it out this morning. (Maybe I just needed a clear head today...wasted so much time banging my head yesterday but I was able to identify the mistakes today! funny how that works..lol)

These are the mistakes I did:

1) When I first tried your code with 1 textfield, I changed that field from "rich text" to "plain text" in order for this script to work. However, when I modified this script to do the same for the other textfields, I forgot to change the remaining fields to "plain text" as well...sounds silly now, but I totally missed this one yesterday! Since I am still getting used to jscripts, when it wasnt working I straight away thought it was my script at fault. Need to have more confidence on myself I guess.. :-)

2) I also made a small mistake in the script as well. Instead of adding the loop "i" for the rows, I added it to the textfields which wasnt right. Thats why the font size of the row's instances werent changing..I needed to add "resolveNode("Row1["+i+"]")" instead of "Row1". So I now changed the script to this and now it works perfectly!

//This code is for the "+" button
// get font size
var currentSize = xfa.resolveNode("xfa.form.form1.pageSubform.dynamicSubform.Table1.Row1.column1Subform.Textfield1").font.size;
// get location of the "pt" string
var ptPlace = currentSize.indexOf("pt");
// get the part of the string that is just numbers
var currentSizeInt = currentSize.substr(0,ptPlace);
// parse that new string as an integer and add 1
var newSizeInt = parseInt(currentSizeInt, 10) + 1;
// set that as the new font size ( adding the "pt" back on)
 
//and also do the same of all its instances.
 
 
//First counting the number of dynamic rows 
var countRows = form1.pageSubform.dynamicSubform.Table1.Row1.instanceManager.count;
 
//loop to set new font size to this textfield and all its instances
for(var i=0; i<countRows; i++){
form1.pageSubform.dynamicSubform.Table1.resolveNode("Row1["+i+"]").column1Subform.Textfield1.font.size = newSizeInt + "pt";
 
 
//here doing the same for the textfields in other columns
form1.pageSubform.dynamicSubform.Table1.resolveNode("Row1["+i+"]").column2Subform.Textfield1.font.size = newSizeInt + "pt";
 
form1.pageSubform.dynamicSubform.Table1.resolveNode("Row1["+i+"]").column3Subform.Textfield1.font.size = newSizeInt + "pt";
form1.pageSubform.dynamicSubform.Table1.resolveNode("Row1["+i+"]").column4Subform.Textfield1.font.size = newSizeInt + "pt";
form1.pageSubform.dynamicSubform.Table1.resolveNode("Row1["+i+"]").column5Subform.Textfield1.font.size = newSizeInt + "pt";
}
 

I'm so glad its working now...Its a good start of my morning today!

Thank you so much for your support and guiding me through this Malcolm! Much appreciated! :-)

Cheers!

[Yan_Prud_homme]

I use the code in a Static Form and seem not working.

I tried in a Dynamic Form and it worked.

Is there a way to make buttons to increase and decrease fontsize of a Textfield in a Static Form?

Thanks!

Yan