Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

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

Posted on 2014-11-01
9
Medium Priority
?
1,307 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 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
Google Certified Professional - Cloud Architect

This course (1 of 3) is designed to help students who are interested in Google Cloud Platform (GCP) to become familiar with the platform, navigate the console and learn its capabilities. It will also prepare students for the Google Cloud Architect certification exam.

 

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

The top UI technologies you need to be aware of

An important part of the job as a front-end developer is to stay up to date and in contact with new tools, trends and workflows. That’s why you cannot miss this upcoming webinar to explore the latest trends in UI technologies!

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…
Since pre-biblical times, humans have sought ways to keep secrets, and share the secrets selectively.  This article explores the ways PHP can be used to hide and encrypt information.
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …

688 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