3

Currently, I am facing an issue, when I try to disabling a button in a particular step ?

my code is like this

var intro = introJs();

intro.setOptions({
    steps: [
        {
            element: "#add_temp",
            intro: "Add your template"
        },            
        {
            element: "#addButton",
            intro: "Please click on add button ",
            position:'left',  
            hideNext: true            
      }
  ],    
})
Jithin Paul
  • 51
  • 1
  • 6

3 Answers3

1

I believe that is not possible. Why would you want to hide the next button anyway? You can, however, use hideNext to hide the next button on the last tip or use showButtons to hide all navigation buttons. Read Intro.js docs for available options.

Christian Kovanen
  • 164
  • 4
  • Okay i understand, but i want to know is their any possible way to disable Next or Previous button in some specific step.My objective is to take client to different tab in same page but no need to go back or move forward in some insistence. – Jithin Paul Jan 02 '20 at 08:44
0

The above method will not work if there is a run type of validation checking. For example, if that element is a check box or input field and until the user selects it or fill it up the next button will not be activated. In that scenario, we have to follow the below process.

.ts file

 this.introJS.onafterchange(() => {
  var original_onclick = $('.introjs-nextbutton').get(0).onclick;
  // == taxId field checking ===
  if (this.introJS._currentStep === 1) {
    if (this.addEntityForm.controls.taxId.value !== '') {
      $('.introjs-nextbutton').removeClass('introjs-disabled');
      $('.introjs-nextbutton').get(0).onclick = original_onclick;
    } else {
      $('.introjs-nextbutton').addClass('introjs-disabled');
      $('.introjs-nextbutton').get(0).onclick = null;
    }
  }
}


addTaxId(value: string): void {
 if (value !== '') {
  $('.introjs-nextbutton').removeClass('introjs-disabled');
  $('.introjs-nextbutton').get(0).onclick = original_onclick;
 } else {
  $('.introjs-nextbutton').addClass('introjs-disabled');
  $('.introjs-nextbutton').get(0).onclick = null;
 }
}

HTML:

 <input formControlName="taxId" type="text" class="form-border-bottom" #taxId (keyup)="addTaxId(taxId.value)">
Bluerain
  • 477
  • 5
  • 9
-1
const onBeforeChange = (x) => {
    if (x === 'on step you want to hide') var y = enter code heredocument.getElementsByClassName('introjs-nextbutton')[0];
    if (y) y.style.display = 'none';
}

where onBeforeChange is a predefined function in Steps in intro.js-react.

Devraj Singh
  • 1
  • 1