Twitter Bootstrap Question posted in

Bootstrap Formwizard – Prevent to scroll to next step if each page form submitting ajax response gets error – Twitter bootstrap

I am using twitter bootstrap form wizard to submit data on each page with validation. Now i want to prevent, scroll to next step if ajax response gets error while submitting data. Below is my code,

'onNext': function(tab,navigation,index){
    //scrollTo('#wizard',-100);
    if(index == 1){
        var $valid = $('#register_form').valid();
        if(!$valid){
            $validator.focusInvalid();
            return false;
        }
        else
        {
            var options = $('form[name=register_form]').find('input, textarea, select').filter('.fw1').serialize();
            var data = options + '&step=1';
            $.ajax({
                type: 'POST',
                url: 'employeeEntryProcess.php',
                data: data,
                success: function(data){
                    this.show(2);
                },
                error: function(){
                    return false;
                }
            });
        }
    }
},

Thanks,

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    Its working after changes. Thanks to all for helping.

      'onNext': function(tab,navigation,index){
        if(index == 1){
          var $valid = $('#register_form').valid();
          if(!$valid){
            $validator.focusInvalid();
            return false;
          }
          else
          {
            var options = $('form[name=register_form]').find('input, textarea, select').filter('.fw1').serialize();
            var data = options + '&step=1';
            $.ajax({
              type: 'POST',
              url: 'employeeEntryProcess.php',
              data: data,
              success: function(response){
                 $('#wizard').bootstrapWizard('show',1);
              },
              error: function(){
                 alert('Error');
             }
          });
       }
   }
   return false;
},

  2. 0

    The only way to do this is to always return false so that it doesn’t scroll to next step automatically, and then manually scrolling to the next step in the success function of the AJAX request (so that it would only proceed if it was successful). You may want to put an animation for the duration of the AJAX request as otherwise it would look like nothing is happening.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search