Changing CSS using Javascript

  • 17 September 2019
  • 1 reply
  • 37 views

Badge +1

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!

 


1 reply

Badge +1

I guess the answer was pretty simple.

 

Use ccsControl in the CSS Class

In form Javascript paste:

function myButton() {
NWF$(".ccsControl").css("background-color","red");
};

Create a javascript button with client click: myButton();

Reply