I have two buttons in my Twitter Bootstrap wizard :-
<div class="form-actions">
<div class="row">
<div class="col-sm-12">
<ul class="pager wizard no-margin">
<!--<li class="previous first disabled">
<a href="javascript:void(0);" class="btn btn-lg btn-default"> First </a>
</li>-->
<li class="previous disabled">
<a id="prev" href="javascript:void(0);" class="btn btn-lg btn-default"> Previous </a>
</li>
<!--<li class="next last">
<a href="javascript:void(0);" class="btn btn-lg btn-primary"> Last </a>
</li>-->
<li class="next" id="skip">
<a id="skip" href="javascript:void(0);" class="btn btn-lg txt-color-darken"> Skip </a>
</li>
<li class="next" id="next">
<a id="next" href="javascript:void(0);" class="btn btn-lg txt-color-darken"> Next </a>
</li>
<li class="next finish" style="display:none;"><a href="javascript:;">Finish</a></li>
<input type='button' class='btn button-last btn-default' style="display:none;" name='last' value='Skip GG setup' />
</ul>
</div>
</div>
</div>
So, the Bootstrap wizard has a function called onNext
. Now in this function I am trying to find out which button the user clicked on to trigger this event. I tried something as shown in the code below but it doesn't really work.
$('#bootstrap-wizard-1').bootstrapWizard({
'tabClass': 'form-wizard',
'onNext': function (tab, navigation, index) {
$("li.next").click(function() {
var id = "";
id = this.id; // or alert($(this).attr('id'));
alert(id);
});
});
});
Your need to remove the click handler function. You can get the index of the clicked tab. Your HTML is not accurate or not complete. Check the documentation.
Check this jsfiddle example.
UPDATE: This way you get the ID. Jsfiddle
$('#bootstrap-wizard-1').bootstrapWizard({
'tabClass': 'form-wizard',
'onNext': function (tab, navigation, index) {
//
}
});
$("li.next").click(function(event) {
console.log(event.target.id); // get the id
});