jQuery change doesn't work in bootstrap 5 tabs

95
March 08, 2022, at 01:50 AM

I add an input form in bootstrap 5 tabs like this:

<div class="container">
  <div class="row justify-content-center my-5">
    <div class="col-auto">
      <ul class="nav bg-dark">
        <li class="nav-item">
          <a class="nav-link link-secondary" id="home-tab" data-bs-toggle="tab" data-bs-target="#home" href="#">HOME</a>
        </li>
        <li class="nav-item">
          <a class="nav-link link-secondary" id="about-tab" data-bs-toggle="tab" data-bs-target="#about" href="#">ABOUT</a>
        </li>
        <li class="nav-item">
          <a class="nav-link link-secondary active" id="album-tab" data-bs-toggle="tab" data-bs-target="#album" href="#">ALBUM</a>
        </li>
      </ul>
      <div class="tab-content" id="tabContent">
        <div class="tab-pane fade" id="home" role="tabpanel" aria-labelledby="home-tab">
          <img class="img-fluid" src="https://fakeimg.pl/800x300/?text=home" />
        </div>
        <div class="tab-pane fade" id="about" role="tabpanel" aria-labelledby="about-tab">
          <img class="img-fluid" src="https://fakeimg.pl/800x300/?text=about" />
        </div>
        <div class="tab-pane fade show active" id="album" role="tabpanel" aria-labelledby="album-tab">
          <input id="searchDateFrom" type="text" class="form-control search-by-date" data-name="searchDateFrom">
          <img class="img-fluid" src="https://fakeimg.pl/800x300/?text=album" />
        </div>
      </div>
    </div>
  </div>
</div>

Js:

var dateFrom = $('#searchDateFrom').val();
$('#searchDateFrom').change(function() {
  console.log(dateFrom);
});

Now, In action, I need to get input value using jQuery change method. But, after change the value I can't see any result. (into console log in case)

How do can I fix this problem?!

DEMO Here

Image:

Answer 1

The problem is, that you don't refresh the value of your variable "dateFrom" on change.

dateFrom keeps its initial value, which is "". On change, it logs this value.

You should change your code to:

var dateFrom;
$('#searchDateFrom').change(function() {
  dateFrom = $('#searchDateFrom').val();
  console.log(dateFrom);
});

This will update the value of the variable on change and log it afterwards.

Rent Charter Buses Company
READ ALSO
how to add a for loop data to form.serializer() - jquery

how to add a for loop data to form.serializer() - jquery

I'm trying to send dynamic two input field to backend via ajax, and i have main form, the main form works fine, dont know how to send two extra dynamic inputs to backend, here is my code

119
How would I go about getting a json file into javascipt?

How would I go about getting a json file into javascipt?

I'm extremely new to javascript, so assume I know nothingI'm trying to import this json file into my website, and having issues getting it working

115
How to do ajax PATCH?

How to do ajax PATCH?

I am trying to do ajax PatchBut it's not working

116
Change .html URL depending on the active div

Change .html URL depending on the active div

I have two html pages: index1html and index2

90