Using Previous and Next Buttons in Bootstrap Tabs for Form Navigation

I am currently facing a challenge in splitting a form into multiple tabs and encountering issues with the next and previous buttons on the second and third tabs.

My goal is for the tabs at the top to change state as you cycle through them by clicking the buttons.

I have set up a code pen and would appreciate any help from those who may know what I am doing wrong.

Check out the code pen here

$('.btnNext').click(function() {
  $('.nav-pills > .active').next('li').find('a').trigger('click');
});

$('.btnPrevious').click(function() {
  $('.nav-pills > .active').prev('li').find('a').trigger('click');
});
javascripthtmlcssbootstrap-4

Answer №1

The active class is applied to the a.nav-link element, so it is important to check for the active state of that element:

$('.btnNext').click(function(){
  $('.nav-item > a.nav-link.active').parent().next('li').find('a').trigger('click');
});

$('.btnPrevious').click(function(){
  $('.nav-item > a.nav-link.active').parent().prev('li').find('a').trigger('click');
});

Answer №2

The link labeled as "active" is not directly connected to the element with the class "nav-pills", therefore the child (>) selector should be removed:

$('.btnNext').click(function() {
    $('.nav-pills .active').parent().next('li').find('a').trigger('click');
})

$('.btnPrevious').click(function() {
    $('.nav-pills .active').parent().prev('li').find('a').trigger('click');
})

Check out the demo here

Learn more about Bootstrap 4 Tabs with Previous & Next buttons

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Ways to access PromiseValue in XMLHttpRequest with JSON

Is there a way to access an array that is within the PromiseValue instead of receiving Promise {<pending>} When I use .then(data => console.log(data)), I can see the array in the console log. However, my requirement is to display this array on an ...

javascriptjsonpromisexmlhttprequest

Sort activities according to the preferences of the user

This is the concept behind my current design. Click here to view the design When making a GET request, I retrieve data from a MongoDB database and display it on the view. Now, I aim to implement a filter functionality based on user input through a form. ...

javascriptjsonnode.jsexpressejs

Encountering an undefined property error while using Array.filter in Angular 2

hello everyone, I am currently faced with an issue while working on a project that involves filtering JSON data. When using the developer tools in Chrome, it keeps showing me an error related to undefined property. chart: JsonChart[] = []; charts: JsonC ...

javascriptangularjstypescriptangularjs-filter

Combining strings with objects in Javascript: A step-by-step guide

In the code snippet provided, I am combining variables to create a path to another existing object and its attribute. The issue is that I always receive a string, but I would like to somehow convert it into an object. // SET CUSTOM CONTENT FOR COLUMN IF ...

javascriptarraysjsonstring

Nuxtjs is incorporating the Vue-pano component for enhanced functionality

When using vue-pano with Nuxtjs, I encountered the error message: "window is undefined". If I import it like this: <script> import Pano from 'vue-pano' export default { components: { Pano } } </script> I then tried using a ...

javascriptvue.jsnuxt.js

React JS for loop not displaying any output

I am trying to create a component that loops from 0 to the value entered as a prop. if (props.number !== "" && props.toPow !== "") { for (let i = 0; i < props.toPow; i++) { return ( <div> & ...

javascriptreactjsjsx

Do global variables in a node.js server apply across the entire server or exclusively to individual sessions or users?

I have a question that may seem basic, so I apologize in advance - are global variables in node.js applicable server-wide or is their scope limited to the session or user? For example, if I create a global boolean variable in a routes.js file to track whet ...

javascriptnode.jsexpress

Creating an interface that accurately infers the correct type based on the context

I have an example below of what I aim to achieve. My goal is to start with an empty list of DbTransactInput and then add objects to the array. I experimented with mapped types to ensure that the "Items" in the "Put" property infer the correct data type, w ...

javascriptnode.jstypescriptgenericsbackend

Exploring AngularJS and Jasmine: Testing a controller function that interacts with a service via $http

I encountered an issue while testing a controller that relies on a service. The problem arises because the service is currently set to null in order to focus solely on testing the controller. The current test setup is failing due to the BoardService being ...

javascriptangularjsunit-testingtestingjasmine

Looking to bring in a non-ES6 library into VueJS without using export statements

Currently, I am faced with an interesting challenge. For a forthcoming VueJS project, we must utilize a library that is quite outdated but there is simply not enough time to redevelop it. The library is essentially a JavaScript file which consists of num ...

javascriptimportvue.jsvuejs2

The Echart bar graph is not displaying when trying to use JSON data

Seeking assistance as a beginner in building Basic Bar inverted axes using json data. I am trying to achieve a chart similar to Bar Inverted Axes, but encountering issues with the chart not displaying properly. Utilizing Angular to develop the web applicat ...

javascriptangularjsjsonbar-chartecharts

Tips for preventing useEffect from triggering a route?

Recently delving into reactjs, I stumbled upon a situation in the code where the route alerts messages twice. I'm seeking advice on how to prevent this issue, please disregard the redux code involved. Any suggestions? Index.js import React from &apos ...

javascriptreactjs

What sets apart a string constant from a string enclosed in quotation marks? And what techniques exist to transform one into the other?

Calling an asynchronous function: const variable = 'something' await MyAsyncFunction.execute(variable) No output is displayed. But if I change it to: await MyAsyncFunction.execute('something') It works!! Can someone please explain h ...

javascriptnode.jsstring

Encountered issue with Ajax post request without any additional details provided

I could really use some assistance with this issue. It's strange, as Chrome doesn't seem to have the same problem - only Firefox does. Whenever I submit the form, Ajax creates tasks without any issues. My MySQL queries are running smoothly and I& ...

javascriptjqueryajax

A guide on retrieving styled text from a database and displaying it in TinyMCE

I am encountering an issue where I need to retrieve formatted text from a database and display it in my TinyMCE editor. The content stored in the database looks like this: <p style="text-align: justify;"><strong>Zdrav&iacute;m</strong ...

javascripttinymce

Is there a way to pass a v-modal as an array when setting Axios params?

I am currently dealing with a Vue Multiselect setup where the v-model is an array to accommodate multiple selected options. The challenge I am facing involves calling a route within the loadExtraOptions method and passing the array of IDs as a parameter ...

javascriptvue.jsaxiosvue-multiselect

Guide on dynamically importing a module in Next.js from the current file

I am facing a challenge where I have multiple modules of styled components in a file that I need to import dynamically into another file. I recently discovered the method for importing a module, which requires the following code: const Heading = dynamic( ...

javascriptreactjsnext.js

Leveraging Underscore in ReactJS applications

I'm encountering an issue with integrating Underscore into my ReactJS project. When I attempt to run my ReactJS class, the following error arises: Uncaught ReferenceError: _ is not defined index.html <html> <head> <meta http-equi ...

javascriptjqueryreactjs

Restrict Bootstrap Column Width to Container Boundary

I am struggling to create a two-row hierarchy display for a set of photos using bootstrap 5. Despite my efforts, the images overflow out of the container instead of staying within it. My goal is to make the container fill the screen and act as a cover disp ...

htmlcssbootstrap-5

Direct back to the current page post deleting entry from mongodb

After removing data from MongoDB, how can I redirect to the same view (handlebar)? I tried using res.render, but it shows that the website cannot be reached. Thank you for your assistance. Controller Logic var express = require('express'); va ...

javascriptnode.jsmongodbmongoosehandlebars.js