How to change a radio button selection rendered as button by a JavaScript Button?

  • 29 January 2018
  • 5 replies
  • 25 views

Badge +2

I have 3 tabs on top of my form showing and hiding different panels when clicked.

Now I want to add a Javascript button at the end of the form advancing it to the next tab selector.

My Tabs look like this:

The first one is selected by default.

My button looks like this:

The JavaScript has been setup as follows:

varFormTab is Client ID JavaScript variable name created by the tabs selection.

The only thign that happens when the button is clicked is a refresh of the form showing still the default tab selected.

How can I get my button to work?

Thanks,

Harald


5 replies

Userlevel 5
Badge +14

if a form reloads it usually means there an error in a code behind. open developer console, run the form and check for errors reported.

it's not a good practice to write whole code to a client click input field.

create a function in form settings' custom javascript and let the function invoke on button click.

your selectors doesn't seem to me to be correct.

getElementById returns a DOM element/object. you then use it in place of a form ID. it doesn't sound to me it might work. I would rather say this causes an error(s) that makes the form to reload.

Badge +2

Hi Maria,

I inserted the function you mention in your other post into the custom JavaScrip section of the form settings as follows:

function showtab(varFormTabs){
    var rad = NWF$('#' + Section);     
    NWF$(rad.find('label')[varFormTabs]).click();
}

 

And then I am calling the function from the Client click section of the JavaScript button as follows:

showtab()

But when I test it after publishing the form, the form still just reloads and displays the default panel. I don't have a lot of experience with JavaScript. Could you help me getting this to work?

Thanks a lot!

Harald

Badge +2

Hi Maria,

I inserted the function you mention in your other post into the custom JavaScrip section of the form settings as follows:

 

function showtab(varFormTabs){
    var rad = NWF$('#' + Section);     
    NWF$(rad.find('label')[varFormTabs]).click();
}

 

And then I am calling the function from the Client click section of the JavaScript button as follows:

showtab()

 

But when I test it after publishing the form, the form still just reloads and displays the default panel. I don't have a lot of experience with JavaScript. Could you help me getting this to work?

Thanks a lot!

Harald

Userlevel 5
Badge +14

first of all I'd remove all the code and customizations for 'next section' button and resolved problems with form refreshes/reloads.

press F12 in browser, run the form and watch errors reports on developer console.

once you have correctly working form add following code to form settings

(assuming varFormTab  is js variable of tab selector as you mentioned above)

function showtab(Section){
    var rad = NWF$('#' + varFormTabs);    
    NWF$(rad.find('label')[Section]).click();
}‍‍‍‍

'next section' button click action should then look like

on first tab

showtab(1);

on second tab

showtab(2);

 

on 3rd tab (cycles it over to first tab)

showtab(0);

Badge +2

Hi Marian,

that worked!

Thank you so much! You really made my day!

Best regards,

Harald

Reply