How to toggle a button border on and off?

[l337godd3ss]

I am trying to create a pdf where the user can select a box (see below). When the user clicks on the box, a thick black border will appear around the selection.

I know this can be done using a transparent button and javascript but I don't know what script to use. I've tried to find another example on the forums but can only find script for buttons that create a solid fill when clicked, not a border.

The button also needs to toggle, so the border can be added and removed if the user changed their mind.

I know this has to be a fairly simple code (I'm guessing that's why I can't find a forum question on it), but I don't know javascript so I can't write it up. I know how to make the button and where the script goes.....is someone able to help me out?

[try67]

Should the buttons be mutually exclusive? In other words, should clicking on "6 Always" cause the other buttons in the group to "un-click"?

[l337godd3ss]

No, each button would be independent of the others. So if someone really wanted to, they could "click" every single one. I want it set this way because if someone wanted to give a 5.5, they could do that and select both 6 and 5. (We use this form in a paper version now, and I have folks who do that).

[George_Johnson · Accepted solution]

Here's a Mouse Up script you can use with a button that toggles the border color between black and transparent:

// Mouse Up script for button

// Toggle this button's border color between transparent and black

event.target.strokeColor = color.equal(event.target.strokeColor, color.transparent) ? color.black : color.transparent;

[l337godd3ss]

Thank you George! This is exactly what I needed!

try67, I can't let them enter a number into a text field because of the other constraints of how the form is designed (mainly, I simply don't have the space to add more fields and it would make the form even busier than it already is and I need to keep it to one page long). Also, we are trying to keep it as simple as possible and close to how it gets filled out now. We did a major re-design of this form after using the same one for many years by 100 different employers that my program works with....so we are trying to keep things as simple as we can!

[try67]

I don't see how 4 large boxes take less place than a single text field, or how clicking both "5" and "6" to mean "5.5" is simple, but never mind, it's your call...

To change the line thickness of the border you can access the lineWidth property, like this:

event.target.lineWidth = 0; // no border

event.target.lineWidth = 1; // thin border

event.target.lineWidth = 2; // medium border

event.target.lineWidth = 3; // thick border

[try67]

Why not simply let them enter a number into a text field, then?

Your current system is very convoluted and counter-intuitive.

[l337godd3ss]

So after thinking about this further (and consulting the powers that be), I agree - only one button in the group should be allowed to be "clicked" at one time, if possible.

How much does that complicate things? Here is a link to the form that I am working with:

http://lincoln.manitowocpublicschools.org/UserFiles/Servers/Server_6616/File/Worksite Evaluation - 2...

Also, these are the other questions I have based on these buttons:

1. Is it possible to populate the value in of "Worksite Points" based on the button that is selected? (So if the user selects "44" the value of that field will automatically populate as "44").

2. Is it also possible to populate the "Employability Skills Points" value based on the nine values selected for Attendance, Reliability, etc?

I know both of these would be easily achievable with a different form design, but I am limited to what I have and the look of this form.....

[try67]

1. You can use the Mouse Up action of each button to populate a text field with the value associated with that button.

2. I would use the same approach as I described in #1 to populate hidden text fields with the selected values, and then just add up those fields for the total amount.

[l337godd3ss]

Could you help me out with the code for that? Also, how do I limit the user to only being able to have one button per group activated at a time?

[try67]

- As the Mouse Up script of "44" you use something like this:

this.getField("Worksite Points").value = 44;

Repeat the same for the other fields.

- You would need to "reset" the rest of the fields in the group, ie set their border width to 0.

So when "Attendance 6" is clicked, reset "Attendance 5", "Attendance 4" and "Attendance 3", etc.

[l337godd3ss]

Can you give me an example of the code for that - to either set the border of another field to 0 or the border color to transparent?

[try67]

this.getField("Some Field").lineWidth = 0;

this.getField("Some Field").strokeColor = color.transparent;

[l337godd3ss]

Perfect, thank you! I ended up using the code to change the border to transparent, works perfectly! I really appreciate the help!!!!!

[l337godd3ss]

One final question, I have everything working on my form now BUT one thing....my calculation fields are not adding properly. Any idea why this is happening?

Link to form here:

http://lincoln.manitowocpublicschools.org/UserFiles/Servers/Server_6616/File/Worksite%20Evaluation%2...

Here is what is happening, the issue seems odd to me. When I fill out the form, one of the "employability skills" doesn't get added. If I choose a "worksite performance" of 46, and then an Accuracy score of 6, the Total points at the top of the form stays 46, it doesn't change to 52 as it should.

If I choose an Accuracy score of 6, then worksite performance of 46, the total goes to 52 how it should. But the next score I choose then doesn't get added in the total. All other scores after that point do get added, though.

Any idea what is going on here???

[try67]

It's a problem with the fields calculation order. You can set it via the More button in Form Edit mode.

[l337godd3ss]

Aha! Thanks! So glad it was an easy fix!