Solved

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

Posted on 2014-11-01
9
1,205 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
Are You Using the Best Web Development Editor?

The worlds of web hosting and web development are constantly evolving. Every year we see design trends change, coding standards adapt and new frameworks/CMS created. With such a quick pace of change it’s easy to get lost trying to keep up.

See if your editor made the list.

 

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

[Live Webinar] The Cloud Skills Gap

As Cloud technologies come of age, business leaders grapple with the impact it has on their team's skills and the gap associated with the use of a cloud platform.

Join experts from 451 Research and Concerto Cloud Services on July 27th where we will examine fact and fiction.

Question has a verified solution.

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

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.
Originally, this post was published on Monitis Blog, you can check it here . In business circles, we sometimes hear that today is the “age of the customer.” And so it is. Thanks to the enormous advances over the past few years in consumer techno…
This tutorial will teach you the core code needed to finalize the addition of a watermark to your image. The viewer will use a small PHP class to learn and create a watermark.
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…

626 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