Develop Reference

Dynamically creating tabs in bootstrap, with each new tab having the same default content?

I want to make a page such that I start off with Landing Page and Add Tab[+]. Then if I click add tab, I get a New Tab, with a blank version of the Landing Page Template. I'm using Bootstrap for front end and Python for back end.
https://jsfiddle.net/ub9m4ayq/1/
<form method="post">
<input type="hidden" name="campaign_key" value="{{campaign.campaign}}">
<input type="hidden" name="new" value="{{new}}">
<fieldset>
<div class="nav flex-column nav-pills" id="page-tabs" role="tablist" aria-orientation="vertical">
<a class="nav-link active" id="landing-tab" data-toggle="pill" href="#v-pills-landing" role="tab"
aria-controls="v-pills-home" aria-selected="true">Landing Page</a>
<a class="nav-link" id="add-new-tab" data-toggle="pill" href="#v-pills-add-new" role="tab"
aria-controls="v-pills-profile" aria-selected="false">[+] Add Page</a>
</div>
<div class="tab-content" id="v-pills-tabContent">
<div class="tab-pane fade show active" id="v-pills-landing" role="tabpanel" aria-labelledby="v-pills-landing">
<div class="row">
<div class="col">
<div class="mb-3">
<label class="form-label">Page Title</label>
<input class="form-control" placeholder="Landing Page">
</div>
</div>
<div class="col">
<div class="mb-3">
<label class="form-label">URL</label>
<input class="form-control" type="text" name="page_url" placeholder="/index.html">
</div>
</div>
</div>
<div class="mb-3">
<label class="form-label">Page template (preview)</label>
<textarea id="email_template" name="email_template">{}</textarea>
<div id="email_template_editor" style="height: 300px; width: 100%">
</div>
<script src="/static/ace-builds/src-min-noconflict/ace.js" type="text/javascript"
charset="utf-8"></script>
<script>
var editor_textarea = document.getElementById('email_template');
var editor_elem = document.getElementById('email_template_editor');
editor_textarea.style.display = 'none';
editor_elem.style.border = '1px solid #ccc';
var editor = ace.edit(editor_elem, { wrap: true });
editor.session.setMode("ace/mode/html");
//editor.setTheme("ace/theme/twilight");
editor.session.on('change', function () {
editor_textarea.value = editor.session.getValue();
});
</script>
</div>
</div>
<div class="tab-pane fade" id="v-pills-add-new" role="tabpanel" aria-labelledby="v-pills-add-new">
<p>Hi</p>
</div>
</div>
</fieldset>
<div class="mb-3">
<button class="btn btn-primary">Save</button>
</div>
</form>
Thanks!

How to reset a function on "click" using Bootstrap 4 carousel

