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

Is it possible to utilize Angular's structural directives within the innerHtml?

Can I insert HTML code with *ngIf and *ngFor directives using the innerHtml property of a DOM element? I'm confused about how Angular handles rendering, so I'm not sure how to accomplish this. I attempted to use Renderer2, but it didn't wor ...

htmlangulartypescriptinnerhtmlangular-structural-directive

Creating PDF files with a generic handler (ASHX)

Recently, I was tasked with generating PDFs on the fly using data stored in a database for my application which utilizes HTML, jQuery and WCF. I ran into some roadblocks when trying to achieve this using client-side technologies like jQuery or plugins. Al ...

c#jqueryasp.netwcf

What is the method for executing a function enclosed within a variable?

As someone new to the world of Java, I have encountered a puzzling issue with some code related to a game. Specifically, there seems to be an obstacle when it comes to utilizing the navigator function. When I click on this function in the game, some sort o ...

javascriptajaxdebuggingfirebug

Inter-component communication within nested structures in Angular 2

Working on an Angular2 project that involves multiple nested components, I have successfully sent data from a child component to its immediate parent. However, when dealing with three levels of nesting, the question arises: How can I send or modify data ac ...

javascriptangulartypescriptcomponents

Invoking the HTML method from a WCF service

Currently, I am utilizing a callback in my WCF service to receive raw frames from the camera. I am currently working on developing an HTML application that will showcase these frames. However, my current approach involves using a button click event in HTM ...

javascriptjqueryajaxhtmlwcf

Delay in only a portion of the AJAX response

I created a chat application that is functioning correctly, but I am encountering an unexpected behavior. When a user sends a message, the user's name, time, and message should be displayed in order. However, currently, it seems like the username and ...

javascriptphpmysqlajax

Chrome and Internet Explorer are not prompting to save passwords after the input type has been altered by a script

I've encountered an issue with a form that includes: <input type="password" id="password" /> I want to display some readable text temporarily, so I used the following code: $('#password').prop('type', 'text'); ...

javascriptjquerygoogle-chromeinternet-explorerpasswords

Tips for capturing a jQuery trigger in traditional JavaScript

I am trying to trigger an event using jQuery and I want to bind to it in a non-jQuery script. It appears that while I can bind to the event in jQuery using on, I am unable to do so with addEventListener. Check out this jsFiddle for a demonstration: http: ...

javascriptjqueryaddeventlistener

Hover events in the browser are currently operating at a sluggish pace

When I hover over a photo, an overlay is supposed to appear. However, if I move the mouse quickly (from the top to the bottom of the page, for example), the overlay remains visible even after I stop hovering over the photo. I have tried different event ha ...

cssreactjshover

Is it necessary to wait for CSS to fully load on a static site built with Next.js?

I am currently working on a Next.js static site. The JavaScript loads quickly, but there seems to be a delay in applying the styled-components CSS as seen in the screenshot. The CSS only kicks in after the page has fully loaded. Does anyone have any sugge ...

cssnext.jsstyled-components

"Encountered an HTTP 400 error when trying to retrieve content from a Persian URL using file

As a beginner, I am facing an issue with a URL that contains Persian language characters. For instance: http://tabnak.ir/fa/news/577155/ویدیوی-درگیری-نیروهای-سیا-و-پنتاگون-در-سوریه-با-همدیگر-ویدیوهایی ...

phphtmlcurlfile-get-contents

Press on a circle to adjust its size to fit the section or division

Is it possible to make a circle expand and fill the section/div when clicked? I want the circle to fill the screen upon clicking, and then have some text appear in its place. Before posting this, I searched on the web and came across this jsfiddle link. ...

javascripthtmlcss

JavaScript matching partial domains

let address = 'http://sub.domain2.net/contact/'; if (['https://sub.domain1.com/', 'http://sub.domain2.net/'].includes(address)) { console.log('match'); } else { console.log('no match'); } Here, it ...

javascript

Hiding Div with JavaScript (Quick and Easy)

Hey there, I'm looking to make regStart and regPage alternate visibility based on a click event. I'm still getting the hang of JavaScript so any simple answers would be appreciated. <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/x ...

javascripthtml

How can I send a variable into the DOM using AJAX?

Apologies for posting a question earlier about creating a condition for checkbox without proper investigation. It appears that I need to pass my variables here. function setsession(sessionid, action, data) { $("#totalselection").show(); $. ...

javascriptphpjqueryajax

Tips for merging ajax div elements

Here's a combination of my Ajax scripts, integrating the first and second versions: 1st <script> function Ajax() { var xmlhttp; if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp ...

javascriptjqueryajax

Utilize Google Maps geocoding functionality to pinpoint a location and then

I've encountered this strange phenomenon, but first let's take a look at the code: HTML <div ng-app='maptesting'> <div ng-controller="MapCtrl"> <div id="map_canvas" ui-map="myMap" style ...

javascriptangularjsgoogle-mapsgoogle-maps-api-3angular-ui

Gain entry to my placement in order to calculate an overall score for my profile

I'm looking to calculate the average ranking given by users. Currently, I have a review model that belongs to post/push/user models. This model uses two variables in the ranking table: user_id and rating. My pages are error-free, but even though ratin ...

jquerymysqlruby-on-railsruby

Interacting with a button using Python Selenium while validating onFocus with JavaScript

I'm currently working on automating webpage navigation with Selenium in Python. My goal is to click on an HTML button that triggers JavaScript code to validate if the button is focused during the onclick action. Although I can successfully select a v ...

javascriptpythonselenium

I am unable to execute Parcel in my project as it is not generating a distribution folder with the compiled file

I'm in need of some assistance in identifying and resolving an error that I'm having trouble understanding. To start, I initialized the project with the command: npm init -y Next, I installed Parcel using: npm install --save-dev parcel I then ...

javascriptnpmnpm-scriptsparceljsparcel