AnsweredAssumed Answered

Changing active option button background via javascript

Question asked by itrippedover on Jul 24, 2016

Hi All,

I have a form where I use panels, a choice control rendered as buttons to indicate which panel is currently active and "Previous"/"Next" buttons to move between panels. Originally I started with the choice control, panels and form rules to move between panels. As the different options were selected the background of the option button changed colour. User feedback suggested the "Next"/"Previous" buttons so I am trying to implement that. I followed the instructions here: How to design a Multi-Step form with Nintex Forms for Office 365 which worked perfectly. Apart from getting the background of the option button to change. The option buttons have the following settings:

 

I also have the following javascipt (under the Custom JavaScript settings):

function goStep(stepNumber) 

   var tabsPicker =

   NWF$('#'+Tabs);

   var hiddenTxtBox = NWF$('#'+hiddenTxtBoxId);

   hiddenTxtBox.val(stepNumber);  

   NWF.FormFiller.Functions.ProcessOnChange(hiddenTxtBox);

  

   if (stepNumber==1)

   {

     NWF$('#'+Tabs).val("Agreement");

     /* NWF.FormFiller.Functions.ProcessOnChange(NWF$('#'+Tabs));  */

     alert(NWF$('#'+Tabs).val());

    }

 

   else if (stepNumber==2)

{

     NWF$('#'+Tabs).val("External");

     /* NWF.FormFiller.Functions.ProcessOnChange(NWF$('#'+Tabs));  */

     alert(NWF$('#'+Tabs).val());

    }

 

   else if (stepNumber==3)

   {

      NWF$('#'+Tabs).val("Background");

      /* NWF.FormFiller.Functions.ProcessOnChange(NWF$('#'+Tabs));  */

      alert(NWF$('#'+Tabs).val());

    }

    else if (stepNumber==4)

   {

      NWF$('#'+Tabs).val("IP");

      /*  NWF.FormFiller.Functions.ProcessOnChange(NWF$('#'+Tabs));  */

      alert(NWF$('#'+Tabs).val());

    }

 

   else if (stepNumber==5)

   {

      NWF$('#'+Tabs).val("Risk");

      /*NWF.FormFiller.Functions.ProcessOnChange(NWF$('#'+Tabs));  */

      alert(NWF$('#'+Tabs).val());

    }

 

   else if (stepNumber==6)

   {

      NWF$('#'+Tabs).val("Approvals");

      /*NWF.FormFiller.Functions.ProcessOnChange(NWF$('#'+Tabs));  */

      alert(NWF$('#'+Tabs).val());

    }

 

 

 

And the following custom CSS:

.tabs .ui-button

{

width: 117px;

background-image:

url("<SITEURL>/SiteAssets/LightGreenButton.png");

}

.tabs

.ui-state-active

{

background-image:

url("<SITEURL>/SiteAssets/DarkGreenButton.png");

font-weight: bold;

Color:

White;

}

 

The background is displaying correctly for the buttons, just not when they are changed:

 

Any ideas on how to get the background of the tabs to change when the next/previous buttons are pressed?

Thanks!

Outcomes