Forums

tab or radio button on focus.

cyberrock 08 Nov, 2016
Hi Bob,
I just wanted to pick your brain quickly, if i can?

I have 1 tab area (payments), with 3 tabs (paypal/cash/EFT). Each tab, has 1 option under the same radio button name. value = 0, 1, and 2. Data is pulled from the database to pre check/select a radio button onload. but i need it to also focus on that particular tab as well.

Any thoughts??

Regards

Ben
GreyHead 17 Nov, 2016
Hi Ben,

Sorry for the delay. I have written some custom JavaScript that will do this. It will need tweaking for your case though.

This works on a form with three tabs where the tab containers have their IDs set to tab_first, tab_middle and tab_last.

If you set a tab 'selected' in the form for example by adding &tab=middle to the URL then that tab is selected,
<?php
if ( empty($form->data['selected']) ) {
  $selected = 'tab_first';
} else {
  $selected = '#tab_'.$form->data['selected'];
}
// add the name of the selected tab as a JS var
echo "var selected = '{$selected}';";
?>
jQuery(document).ready(function(jQ){
  // remove the 'active' class from all the tab labels
  jQ('.gbs3 .nav li').each( function() {
    jQ(this).removeClass('active');
  });
  // add the 'active' class to the selected label
  jQ('a[href="'+selected+'"]').parent().addClass('active');

  // remove the active class from all the tab contents
  jQ('.gbs3 .tab-pane').each( function() {
    jQ(this).removeClass('active');
  });
  // add the 'active' class to the selected content
  jQ(selected).addClass('active');
});

Bob
This topic is locked and no more replies can be posted.