creating a multi-page form using HTML and JavaScript

I need help creating a multi-page form with a unique tab display. The first page should not have a tab-pill, while the following pages should display tabs without including the first page tab.

Users can navigate to the first page using only the previous button on the second page.

I am currently utilizing Material Bootstrap Wizard for this project.

https://i.stack.imgur.com/kzIld.jpg https://i.stack.imgur.com/uhJNO.jpg

Check out my Codepen link

$('.wizard-card').bootstrapWizard({
...
// Class dn: display:none
onTabShow:
....
if($current == 1){
                console.log('first tab'); console.log(navigation.parent().addClass('dn'));
                console.log(tab);
            }else{
                navigation.parent().removeClass('dn')
            }
...
//This is the JS code I developed to hide the navigation bar in the first page

javascripthtmljquerycsstwitter-bootstrap

Answer №1

By utilizing CSS and the onInit, onNext, and onPrevious functions, you can achieve your desired outcome:

To prevent the first tab from being clicked, set pointer events to none like this:

.wizard-navigation ul li:first-child {
   pointer-events:none;
   visibility:hidden
}

Next, hide the tabs when the wizard is initialized:

onInit : function(tab, navigation, index){
      $(".wizard-navigation").hide(); // hiding tab wizard
      //... rest of code 
},

Then, show the navigation tabs on moving to the next step:

onNext : function(tab, navigation, index){
      $(".wizard-navigation").show(); // showing tab wizard
      //... rest of code 
},

Finally, if going back to a previous tab and it's the first one, hide it again:

onPrevious : function(tab, navigation, index){
     if(index === 0) $(".wizard-navigation").hide(); // hiding tab wizard
      //... rest of code 
},

Check out an example on CodePen.

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

Filter error - Unable to retrieve property 'toLowerCase' from null value

When filtering the input against the cached query result, I convert both the user input value and database values to lowercase for comparison. result = this.cachedResults.filter(f => f.prj.toLowerCase().indexOf((this.sV).toLowerCase()) !== -1); This ...

javascriptangulartypescriptangular7

Encountered an issue with formControlName being undefined during the render process in Angular 2

I encountered an issue while implementing Reactive form validation following the official Angular documentation. The error message "username not defined" is causing trouble in my project. Here's the detailed error: Error: Uncaught (in promise): Error: ...

javascriptangular

JavaScript JCrop feature that allows users to resize images without cropping

I'm currently attempting to utilize JCrop for image cropping, but I'm running into frustratingly incorrect results without understanding why. The process involves an image uploader where selecting an image triggers a JavaScript function that upda ...

javascriptjquerywebjcrop

Ways to obtain an attribute through random selection

Figuring out how to retrieve the type attribute from the first input element: document.getElementById('button').addEventListener('click', function() { var type = document.querySelectorAll('input')[0].type; document.getE ...

javascripthtmlattributes

When attempting to send an array value in JavaScript, it may mistakenly display as "[object Object]"

I queried the database to count the number of results and saved it as 'TotalItems'. mysql_crawl.query('SELECT COUNT(*) FROM `catalogsearch_fulltext` WHERE MATCH(data_index) AGAINST("'+n+'")', function(error, count) { var ...

javascriptangularjsarraysnode.jsexpress

Creating an HTML form that spans across multiple pages: Tips and tricks

When creating a shopping form that includes items like mugs and tshirts, is it permissible according to website standards to design a form that spans multiple pages? One option could be to add radio buttons for choosing a color directly on the main form ...

htmlforms

Transform a numerical variable into a string data type

I am faced with a situation where I have a variable named val which is currently set to the number 5. Now, my goal is to update the value of val so that it becomes a string containing the character "5". Could someone guide me on how to achieve this? ...

javascriptnode.js

Unable to successfully import Node, JS, or Electron library into Angular Typescript module despite numerous attempts

I'm still getting the hang of using stack overflow, so please forgive me if my question isn't formulated correctly. I've been doing a lot of research on both stack overflow and Google, but I can't seem to figure out how to import Electr ...

javascriptnode.jsangulartypescriptelectron

Tips for updating React context provider state when a button is clicked

WebContext.js import React, { createContext, Component } from 'react'; export const WebContext = createContext(); class WebContextProvider extends Component { state = { inputAmount: 1, }; render() { return <WebC ...

javascriptreactjsmaterial-uijsx

Is it possible to access the operating system's native emoji picker directly from a website?

While there are numerous javascript plugins and libraries available for allowing users to select emojis for text inputs, both Windows and Mac operating systems already have their own native emoji pickers accessible via ⊞ Win. or CTRL⌘Space. Is there a ...

javascripthtml

Issue with preventDefault not functioning correctly within a Bootstrap popover when trying to submit a

I am facing an issue with a bootstrap popover element containing a form. Even though I use preventDefault() when the form is submitted, it does not actually prevent the submit action. Interestingly, when I replace the popover with a modal, the functional ...

javascriptjqueryhtmlformstwitter-bootstrap

Here is a helpful guide on updating dropdown values in real time by retrieving data from an SQL database

This feature allows users to select a package category from a dropdown menu. For example, selecting "Unifi" will display only Unifi packages, while selecting "Streamyx" will show only Streamyx packages. However, if I first select Unifi and then change to S ...

javascriptphphtml

Can floating elements be disregarded by block elements?

According to W3C, the behavior of floating elements is such that: When a float is present, non-positioned block boxes that come before and after the float flow vertically as if the float doesn't exist. However, line boxes positioned next to the fl ...

htmlcsscss-float

Changes to the parent state will not be reflected in the child props

When the child component PlaylistSpotify updates the state localPlaylist of its parent, I encounter an issue where the props in PlaylistSpotify do not update with the new results. I've been struggling to figure out what I'm missing or doing wrong ...

javascriptreactjscomponentsreact-propsreact-state

Using enzyme mock function prior to componentDidMount

When it comes to mocking a function of a component using Jest, Enzyme, and React, the process typically involves creating a shallow wrapper of the component and then overloading the function as needed. However, there seems to be an issue where the componen ...

javascriptreactjsjestjsjsxenzyme

When utilizing ajax in an MVC framework, an error was encountered due to the conversion of a datetime2 data type to a datetime data type resulting in an out-of

When trying to send data from ajax to the controller, I am encountering a title error. Oddly enough, when checking the datetime, it appears to be correct and displaying the current time accurately. Despite this, the same error persists. I have noticed tha ...

c#jqueryajaxasp.net-mvcdatetime

Two select boxes trigger multiple sorting operations

Struggling to implement 2 different sorting operations on two separate columns in a datagrid, using 2 different select boxes has proven to be challenging. I attempted the code below, but as a beginner, I was unable to solve it... In HTML: <select ng ...

javascriptangularjs

The page you are looking for cannot be located using Jquery AJAX JSON PHP POST -

Whenever I attempt to POST some JSON data to a local host, I consistently encounter a 404 Not Found error. Strangely enough, the php file is positioned precisely where it should be according to the script instructions. If anyone has dealt with this issue b ...

javascriptphpjqueryajaxjson

What is the proper way to include 'rowspan' specific CSS within an HTML table?

I have an HTML table with rowspans in it: table tr, td { border: 1px solid black; } tr:nth-child(1) { background-color: red; } tr:nth-child(2) { background-color: blue; } <table> <tr> <td rowspan=2>Section 1</td> ...

javascripthtmlcss

Guide to concealing List elements from the Search Filter when the search input field is emptied

I am facing a challenge with an HTML list of items. Here is the structure: <ul id="fruits"> <li><a href="#">Mango</a></li> <li><a href="#">Apple</a></li> <li><a href="#">Grape</a>& ...

javascriptjqueryhtml