September 10, 2013
Get the next/previous ID on button click
Reynier’s Question:
I have this HTML:
<form action="" id="product_create" method="post">
<ul>
<li id="tab1" data-display="categories-picker"><a href="#">Seleccionar categoría</a></li>
<li id="tab2" data-display="product-create-step-2"><a href="#">Datos</a></li>
<li id="tab3" data-display="product-create-step-3" style="display: none"><a href="#">Variaciones</a></li>
<li id="tab4" data-display="product-create-step-4"><a href="#">Detalles del Producto</a></li>
<li id="tab5" data-display="product-create-step-5"><a href="#">Condiciones de Venta</a></li>
</ul>
<fieldset id="categories-picker">
....
</fieldset>
<fieldset id="product-create-step-2" style="display: none">
....
</fieldset>
<fieldset id="product-create-step-3" style="display: none">
....
</fieldset>
<fieldset id="product-create-step-4" style="display: none">
....
</fieldset>
<fieldset id="product-create-step-5" style="display: none">
....
</fieldset>
<button type="button" name="finish-wizard" id="finish-wizard" style="display:none">Finish</button>
</form>
<button type="button" name="previous" id="previous-step" disabled="disabled">« Previous</button>
<button type="button" name="next" id="next-step">Next »</button>
In order to toggle or hide previous/show next I need to get the ID of the previous/next fieldset element when I click on $(input[name="next"]) or $(input[name="previous"]) but I made this code:
var first = $('fieldset').eq(0).attr('id');
var step = 1;
$('#next-step').click(function() {
if (step >= 1) {
$("#previous-step").removeAttr("disabled");
}
var current = $('fieldset').eq(step).next('fieldset');
var previous = $('fieldset').eq(step).prev('fieldset');
current.show();
previous.hide();
step++;
});
$('#previous-step').click(function() {
var current = $('fieldset').eq(step).next('fieldset');
var previous = $('fieldset').eq(step).prev('fieldset');
current.hide();
previous.show();
step--;
});
But it’s not working fine, can any give me a help?
This is probably simpler, duplicate the functionality with .prev() instead of .next() to get the code for the prev button.
$('fieldset.step').hide().eq(0).show();
$('#next-step').click(function() {
var current = $('fieldset.step:visible'),
next = current.next('fieldset.step');
if (next.length === 0) {
next = current.nextUntil('fieldset.step').next('fieldset.step');
}
current.hide();
next.show();
if (next.nextUntil('fieldset.step').next('fieldset.step').add(next.next('fieldset.step')).length === 0) {
$("#next-step").prop("disabled",true);
}
$("#previous-step").prop("disabled",false);
});
$('#previous-step').click(function() {
var current = $('fieldset.step:visible'),
prev = current.prev('fieldset.step');
if (prev.length === 0) {
prev = current.prevUntil('fieldset.step').prev('fieldset.step');
}
current.hide();
prev.show();
if (prev.prevUntil('fieldset.step').prev('fieldset.step').add(prev.prev('fieldset.step')).length === 0) {
$("#previous-step").prop("disabled",true);
}
$("#next-step").prop("disabled",false);
});
don’t forget to give the fieldsets that need to be cycled through a .step class. The id’s are no longer needed.
Since you are tracking the elements with their indexes, you can simply select the next and previous element using simple technique like
var previous = $('fieldset').eq(step-1); // To select previous
var next = $('fieldset').eq(step+1); // To select next
But I think you are trying to create this effect: http://jsfiddle.net/c48bs/
