Go Premium for a chance to win a PS4. Enter to Win

x
?
Solved

php - bootstrap wizard last 'next' button is always disabled.

Posted on 2014-11-01
9
Medium Priority
?
1,370 Views
Last Modified: 2014-12-15
Hi

I am trying to use the boostrap wizard but on the last next button is always disabled and says 'last' rather than 'submit' and is disabled

Here is the jquery

  jQuery('#validationWizard').bootstrapWizard({
    tabClass: 'nav nav-pills nav-justified nav-disabled-click',
    onTabClick: function(tab, navigation, index) {
      return false;
    },
    onNext: function(tab, navigation, index) {
      var $valid = jQuery('#firstForm').valid();
      if(!$valid) {
        
        $validator.focusInvalid();
        return false;
      }
      
    }
  });	  
  
  
});
</script>

Open in new window


How do i get the last 'next' from being disabled please and to submit the form if it is valid?

thanks
0
Comment
Question by:andieje
  • 5
  • 2
  • 2
9 Comments
 
LVL 111

Expert Comment

by:Ray Paseur
ID: 40417508
Is there anything else you might be able to share with us?  Maybe the HTML and CSS?  Thanks.
0
 

Author Comment

by:andieje
ID: 40417528
Yes but ive noticed people avoid answering questions if there is code to read!!
0
 
LVL 111

Expert Comment

by:Ray Paseur
ID: 40417578
0
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 

Author Comment

by:andieje
ID: 40424432
You can see it on this demo

http://themeforest.net/item/bracket-responsive-bootstrap-3-admin-template/full_screen_preview/6894362

Here is the wizard form. Ive already posted its jquery

              <!-- BASIC WIZARD -->
              <div id="basicWizard" class="basic-wizard">
                
                <ul class="nav nav-pills nav-justified">
                  <li><a href="#tab1" data-toggle="tab"><span>Step 1:</span> Basic Info</a></li>
                  <li><a href="#tab2" data-toggle="tab"><span>Step 2:</span> Product Info</a></li>
                  <li><a href="#tab3" data-toggle="tab"><span>Step 3:</span> Payment</a></li>
                </ul>
                
                <div class="tab-content">
                  <div class="tab-pane" id="tab1">
                    <form class="form">
                      <div class="form-group">
                        <label class="col-sm-4">Firstname</label>
                        <div class="col-sm-8">
                          <input type="text" name="firstname" class="form-control" />
                        </div>
                      </div>
                      
                      <div class="form-group">
                        <label class="col-sm-4">Lastname</label>
                        <div class="col-sm-8">
                          <input type="text" name="lastname" class="form-control" />
                        </div>
                      </div>
                      
                      <div class="form-group">
                        <label class="col-sm-4">Gender</label>
                        <div class="col-sm-8">
                          <div class="rdio rdio-primary">
                            <input type="radio" checked="checked" id="male" value="m" name="radio">
                            <label for="male">Male</label>
                          </div>
                          <div class="rdio rdio-primary">
                            <input type="radio" value="f" id="female" name="radio">
                            <label for="female">Female</label>
                          </div>
                        </div>
                      </div>
                      
                    </form>
                  </div>
                  <div class="tab-pane" id="tab2">
                    <form class="form">
                      <div class="form-group">
                        <label class="col-sm-4">Product ID</label>
                        <div class="col-sm-5">
                          <input type="text" name="product_id" class="form-control" />
                        </div>
                      </div>
                      
                      <div class="form-group">
                        <label class="col-sm-4">Product Name</label>
                        <div class="col-sm-8">
                          <input type="text" name="product_name" class="form-control" />
                        </div>
                      </div>
                      
                      <div class="form-group">
                        <label class="col-sm-4">Category</label>
                        <div class="col-sm-4">
                          <select class="select2" data-placeholder="Choose One">
                            <option value=""></option>
                            <option value="">3D Animation</option>
                            <option value="">Web Design</option>
                            <option value="">Software Engineering</option>
                          </select>
                        </div>
                      </div>
                      
                    </form>
                  </div>
                  <div class="tab-pane" id="tab3">
                    <form class="form">
                      <div class="form-group">
                        <label class="col-sm-4">Card No</label>
                        <div class="col-sm-8">
                          <input type="text" name="cardno" class="form-control" />
                        </div>
                      </div>
                      
                      <div class="form-group">
                        <label class="col-sm-4">Expiration</label>
                        <div class="col-sm-4">
                          <select class="select2">
                            <option value="">Month</option>
                            <option value="">January</option>
                            <option value="">February</option>
                            <option value="">March</option>
                            <option value="">...</option>
                          </select>
                        </div>
                        
                        <div class="col-sm-4">
                          <select class="select2">
                            <option value="">Year</option>
                            <option value="">2013</option>
                            <option value="">2014</option>
                            <option value="">2015</option>
                            <option value="">...</option>
                          </select>
                        </div>
                        
                      </div>
                      
                      <div class="form-group">
                        <label class="col-sm-4">CSV</label>
                        <div class="col-sm-4">
                          <input type="text" name="csv" class="form-control" />
                        </div>
                      </div>
                      
                    </form>
                  </div>
                  
                  
                </div><!-- tab-content -->
                
                <ul class="pager wizard">
                    <li class="previous"><a href="javascript:void(0)">Previous</a></li>
                    <li class="next"><a href="javascript:void(0)">Next</a></li>
                  </ul>
                
              </div><!-- #basicWizard -->

