title: Bootstrap Wizard next tab on image click and capture value
body: <p>I have a form with <em>Twitter Bootstrap Wizard</em> and I have several images that when I select one, I must store locally the value and go to the next tab (<code>o._nextTab</code>).</p>
  
  <p>When I click the image it should go to the next tab, but currently is not working.</p>
  
  <p>This is the idea: </p>
  
  <pre><code>(function($) {
  "use strict";
  var sdm = function() {
      var o = this; 
      $(document).ready(function() {
          o.initialize();
      });
  };
  var p = sdm.prototype;
  p.initialize = function() {
    this._initChartWizard();
  };
  
  
  //Chart Wizard form
  p._initChartWizard = function () {
    var o = this;
    $('#chartwizard').bootstrapWizard({
      onTabShow: function (tab, navigation, index) {
        o._handleTabShow(tab, navigation, index, $('#chartwizard'));
        o._nextTab(o);
      }
    });
  
    $('#chartwizard').bootstrapWizard({ 'nextSelector': '.chartOption' });
  
  }
  
  p._handleTabShow = function (tab, navigation, index, wizard) {
    var total = navigation.find('li').length;
    var current = index + 0;
    var percent = (current / (total - 1)) * 100;
    var percentWidth = 100 - (100 / total) + '%';
  
    navigation.find('li').removeClass('done');
    navigation.find('li.active').prevAll().addClass('done');
  
    wizard.find('.progress-bar').css({ width: percent + '%' });
    $('.form-wizard-horizontal').find('.progress').css({ 'width': percentWidth });
  }
  
  p._nextTab = function(wizard) {
    $('.nextT').click(function(){
      wizard('next');
    });
  }
  
  window.boostbox = window.boostbox || {};
  window.boostbox.sdm = new sdm;
  }(jQuery)); // pass in (jQuery):
  </code></pre>
  
  <p>There will be several images, I want to click on the image and go to the next tab, or at least select the image and then when I click next get the value.</p>
  
  <p>I'm using <em>pyjade</em> to create the templates so if theres any idea there or using javascript it will be welcome.</p>
  
  <pre><code>&lt;div id="chartwizard" class="form-wizard form-wizard-horizontal"&gt;
  &lt;form role="form" novalidate="novalidate" class="form-horizontal form-bordered"&gt;
    &lt;div class="form-wizard-nav"&gt;
      &lt;div class="progress"&gt;
        &lt;div class="progress-bar progress-bar-primary"&gt;&lt;/div&gt;
      &lt;/div&gt;
      &lt;ul class="nav nav-justified"&gt;
        &lt;li class="active"&gt;&lt;a href="#tab1" data-toggle="tab"&gt;&lt;span class="step"&gt;1&lt;/span&gt;&lt;span class="title"&gt;Chart Type&lt;/span&gt;&lt;/a&gt;
        &lt;/li&gt;
        &lt;li&gt;&lt;a href="#tab2" data-toggle="tab"&gt;&lt;span class="step"&gt;2&lt;/span&gt;&lt;span class="title"&gt;Data Source&lt;/span&gt;&lt;/a&gt;
        &lt;/li&gt;
        &lt;li&gt;&lt;a href="#tab3" data-toggle="tab"&gt;&lt;span class="step"&gt;3&lt;/span&gt;&lt;span class="title"&gt;Data&lt;/span&gt;&lt;/a&gt;
        &lt;/li&gt;
        &lt;li&gt;&lt;a href="#tab4" data-toggle="tab"&gt;&lt;span class="step"&gt;4&lt;/span&gt;&lt;span class="title"&gt;Chart Options&lt;/span&gt;&lt;/a&gt;
        &lt;/li&gt;
      &lt;/ul&gt;
    &lt;/div&gt;
    &lt;div class="tab-content"&gt;
      &lt;div id="tab1" class="tab-pane active"&gt;
        &lt;div class="row"&gt;
          &lt;div class="col-sm-3"&gt;
            &lt;div class="box"&gt;
              &lt;div class="box-body chartOption nexT"&gt;&lt;a href="javascript:void(0);"&gt;&lt;img src="static/assets/img/business-bars-graphic.png" class="img-responsive"/&gt;&lt;/a&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="col-sm-3"&gt;
            &lt;div class="box"&gt;
              &lt;div class="box-body"&gt;&lt;a href="javascript:void(0);"&gt;&lt;img src="static/assets/img/business-chart.png" class="img-responsive"/&gt;&lt;/a&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="col-sm-3"&gt;
            &lt;div class="box"&gt;
              &lt;div class="box-body"&gt;&lt;a href="javascript:void(0);"&gt;&lt;img src="static/assets/img/business-financial-chart (1).png" class="img-responsive"/&gt;&lt;/a&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div id="tab2" class="tab-pane"&gt;&lt;br/&gt;&lt;br/&gt;
        &lt;p&gt;Tab 2&lt;/p&gt;
      &lt;/div&gt;
      &lt;div id="tab3" class="tab-pane"&gt;&lt;br/&gt;&lt;br/&gt;
        &lt;p&gt;Tab 3&lt;/p&gt;
      &lt;/div&gt;
      &lt;div id="tab4" class="tab-pane"&gt;&lt;br/&gt;&lt;br/&gt;
        &lt;p&gt;Tab 4&lt;/p&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="pager wizard"&gt;
      &lt;li class="previous first"&gt;&lt;a href="javascript:void(0);"&gt;First&lt;/a&gt;
      &lt;/li&gt;
      &lt;li class="previous"&gt;&lt;a href="javascript:void(0);"&gt;Previous&lt;/a&gt;
      &lt;/li&gt;
      &lt;li class="next last"&gt;&lt;a href="javascript:void(0);"&gt;Last&lt;/a&gt;
      &lt;/li&gt;
      &lt;li class="next"&gt;&lt;a href="javascript:void(0);"&gt;Next&lt;/a&gt;
      &lt;/li&gt;
    &lt;/div&gt;
  &lt;/form&gt;
  &lt;/div&gt;
  </code></pre>