Bootstrap Modal called from Javascript file not working

Question

My goal is this one :

1. I use Javascript to display a button, when a Marker is clicked on a Map
2. When the button is displayed, then if the user click on it, a modal should appear on the page.

The issue I meet : The modal is not showing at all.

The page is located there : http://p4547.phpnet.org/bikes/reservation.html

The javascript file is called : interact-version3.js

My HTML code for the Modal :

<!-- Modal -->
  <div aria-hidden="true" aria-labelledby="exampleModalLongTitle" class="modal fade" id="bookingmodal" role="dialog" tabindex="-1">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="exampleModalLongTitle">Réservation</h5><button aria-label="Close" class="close" data-dismiss="modal" type="button"><span aria-hidden="true">&times;</span></button>
        </div>
        <div class="modal-body">
          <div class="guide">
            <div class="row item">
              <div class="col-md-12 order-md-2">
                <h2 class="item-heading">Signature. <span class="text-muted">Signez pour valider votre réservation.</span></h2>
                <p class="lead">Titre<br></p>
                <p></p>
              </div>
            </div>
          </div>
        </div>
        <div class="modal-footer">
          <button class="btn btn-secondary" data-dismiss="modal" type="button">Fermer</button>
        </div>
      </div>
    </div>
  </div>

Here is the Javascript section :

onMarkerClick(arg) {
  // Récupération du marker concerné
      let marker = arg.target;
  // Récupération des infos
      let info = marker.options.jcdecauxInfo;
      let name = info.name;
      let lowerName = name.toLowerCase();
      let address = info.address;
      let statusStation = info.status;
      let statusStationFr = statusStation.replace('OPEN', '<i class="fas fa-lock-open text-success"></i>&nbsp;&nbsp; Station Ouverte').replace('CLOSED', '<i class="fas fa-lock text-danger"></i>&nbsp;&nbsp; Station Fermée');
      let lastUpdate = info.last_update;
      let date = new Date(lastUpdate).toLocaleString();
      let availableBikes = info.available_bikes;
  // Affichage des infos de la station dans l'encart situé à droite :
      document.getElementById("name").innerHTML = `<h4 title="Adresse" class="details display-5"><i class="fas fa-map-marked-alt text-danger"></i>&nbsp;Détails de la station :</h4><div class="text-success"><h5>Station de Vélo'v</h5></div><h6>${name}</h6>`;
      document.getElementById("address").innerHTML = address;
      document.getElementById("status").innerHTML = statusStationFr;
      document.getElementById("last_update").innerHTML = `<i class="fas fa-clock"></i>&nbsp;&nbsp; Dernière mise à jour :  ` + date;
      if (availableBikes > 1) {
        document.getElementById("available_bikes").innerHTML = `<i class="fas fa-bicycle"></i>&nbsp;&nbsp;<strong>` + availableBikes + `&nbsp;vélos disponibles</strong><br>
          <br>
          <form>
          <div class="form-group row">
          <label for="lastname" class="col-sm-3 col-form-label">Nom :</label>
          <div class="col-sm-9">
          <input type="text" class="form-control" id="lastname" placeholder="Votre Nom">
          </div>
          </div>
          <div class="form-group row">
          <label for="firstname" class="col-sm-3 col-form-label">Prénom :</label>
          <div class="col-sm-9">
          <input type="text" class="form-control" id="firstname" placeholder="Votre Prénom">
          </div>
          </div>
          <div class="form-group row">
          <div class="col-sm-12">
          <button type="submit" class="btn btn-danger" data-target="#bookingmodal" data-toggle="modal">Réserver</button>
          </div>
          </div>
          </form>`;
        }

      else if (availableBikes == 1) {
        document.getElementById("available_bikes").innerHTML = `<i class="fas fa-bicycle"></i>&nbsp;&nbsp;<strong>` + availableBikes + `&nbsp;vélo disponible</strong><br>
          <br>
          <form>
          <div class="form-group row">
          <label for="lastname" class="col-sm-3 col-form-label">Nom :</label>
          <div class="col-sm-9">
          <input type="text" class="form-control" id="lastname" placeholder="Votre Nom">
          </div>
          </div>
          <div class="form-group row">
          <label for="firstname" class="col-sm-3 col-form-label">Prénom :</label>
          <div class="col-sm-9">
          <input type="text" class="form-control" id="firstname" placeholder="Votre Prénom">
          </div>
          </div>
          <div class="form-group row">
          <div class="col-sm-12">
          <button type="submit" class="btn btn-danger" data-target="#bookingmodal" data-toggle="modal">Réserver</button>
          </div>
          </div>
          </form>
          `;
      }
      else {
        document.getElementById("available_bikes").innerHTML = `<br><br><h3>Aucun vélo disponible dans cette station</h3><br><br>`;
      }
    }

I hope you can help me on this matter.

Answer 1

The Reserver button is present within the form which is submitting the form and causes the page to reload. You can listen to button click and prevent it's default action using e.preventDefault.

const button = document.querySelector('button')
button.addEventListener('click', function(e) {
    e.preventDefault();
    console.log('clicked');
})

<form action="">
  <button type="submit">Click Me</button>
</form>

Answer 2

The problem is that the button has a type of submit explicitly (and also by default) inside the form. The browser attempts to submit the form when you click it, resulting in a navigation away from the page. You can prevent this behaviour by changing the button to type button

<button type="button" ...>Réserver</button>