Solved

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

Posted on 2014-11-01
9
1,122 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
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 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 WordPress Site: 5 Essential Approaches

WordPress is the web's most popular CMS, but its dominance also makes it a target for attackers. Our eBook will show you how to:

Prevent costly exploits of core and plugin vulnerabilities
Repel automated attacks
Lock down your dashboard, secure your code, and protect your users

Question has a verified solution.

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

Introduction Chart.js, used properly, can visually add a difference to your charting applications. It engages your visitors and allows them to interact with data they otherwise wouldn't be able to without expensive and complicated systems. For this…
Password hashing is better than message digests or encryption, and you should be using it instead of message digests or encryption.  Find out why and how in this article, which supplements the original article on PHP Client Registration, Login, Logo…
The viewer will learn how to look for a specific file type in a local or remote server directory using PHP.
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…

734 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