I'm building a form in Bootstrap 4 that is broken out into multiple parts using a carousel.
What I would like to do is when the user completes the inputs for each section, the "next" button removes the disabled attribute.
I was able to figure this out for the first slide, but I can't figure out how to reset the function when it goes to the next active slide.
I'm trying to use vanilla Javascript. I'd also like to get the validation classes to work for each section using the next button, as opposed to submit.
Any help would be much appreciated. I'm still working to get a lot better at Javascript!
Here is my Fiddle: Guided Carousel
HTML
<div class="container m-5">
<h1 class="text-center">Guided Form</h1>
<div id="slider1" class="carousel slide" data-ride="carousel" data-interval="false">
<ol class="carousel-indicators row">
<li class="col-md-4 active" data-target="#carouselExampleIndicators" data-slide-to="0">1</li>
<li class="col-md-4" data-target="#carouselExampleIndicators" data-slide-to="1">2</li>
<li class="col-md-4" data-target="#carouselExampleIndicators" data-slide-to="2">3</li>
</ol>
<div class="row">
<div class="col-md-6 offset-md-3 mt-5">
<div class="carousel-inner" style="height:300px;">
<p id="alert"></p>
<form method="POST" action="" id="guideForm" novalidate="">
<div class="carousel-item active">
<div class="form-group">
<label for="InputFirstName">First Name</label>
<input type="text" class="form-control first-name" id="InputFirstName" aria-describedby="emailHelp" placeholder="First Name" required>
<div class="valid-feedback">Success! You've done it.</div>
<div class="invalid-feedback">No, you missed this one.</div>
</div>
</div>
<div class="carousel-item">
<div class="form-group">
<label for="InputLastName">Last Name</label>
<input type="text" class="form-control" id="InputLastName" aria-describedby="emailHelp" placeholder="Last Name" required>
</div>
</div>
<div class="carousel-item">
<div class="form-group">
<label for="InputEmail">Last Name</label>
<input type="email" class="form-control" id="InputEmail" aria-describedby="emailHelp" placeholder="Email" required>
</div>
<button class="btn btn-primary" type="submit" id="submitBtn">Submit</button>
</div>
</form>
</div>
</div>
</div>
<a class="carousel-control-prev d-none" href="#slider1" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<button id="nextBtn" class="carousel-control-next d-none" href="#slider1" role="button" data-slide="next" type="submit" disabled>
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</button>
</div>
JS
var form = document.querySelector('form .active')
var fn = document.querySelectorAll('.active #InputFirstName')
var required_inputs = document.querySelector('.active #InputFirstName')
var ln = document.querySelectorAll('.active #InputLasttName')
var required_inputs = document.querySelector('.active #InputLastName')
var register = document.querySelector('#nextBtn')
form.addEventListener('keyup', function(e) {
var disabled = false
fn.forEach(function(input, index) {
if (input.value === '' || !input.value.replace(/\s/g, '').length) {
disabled = true
}
})
if (disabled) {
register.setAttribute('disabled', 'disabled')
} else {
register.removeAttribute('disabled')
}
})

Bootstrap Modal not closing after submitting the form in it using ajax call?

