Solved

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

Posted on 2014-11-01
9
1,058 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 5
  • 2
  • 2
9 Comments
 
LVL 110

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 110

Expert Comment

by:Ray Paseur
ID: 40417578
0
Industry Leaders: 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 500 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

Secure Your Active Directory - April 20, 2017

Active Directory plays a critical role in your company’s IT infrastructure and keeping it secure in today’s hacker-infested world is a must.
Microsoft published 300+ pages of guidance, but who has the time, money, and resources to implement? Register now to find an easier way.

Question has a verified solution.

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

Introduction This article is intended for those who are new to PHP error handling (https://www.experts-exchange.com/articles/11769/And-by-the-way-I-am-New-to-PHP.html).  It addresses one of the most common problems that plague beginning PHP develop…
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 the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

749 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