Buttons change and Javascript

[kelvin5EAC]

Hello Everyone,

First of all, i know nothing about Javascript but here is what i lke to see on my fIllable pdf.

By clicking on the same button few times, i would like to see it changing by an other button and so on.

Button 1: a square

Button 2: a circle

Button 3: blank

So, when i click one time, it goes from a square to circle next by clicking again, to circle to blank and by cliking again, blank to sqaure .... etc..

Thank you very much

[Thom Parker · Accepted solution]

It sounds like you want a 3 state button. This can be done with a script, and much easier than having 3 separate buttons.  Use the Adobe Pi font  to make the caption font into a shape.

The this code will work for every button in the same way.  Add it to a Mouse Up "Run a JavaScript" action

switch(event.target.buttonGetCaption())
{
   case " ": 
      event.target.buttonSetCaption("n");
      break;
   case "n": 
      event.target.buttonSetCaption("l");
      break;
   default: 
      event.target.buttonSetCaption(" ");
      break;
}

[try67]

Do you mean you want to change the text of a single button each time it's clicked, or do you want to have multiple buttons, each one with a different caption (or image) and show/hide them in order?

[kelvin5EAC]

Each one has a different caption. There is no text.

I 've found a solution by making 3 different buttons (a square, a circle and a blank) and next, i set them up by show/hide when i click on them. All this 3 buttons are on the same little area like 3 buttons in one.

The thing is that i need to create 150 little areas with 3buttons each !

If i create copies, i thought it could work but the copies keep the setting of the initial button so each time i click on a new copy, all the copies and the orginal change.

That 's why, i guess, the only way is to input a script.

I hope to be clear enought.

Thank you

[Bernd Alheit]

You must use unique names for the buttons

[kelvin5EAC]

yes, but i don't see me creating 150x3 different names.

The script would direct to the 3 reference buttons and when i will create copies, the script will copy too i guess.

[try67]

You can duplicate the buttons using a script, or the built-in Create Multiple Copies command.

If you place the script in a doc-level function and build it to accommodate for the different field names then you would only need to write it once, and then just call it from each button.

[kelvin5EAC]

it would be awesome. Just need the script to write.

[kelvin5EAC]

Anyone have an idea pls ?

[Thom Parker · Accepted solution]

It sounds like you want a 3 state button. This can be done with a script, and much easier than having 3 separate buttons.  Use the Adobe Pi font  to make the caption font into a shape.

The this code will work for every button in the same way.  Add it to a Mouse Up "Run a JavaScript" action

switch(event.target.buttonGetCaption())
{
   case " ": 
      event.target.buttonSetCaption("n");
      break;
   case "n": 
      event.target.buttonSetCaption("l");
      break;
   default: 
      event.target.buttonSetCaption(" ");
      break;
}

[kelvin5EAC]

Thank you Thom for your reply.

At the beginning i created 3 separate buttons because my square and my circle are more like icon coming from image (png), not font.

Would it be possible to do the same effect with button changing on click ?

[Thom Parker]

Yes, the circle and square icons can be saved as images in a hidden button, then acquired and applied with the "field.buttonGetIcon" and "filed.buttonSetIcon" functions. You'd just change the button properties to only display an image, but keep the script the same and then add the code to set the icons into it.  However, unless your icons are more than a plain square and circle, you are better off using fonts.  

You'll fine a sample PDF that uses this icon swapping technique here:

https://www.pdfscripting.com/public/Free-Sample-PDF-Files-with-scripts.cfm

Look for the "Swat the Fly" game.

[kelvin5EAC]

I'm sorry if i look like dumb but i don't really get it.

Ok, first i created my source button (the one where we will click on).

It has no image on it and it is named "Empty".

Next i wrote the folllowing script on this button:

switch(event.target.field.buttonGetIcon())
{
case "Empty":
event.target.field.buttonSetIcon("Special 1");
break;
case "Special 1":
event.target.field.buttonSetIcon("Special 2");
break;
default:
event.target.field.buttonSetIcon("Empty");
break;
}

Before that i prepared my 2 special buttons hidden on screen with 2 different image.

I called them "Special 1", "Special 2".

Then when i click on my source button, nothing happen.

Thank you again for your patience and your help.

[try67]

The buttonGetIcon and buttonSetIcon methods are used to set the field's icon, which is an image, not text...

You need to use buttonGetCaption and buttonSetCaption when you're working with the button's label.

[kelvin5EAC]

ok but what should i write in my script to designate my hidden button with my special images ?

[kelvin5EAC]

I tried this but nothing happen too.

switch(event.target.buttonGetCaption())
{
case "Empty":
event.target.buttonSetCaption("Special 1");
break;
case "Special 1":
event.target.buttonSetCaption("Special 2");
break;
default:
event.target.buttonSetCaption("Empty");
break;
}

[Bernd Alheit]

What does you use as caption of the button?

[kelvin5EAC]

I have a button with a D12 yellow dice image. His caption is Proficiency.

I have a second button with a D8 green dice image. His caption is Ability.

On the button where i need to click (button 0), it is blank, empty at the beginning.

Each time we click on, i'd like to see it changing from empty to "Ability" to "Proficiency" to empty to ...etc..

[Nesa Nurani · Accepted solution]

Don't forget to set button to 'icon only' in button -> properties -> options tab, then use this script as Mouse UP:

var e = this.getField("Empty").buttonGetIcon()
var a = this.getField("Special 1").buttonGetIcon();
var p = this.getField("Special 2").buttonGetIcon();
if(event.target.buttonGetIcon() == e)
event.target.buttonSetIcon(a);
else if(event.target.buttonGetIcon() == a)
event.target.buttonSetIcon(p);
else if(event.target.buttonGetIcon() == p)
event.target.buttonSetIcon(e);

[kelvin5EAC]

THANK YOU VERY MUCH!

IT IS PERFECT !!!!