I have a modal which has a form in it. I am trying to submit the form without refreshing the page using ajax and I am successfully submitting the form but I am unable to hide the modal.
Bootstrap Modal With Form in it:
<div class="modal fade" id="exampleModalCenter" role="dialog">
<div class="modal-dialog modal-dialog-centered">
<!-- Modal content-->
<div class="modal-content">
<form >
<div class="modal-body">
<ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">
<li class="nav-item">
<a class="nav-link active" id="pills-home-tab" data-toggle="pill"
href="#pills-home" role="tab" aria-controls="pills-home" aria-
selected="true">CreditCard/DebitCard</a>
</li>
<li class="nav-item">
<a class="nav-link" id="pills-profile-tab" data-toggle="pill"
href="#pills-profile" role="tab" aria-controls="pills-profile"
aria-selected="false">Paypal</a>
</li>
<li class="nav-item">
<a class="nav-link" id="pills-contact-tab" data-toggle="pill"
href="#pills-contact" role="tab" aria-controls="pills-contact"
aria-selected="false">Quickpay</a>
</li>
</ul>
<div class='pt-1 pb-1 pl-2 text-danger text-center' id="payment-
error">Please enter all card details!</div>
<div class="tab-content" id="pills-tabContent">
<div class="tab-pane fade show active" id="pills-home"
role="tabpanel" aria-labelledby="pills-home-tab">
<div class="form-group">
<label for="amount">Amount</label>
<div class="input-group">
<input type="number" name="amount" id="modal_amount"
class="form-control" placeholder="Enter Donation amount"
autocomplete="amount" value="">
<div class="input-group-append"><span class="input-group-
text"><i class="fa fa-money"></i></span></div>
</div>
</div>
<div class="form-group">
<label for="name">CardHolder Name</label>
<div class="input-group">
<input type="text" name="name" class="form-control"
placeholder="Enter Name" autocomplete="name" id="modal_name"
value="">
<div class="input-group-append"><span class="input-group-
text"><i class="fa fa-user"></i></span></div>
</div>
</div>
<div class="form-group">
<label for="cardnumber">Card Number</label>
<div class="input-group">
<input type="tel" name="cardnumber" class="form-control"
placeholder="Valid Card Number" autocomplete="cc-number"
value="" id="modal_number">
<div class="input-group-append"><span class="input-group-
text"><i class="fa fa-credit-card"></i></span></div>
</div>
</div>
<div class="row">
<div class="col-7">
<div class="form-group">
<label for="expdate">Expiry Date</label>
<div class="input-group">
<input type="tel" name="expdate" class="form-control"
placeholder="MM/YY" autocomplete="exp-date" value=""
id="modal_expdate">
<div class="input-group-append"><span class="input-group-
text"><i class="fa fa-calendar"></i></span></div>
</div>
</div>
</div>
<div class="col-5">
<div class="form-group">
<label for="cvv">CVV</label>
<div class="input-group">
<input type="password" name="cvv" class="form-control"
placeholder="Enter CVV" autocomplete="cvv" maxlength="3"
value="" id="modal_cvv">
<div class="input-group-append"><span class="input-group-
text"><i class="fa fa-key" ></i></span></div>
</div>
</div>
</div>
</div>
</div>
<div class="tab-pane fade" id="pills-profile" role="tabpanel" aria-
labelledby="pills-profile-tab">...</div>
<div class="tab-pane fade" id="pills-contact" role="tabpanel" aria-
labelledby="pills-contact-tab">...</div>
</div>
<input type="hidden" name="fundid" id="fundid">
</div>
<div class="modal-footer">
<button type="submit" class="form-control btn btn-primary btn-small"
name="fundraiser" id="fundraiser">Submit</button>
</div>
</form>
</div>
</div>
</div>
Ajax Code for above Modal:
$('document').ready(function(){
$('#event-error').hide();
$('.event-alert').hide();
$('#payment-error').hide();
$('.payment-alert').hide();
// fundraiser modal form submission
$('#fundraiser').click(function(){
var cardname = $('#modal_name').val();
var cardnumber = $('#modal_number').val();
var amount = $('#modal_amount').val();
var expdate = $('#modal_expdate').val();
var cvv = $('#modal_cvv').val();
var fundid = $('#fundid').val();
var payment_data = 'card-name=' + cardname + '&card-number=' + cardnumber
+ '&amount=' + amount + '&expdate=' + expdate + "&cvv=" + cvv +
'&fundid=' + fundid;
if( cardname == "" || cardnumber == "" || amount == "" || expdate == ""
|| amount == "")
{
$('#payment-error').show();
return false;
}
else{
$.ajax({
type: "POST",
url: "fund_data.php",
data: payment_data,
success: function(){
$('.payment-alert').delay(1000).show();
}
});
$('#modal_name').val("");
$('#modal_number').val("");
$('#modal_amount').val("");
$('#modal_expdate').val("");
$('#modal_cvv').val("");
return false;
}
});
After Modal pops up, I provide a random card details in the form for the payment and after I submit the form, the details are posted into db using ajax post call and a alert is shown payment successful. However i am unable to close the modal. Please do solve this??

You must call the hide() function in order to close your modal.
$.ajax({
type: "POST",
url: "fund_data.php",
data: payment_data,
success: function(){
$('.payment-alert').delay(1000).show();
$('#exampleModalCenter').modal('hide'); // here you hide the modal
}
});
Simply setting .val(""); won't hide it.

You close a Bootstap modal with
$(selector).modal('hide');
To hide all modals
$('.modal').modal('hide');
So, if you are wanting to close the modal only on success of the AJAX call, then you would do this:
$.ajax({
type: "POST",
url: "fund_data.php",
data: payment_data,
success: function(){
$('.payment-alert').delay(1000).show();
$('.modal').modal('hide');
}
});

How to validate in each step the required fields? (that is, the next button should only work if required fields are valid and not empty)

I´m creating a multi-step form using bootstrap and jquery with 4 steps.
But I want that in each step validate the required fields, that is, the button to go to the next step should only work if the required fields are not empty.
But I´m not having success implementing this part of validating each step the required fields. Do you know how to do that?
Working example: https://jsfiddle.net/4vzf9qgr/2/
Jquery:
$(function(){
// navigation buttons
$('a.nav-link').on('show.bs.tab', function (e) {
var $target = $(e.target);
if ($target.parent().hasClass('disabled')) {
e.preventDefault();
}
});
$(".next-step").click(function (e) {
var $active = $('.nav-pills li a.active');
$active.parent().next().removeClass('disabled');
nextTab($active);
});
$(".prev-step").click(function (e) {
var $active = $('.nav-pills li a.active');
prevTab($active);
});
function nextTab(elem) {
$(elem).parent().next().find('a.nav-link').click();
}
function prevTab(elem) {
$(elem).parent().prev().find('a.nav-link').click();
}
});
HTML
<div class="bg-light-gray2">
<div class="container nopadding py-4">
<div class="row justify-content-center align-items-center">
<div class="col-12">
<h1 class="h5 text-center text-heading-blue font-weight-bold">Page Title</h1>
</div>
</div>
<div class="row mt-3 d-flex justify-content-center">
<div class="col-12">
<div class="registration_form">
<ul class="nav nav-pills bg-light-gray registration_form_list" role="tablist">
<li class="">
<a class="nav-link active" href="#step1" data-toggle="tab" role="tab">
Step 1<br><small class="d-none d-md-inline-block">General Info</small></a>
</li>
<li class="disabled">
<a class="nav-link" href="#step2" data-toggle="tab" role="tab">
Step 2<br><small class="d-none d-md-inline-block">Conference Creator Info</small></a>
</li>
<li class="disabled">
<a class="nav-link" href="#step3" data-toggle="tab" role="tab">
Step 3<br><small class="d-none d-md-inline-block">Registration Types</small></a>
</li>
</ul>
<form method="post" name="test" class="clearfix" action="/conference/store">
<div class="tab-content registration_body bg-white" id="myTabContent">
<div class="tab-pane fade show active clearfix" id="step1" role="tabpanel" aria-labelledby="home-tab">
<div class="form-group">
<label for="conference_name" class="text-heading h6 font-weight-semi-bold">Conference Name</label>
<input type="text" required class="form-control" name="conference_name" id="conference_name">
</div>
<div class="form-row">
<div class="form-group col-lg-6">
<label for="conference_categories" class="text-heading h6 font-weight-semi-bold">Categories</label>
<select id="tag_list" multiple class="form-control" name="conference_categories" id="conference_categories">
<option>category1</option>
<option>category2</option>
</select>
</div>
</div>
<div class="form-group">
<label for="textarea" class="text-heading h6 font-weight-semi-bold">Description</label>
<textarea class="form-control" name="conference_description" id="textarea" rows="3"></textarea>
</div>
<div class="float-right">
<button type="button" href="#step2" data-toggle="tab" role="tab"
class="btn mr-2 btn-primary btn next-step">
Go To Step 2
</button>
</div>
</div>
<div class="tab-pane fade clearfix" id="step2" role="tabpanel" aria-labelledby="profile-tab">
<div class="form-group">
<label for="conference_organizer_description" class="text-heading h6 font-weight-semi-bold">Description</label>
<textarea name="organizer_description" id="conference_organizer_description" class="form-control" rows="3"></textarea>
</div>
<button type="button" href="#step1" data-toggle="tab" role="tab"
class="btn mr-2 btn-outline-primary btn prev-step">
Back to Step 1
</button>
<button type="button" href="#step3" data-toggle="tab" role="tab"
class="btn mr-2 btn-primary btn next-step">
Go To Step 3
</button>
</div>
<div class="tab-pane clearfix fade" id="step3" role="tabpanel" aria-labelledby="contact-tab">
<div class="form-group">
<label for="registration_type_name" class="text-heading h6 font-weight-semi-bold">Registration Type Name</label>
<input type="text" required class="form-control" name="registration_type_name" id="registration_type_name">
</div>
<div class="form-group">
<label for="registration_type_description" class="text-heading h6 font-weight-semi-bold">Registration Type Description</label>
<input type="text" class="form-control" name="registration_type_description" id="registration_type_description">
</div>
<button type="button" href="#step2" data-toggle="tab" role="tab"
class="btn mr-2 btn-outline-primary btn prev-step">
Go Back To Step 2
</button>
<button type="submit"
class="btn mr-2 btn-primary btn">
Store
</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>

One way to do it is to use the div IDs that you have ("#step1", "#step2", etc) and have the button be disabled unless the following function returns true:
function validateForm(divId)
{
var inputs, index;
var form=document.getElementById(formId);
inputs = form.getElementsByTagName('input');
for (index = 0; index < inputs.length; ++index) {
// deal with inputs[index] element.
if (inputs[index].value==null || inputs[index].value=="")
{
alert("Field is empty");
$(buttonID).prop('disabled', true);
return
}
}
$(buttonID).prop('disabled', false);
}
Update/Additional comments:
I changed the function above to set the button instead of returning anything. At form load, have the button be disabled. Then add an onfocus attr to run an event listener like this:
function validateFormListener(divID, formObject) {
formObject.addEventListener("input", function(evt) {
validateForm(divID, buttonID)
})
}
Give the button an ID, then replace buttonID in the examples with this name. Change the input tags to look like this:
<input type="text" required class="form-control" onfocus="validateFormListener('#step1', buttonID, this)" name="conference_name" id="conference_name">

on submit click button hide first tab and show next tab?

we having three tabs initially first tabs should enabled i's working fine. after click submit button second tab should be open but it's is not working.
<div class="page-content">
<div class="container-fluid">
<header class="section-header">
<div class="tbl">
<div class="tbl-row">
<div class="tbl-cell">
<h2>Company Registration Form</h2>
</div>
</div>
</div>
</header>
<section class="tabs-section">
<div class="tabs-section-nav tabs-section-nav-icons">
<div class="tbl">
<ul class="nav" role="tablist" id="myLinks">
<li class="nav-item">
<a class="nav-link active" href="#home" role="tab" data-toggle="tab">
<span class="nav-link-in">
<i class="font-icon font-icon-cogwheel"></i>
Company Registration Form
</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#menu1" role="tab" data-toggle="tab">
<span class="nav-link-in">
<span class="glyphicon glyphicon-music"></span>
Company Social Network
</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#menu2" role="tab" data-toggle="tab">
<span class="nav-link-in">
<i class="fa fa-product-hunt"></i>
Company Reference
</span>
</a>
</li>
</ul>
</div>
</div><!--.tabs-section-nav-->
<div class="tab-content" id="myTabs">
<div role="tabpanel" class="tab-pane fade in active show" id="home">
<form id="form" action="">
<div class="form-group">
<label for="email">Email:</label>
<input type="email" class="form-control" id="email" placeholder="Enter email">
</div>
<div class="form-group">
<label for="pwd">Password:</label>
<input type="password" class="form-control" id="pwd" placeholder="Enter password">
</div>
<div class="checkbox">
<label><input type="checkbox"> Remember me</label>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</div><!--.tab-pane-->
<div role="tabpanel" class="tab-pane fade" id="menu1">
<form id="form" action="">
<div class="form-group">
<label for="email">Email:</label>
<input type="email" class="form-control" id="email" placeholder="Enter email">
</div>
<div class="form-group">
<label for="pwd">Password:</label>
<input type="password" class="form-control" id="pwd" placeholder="Enter password">
</div>
<div class="checkbox">
<label><input type="checkbox"> Remember me</label>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</div><!--.tab-pane-->
<div role="tabpanel" class="tab-pane fade" id="menu2">
<form id="form" action="">
<div class="form-group">
<label for="email">Email:</label>
<input type="email" class="form-control" id="email" placeholder="Enter email">
</div>
<div class="form-group">
<label for="pwd">Password:</label>
<input type="password" class="form-control" id="pwd" placeholder="Enter password">
</div>
<div class="checkbox">
<label><input type="checkbox"> Remember me</label>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</div><!--.tab-pane-->
</div><!--.tab-content-->
</section>
</div>
</div>
Script
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript">
$("#myTabs form").on('submit', function (e) {
e.preventDefault();
var linkHref = $(this).parents('.tab-pane').attr('id');
$('#myLinks li')
.find('a[href="#' + linkHref + '"]')
.parent()
.next()
.find('a').tab('show')
.attr('data-toggle', 'tab');
});
</script>
Pass the value
in this picture value pass to the linkHref but after click submit button hide the first tab but next tab is not opening ..
Second Image blank page
second screen shot blank page after enter submit button

Here you go with a solution https://jsfiddle.net/7baqxro0/1/
$("#myTabs form").on('submit', function (e) {
e.preventDefault();
var linkHref = $(this).parents('.tab-pane').attr('id');
$('#myLinks li a').removeClass('active');
$('#myLinks li')
.find('a[href="#' + linkHref + '"]')
.parent()
.next()
.find('a')
.tab('show')
.addClass('active')
.attr('data-toggle', 'tab');
$('a.nav-link').not('.active').css('pointer-events', 'none');
});
$('a.nav-link').not('.active').css('pointer-events', 'none');
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="page-content">
<div class="container-fluid">
<header class="section-header">
<div class="tbl">
<div class="tbl-row">
<div class="tbl-cell">
<h2>Company Registration Form</h2>
</div>
</div>
</div>
</header>
<section class="tabs-section">
<div class="tabs-section-nav tabs-section-nav-icons">
<div class="tbl">
<ul class="nav nav-tabs" role="tablist" id="myLinks">
<li class="nav-item">
<a class="nav-link active" href="#home" role="tab" data-toggle="tab">
<span class="nav-link-in">
<i class="font-icon font-icon-cogwheel"></i>
Company Registration Form
</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#menu1" role="tab" data-toggle="tab">
<span class="nav-link-in">
<span class="glyphicon glyphicon-music"></span>
Company Social Network
</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#menu2" role="tab" data-toggle="tab">
<span class="nav-link-in">
<i class="fa fa-product-hunt"></i>
Company Reference
</span>
</a>
</li>
</ul>
</div>
</div><!--.tabs-section-nav-->
<div class="tab-content" id="myTabs">
<div role="tabpanel" class="tab-pane fade in active show" id="home">
<form id="form" action="">
<div class="form-group">
<label for="email">Email:</label>
<input type="email" class="form-control" id="email" placeholder="Enter email">
</div>
<div class="form-group">
<label for="pwd">Password:</label>
<input type="password" class="form-control" id="pwd" placeholder="Enter password">
</div>
<div class="checkbox">
<label><input type="checkbox"> Remember me</label>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</div><!--.tab-pane-->
<div role="tabpanel" class="tab-pane fade" id="menu1">
<form id="form" action="">
<div class="form-group">
<label for="email">Email:</label>
<input type="email" class="form-control" id="email" placeholder="Enter email">
</div>
<div class="form-group">
<label for="pwd">Password:</label>
<input type="password" class="form-control" id="pwd" placeholder="Enter password">
</div>
<div class="checkbox">
<label><input type="checkbox"> Remember me</label>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</div><!--.tab-pane-->
<div role="tabpanel" class="tab-pane fade" id="menu2">
<form id="form" action="">
<div class="form-group">
<label for="email">Email:</label>
<input type="email" class="form-control" id="email" placeholder="Enter email">
</div>
<div class="form-group">
<label for="pwd">Password:</label>
<input type="password" class="form-control" id="pwd" placeholder="Enter password">
</div>
<div class="checkbox">
<label><input type="checkbox"> Remember me</label>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</div><!--.tab-pane-->
</div><!--.tab-content-->
</section>
</div>
</div>
Please add your CSS to the code, intentionally I skipped it.
I've used CSS property pointer-events: none instead of disabled.
Hope this will help you.

working: https://jsfiddle.net/q6adcnLs/
you have multiple elements with same id attribute
you've misplaced .active class to .nav-link (which should be in the .nav-item)
you can use return true or return false instead of preventDefault()
UPDATE:
disable other inactive tabs https://jsfiddle.net/q6adcnLs/1/