I have created a form that goes across three different tabs named ‘contact-tab’ ‘questions-tab’ ‘delivery-tab’. I am trying to add Next and Previous buttons to flick through these tabs. Currently you can click on the tab name to get to that page, But I want to replace this with the next and previous buttons. But i cant seem to crack it.
I have tried various pieces of code from all over. And for some reason none of it works. I have replaced my code with there’s completely and still doesn’t work.
Im not good with JS myself so i couldnt make up a function myself. But i have tried different things from posts. Below is an example of what i have done most recently. I have chopped it all down so it is a minimal reproducible code snippet.
<script>
$(document).ready(function(){
$('a[data-bs-toggle="tab"]').on("shown.bs.tab", function(e){
console.log(e.target); // newly activated tab
console.log(e.relatedTarget); // previous active tab
});
});
</script>
<script>
function bootstrapTabControl(){
var i, items = $('.nav-link'), pane = $('.tab-pane');
// next
$('.nexttab').on('click', function(){
for(i = 0; i < items.length; i++){
if($(items[i]).hasClass('active') == true){
break;
}
}
if(i < items.length - 1){
// for tab
$(items[i]).removeClass('active');
$(items[i+1]).addClass('active');
// for pane
$(pane[i]).removeClass('show active');
$(pane[i+1]).addClass('show active');
}
});
// Prev
$('.prevtab').on('click', function(){
for(i = 0; i < items.length; i++){
if($(items[i]).hasClass('active') == true){
break;
}
}
if(i != 0){
// for tab
$(items[i]).removeClass('active');
$(items[i-1]).addClass('active');
// for pane
$(pane[i]).removeClass('show active');
$(pane[i-1]).addClass('show active');
}
});
}
bootstrapTabControl();
</script> <head>
<script src="https://kit.fontawesome.com/69362e78c5.js" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<?php require_once __DIR__ . '/header.phtml'; ?>
</head>
<body>
<div class="container">
<ul class="nav nav-tabs"> <!--Using a list to create the tabs -->
<li class="nav-item">
<a href="#contact-tab" class="nav-link active" data-bs-toggle="tab">Contact Details</a>
</li>
<li class="nav-item">
<a href="#questions-tab" class="nav-link" data-bs-toggle="tab">Questions</a>
</li>
<li class="nav-item">
<a href="#delivery-tab" class="nav-link" data-bs-toggle="tab">Delivery Info</a>
</li>
</ul>
<!------------------------------------------------------------------------------------------------------------------------------------------------- -->
<form class="row g-3" action="<?= $data['action'] ?>" method="post">
<div class="tab-content"> <!-- This involves the tav content -->
<div class="tab-pane fade show active" id="contact-tab">
<div class="row"> <!-- start row here -->
<h1>Contact & Site Details</h1>
<div class="col-md-7">
<label for="site_name" class="form-label">Site Name*</label>
<input type="text"
class="form-control"
id="site_name"
name="site_name"
value="<?= $data['record']['site_name'] ?? '' ?>"
placeholder="Enter Site Name"
required><br>
</div>
</div>
<button class="nexttab">Next</button>
</div>
<div class="tab-pane fade" id="questions-tab">
<div class="row">
<div class="col-12">
<h6 for="current_machine">1. What is your Current Machine?</h6>
<input type="text"
class="form-control"
id="current_machine"
name="current_machine"
value="<?= $data['record']['current_machine'] ?? '' ?>"
placeholder="Leave blank if none"><br>
</div>
</div>
</div>
<div class="tab-pane fade" id="delivery-tab">
<div class="row">
<div class="col-12">
<h6 for="q7">9. What floor is the Machine(s) going to be located on?</h6>
<input type="text"
class="form-control"
id="q7"
name="q7"
value="<?= $data['record']['q7'] ?? '' ?>"
placeholder="Please enter what floor your machine will be located on"> <br><br>
</div>
</div>
</div>
</form>
</div>
</body>