i'm having an issue with the jQuery Steps plugin. The next button has to be disabled until a specific action is taken, and it should be enabled if the data is properly validated.
So the question is: how can I set the next button to be disabled by default, and, are there available methods to enable or disable the next button programmatically?
This is my current code:
HTML:
<div id="steps">
<h3>Write question</h3>
<section>
<input type="text" id="question" placeholder="Question goes here">
<button id="save">Save and do something else</button>
</section>
<h3>Preview</h3>
<section>
<p id="preview"></p>
</section>
<h3>Done</h3>
<section>
<p>Congratulations text goes here</p>
</section>
</div>
jQuery:
//start
$(function(){
$('#steps').steps({
headerTag: "h3",
bodyTag: "section",
transitionEffect: "slideLeft",
stepsOrientation: "vertical"
});
$('#save').click(function(){
$('#preview').html($('#question').val());
//do something else (ajax wise, etc)
if(true) {
//enable NEXT button here...
}
});
});
Well, it wasn't very straightforward, but I think I made it.
The idea is to force no behavior in case your input field doesn't have content, and automatically add the disabled
style to the button.
Hope it helps. It's not very clean, but I believe it works.
Check it out here: JSBin
EDIT: Please note that this plugin doesn't have methods for preventing the behavior already defined, but that might change in the future. At this moment you can only intercept it this way, I think.
EDIT2: Also note that because the plugin doesn't have a method to re-render the action buttons, we can't call my enableButton()
function to re-enable the button after content is added to the input field.
EDIT3: Thought of checking the state via input
's change
event to overcome last difficulties. Works like a charm: FINAL VERSION