Open in new window

0
 

Author Comment

by:andieje
ID: 40424436
This is my fix but Im not convinced its right

jQuery('#validationWizard').bootstrapWizard({
    tabClass: 'nav nav-pills nav-justified nav-disabled-click',
    onTabClick: function(tab, navigation, index) {
      return false;
    },
    onNext: function(tab, navigation, index) {
      var $valid = jQuery('#firstForm').valid();
      if(!$valid) {
        
        $validator.focusInvalid();
        return false;
      }	  
    },
	onTabShow: function(tab, navigation, index) {
		var $total = navigation.find('li').length;
		var $current = index+1;
		var $percent = ($current/$total) * 100;
		 jQuery('#validationWizard').find('.progress-bar').css('width', $percent+'%');
		if($current >= $total) {
			$('#validationWizard').find('.pager .next').hide();
			$('#validationWizard').find('.pager .finish').show();
			$('#validationWizard').find('.pager .finish').removeClass('disabled');
		} else {
			$('#validationWizard').find('.pager .next').show();
			$('#validationWizard').find('.pager .finish').hide();
		}
	}
  });	  
	$('#validationWizard .finish').click(function() {	
		var $valid = jQuery('#firstForm').valid();
		if(!$valid) {
			$validator.focusInvalid();
			return false;
		}
		alert('Finished!, Starting over!');
		$('#validationWizard').find("a[href*='tab1']").trigger('click');
	});
  
});

Open in new window

0
 
LVL 43

Expert Comment

by:Rob
ID: 40485755
Please check the debug console as you have an error that could be halting everything in its tracks:

Uncaught TypeError: undefined is not a functiondashboard.js:163 (anonymous function)

This points to the following code, where "chosen" isn't a function it recognizes:

// Chosen Select
    jQuery("select").chosen({
      'min-width': '100px',
      'white-space': 'nowrap',
      disable_search_threshold: 10
    });

Open in new window

0
 

Author Comment

by:andieje
ID: 40489609
without being too cheeky but do you have any idea how i solve that?

If chosen isnt a function, what do i do?

Do i delete the code you highlighted or do i 'fix' the error by looking at paths for the file it cant find or, well im not sure or what

Im not much use at fixing jquery.

Many thanks
0
 
LVL 43

Accepted Solution

by:
Rob earned 2000 total points
ID: 40490369
"chosen" is just a plugin: http://harvesthq.github.io/chosen/

You would need to include it if you want it to work.
0
 

Author Closing Comment

by:andieje
ID: 40501589
sorry i didnt relaise chosen was alterative. thanks
0

Featured Post

Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Build an array called $myWeek which will hold the array elements Today, Yesterday and then builds up the rest of the week by the name of the day going back 1 week.   (CODE) (CODE) Then you just need to pass your date to the function. If i…
Many old projects have bad code, but the budget doesn't exist to rewrite the codebase. You can update this code to be safer by introducing contemporary input validation, sanitation, and safer database queries.
The viewer will learn how to count occurrences of each item in an array.
The viewer will learn how to create and use a small PHP class to apply a watermark to an image. This video shows the viewer the setup for the PHP watermark as well as important coding language. Continue to Part 2 to learn the core code used in creat…
Suggested Courses

971 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question