如何根据日期输入将 12 个字符串之一传递到模态？

Question

我正在制作一个假占星网站作为一个小项目，但在使用最后一个功能时遇到了一些问题。目前，用户输入他们的日期和出生地以及一些其他信息，然后点击提交按钮调用一个函数来解析日期信息，并根据他们所在的星座弹出带有不同段落的警报。这工作正常，但不是很漂亮。

相反，我宁愿提交按钮会弹出一个模态框，并在那里出现相同的段落（同样，取决于他们将日期输入更改为什么）。

我是 HTML 和 JavaScript 的新手，所以我读过的所有 "pass data into a modal" 问题的答案都让我浮想联翩，或者似乎没有申请，据我所知。这是我目前拥有的 HTML。 我删掉了一些无关的输入，这些输入除了在填写完成之前不允许提交外实际上什么都不做，还有那些只是长字符串的段落：

<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>

根据文档，我似乎需要将提交按钮更改为如下内容：

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

TL;DR：我想用执行相同操作的模态替换提交表单时弹出的警告（正文中有不同的段落，具体取决于输入的日期）。任何对我在这里需要做什么的新手友好的解释都将不胜感激。

Answer 1

您不能像您描述的那样将数据传递到 HTML。您可以做的是使用 Javascript 设置 <p> 的内容。所以在 test() 你可以这样做：

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

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

PS 要使用 getElementById，请向相关元素添加一个 id。否则，如果您想坚持使用 class，则可以使用 getQuerySelector。但一般来说，更好的做法是使用 ids 通过 Javascript 获取元素，因为您可能会在以后更改 class 以适合您的 CSS，而您不希望这样做影响脚本。

Answer 2

由于没有通过modal then传递变量的方法，按如下操作，

$(".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>

如何根据日期输入将 12 个字符串之一传递到模态？

How to pass one of 12 strings into modal depending on date input?

html

javascript

modal-dialog

bootstrap-modal