Hello,
I'm trying to change a CSS of a textbox using Javascript on button click.
I was able to get this post working from @cju however, the script only changes the CSS on the button itself. I would like it to change the CSS on another field, eg. a single or multiple text boxes.
Here is @cju's post for reference.
ok, then you can do the following:
- add the same CSS class to all 3 buttons (for example, "grouped-button") in the Control Settings of each button, Formatting section, CSS class field
- when one of those 3 buttons is clicked, execute a Javascript function which would remove the CSS class "highlighted-button" from all buttons which has the CSS class "grouped-button" and add the CSS class "highlighted-button" to the clicked button. This can be done by populating the following in Control Settings of each button, Advanced section, Client click field :
- setHighlightButton(this);
- add the following javascript function to the form :
- function setHighlightButton(buttonClicked) { NWF$("input.grouped-button").removeClass("highlighted-button"); NWF$(buttonClicked).addClass("highlighted-button"); }
- add the following CSS declaration to the form to add a black border to the clicked button, for example (you can also invert the background color and font color of the button instead of changing the border color of the button) :
- input.highlighted-button { border: 1px solid #000; }
Thank you!