Je fais un faux site Web d'horoscope comme un petit projet et j'ai des problèmes avec cette dernière fonctionnalité. Actuellement, l'utilisateur met sa date et son lieu de naissance et quelques autres informations, puis en appuyant sur le bouton Soumettre, une fonction qui analyse les informations de date et fait apparaître une alerte avec un paragraphe différent en fonction du signe astrologique auquel il se trouve. Cela fonctionne bien, mais ce n'est pas joli.

Au lieu de cela, je préfère que le bouton Soumettre fasse apparaître un modal et que le même paragraphe y apparaisse (encore une fois, en fonction de la modification de la date d'entrée).

Je suis très nouveau en HTML et JavaScript, donc toutes les questions "passer des données dans un modal" que j'ai lues ont des réponses qui me dépassent ou ne semblent pas s'appliquer, pour autant que je sache. Voici le HTML que j'ai actuellement. J'ai supprimé certaines des entrées étrangères qui ne font rien d'autre que de ne pas autoriser la soumission tant qu'elles ne sont pas remplies et les paragraphes qui ne sont que de longues chaînes:

<body>
    <header>
    </header>
    <main>
        <div id="zodiacModal" class="modal fade" tabindex="-1" role="dialog" aria-hidden="true">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 id="zodiacModalTitle" class="modal-title">Modal title</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        <p>Where I need the paragraph</p>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                    </div>
                </div>
            </div>
        </div>
        <form class="needs-validation" onsubmit="test(); return false;" novalidate>
            <div class="form-row">
                <div class="col-sm mb-3">
                    <label for="birthdate">Birthdate</label>
                    <input id="birthdate" class="form-control" type="date" value="2000-01-01" required>
                </div>
            </div>
            <div class="form-group">
                <div class="form-check">
                    <input id="terms" class="form-check-input" type="checkbox" value="" required>
                    <label class="form-check-label" for="terms">
                        I believe.
                    </label>
                    <div class="invalid-feedback">
                        You must believe before submitting.
                    </div>
                </div>
            </div>
            <button class="btn btn-primary" type="submit">Submit Form</button>
        </form>
    </main>
    <script>
        function test()
        {
            // Declare and initialize variables with strings for each sign here

            var date = document.querySelector("#birthdate").value.slice(5).split("-");
            var month = parseInt(date[0], 10), day = parseInt(date[1], 10);
            var signs = ["", capricorn, aquarius, pisces, aries, taurus, gemini, cancer, leo, virgo, libra, scorpio, saggitarius, capricorn];
            var days = [0, 20, 19, 20, 20, 21, 21, 22, 22, 23, 23, 22, 21];
            alert((day > days[month]) ? signs[month + 1] : signs[month]);
        }
    </script>

D'après la documentation, il semble que je doive remplacer le bouton d'envoi par quelque chose comme ceci:

<button type="submit" class="btn btn-primary" data-toggle="modal" data-target="#zodiacModal">

TL; DR: Je veux remplacer l'alerte qui apparaît lors de la soumission du formulaire (qui a un paragraphe différent dans le corps en fonction de la date saisie) par un modal qui fait la même chose. Toute explication conviviale de ce que je dois faire ici serait vraiment appréciée.

2
dylosaur 6 nov. 2019 à 22:40

2 réponses

Meilleure réponse

Comme il n'y a pas de méthode pour passer une variable via modal, faites comme ci-dessous,

$(".btn").click(function() {
  $(".modal-body p").text("inserted value");
  $("#myModal").modal();
  
});
<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h2>Modal Example</h2>
  <!-- Trigger the modal with a button -->
  <button type="button" class="btn btn-info btn-lg">Open Modal</button>

  <!-- Modal -->
  <div class="modal fade" id="myModal" role="dialog">
    <div class="modal-dialog">
    
      <!-- Modal content-->
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          <h4 class="modal-title">Modal Header</h4>
        </div>
        <div class="modal-body">
          <p></p>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
      </div>
      
    </div>
  </div>
  
</div>

</body>
</html>
1
Ahmed says Reinstate Monica 6 nov. 2019 à 20:25

Vous ne pouvez pas transmettre de données en HTML comme vous le décrivez. Ce que vous pouvez faire, c'est définir le contenu du <p> en utilisant Javascript. Donc, dans test(), vous pourriez faire quelque chose comme ceci:

const text = day > days[month] ? signs[month + 1] : signs[month]

document.getElementById('modal-body').innerHTML = text

PS Pour utiliser getElementById, ajoutez un identifiant à l'élément en question. Sinon, vous pouvez utiliser getQuerySelector si vous souhaitez vous en tenir à l'utilisation d'une classe. Mais généralement, il est préférable d'utiliser des identifiants pour obtenir des éléments par Javascript, car vous pouvez modifier la classe en fonction de votre CSS ultérieurement, et vous ne voulez pas que cela affecte le script.

1
Alacritas 6 nov. 2019 à 20:25