Как передать одну из 12 строк в модал в зависимости от ввода даты? - PullRequest
Новая
       44

Как передать одну из 12 строк в модал в зависимости от ввода даты?

2 голосов
/ 06 ноября 2019

Я делаю поддельный сайт гороскопа как маленький проект, и у меня возникли некоторые проблемы с этой последней функциональностью. В настоящее время пользователь вводит дату, место рождения и некоторую другую информацию, а затем нажимает кнопку «Отправить», вызывает функцию, которая анализирует информацию о дате и выдает предупреждение с другим абзацем, в зависимости от того, каким астрологическим знаком он является. Это работает нормально, но не красиво.

Вместо этого, я бы предпочел, чтобы кнопка отправки вызывала модальное окно, и там появлялся тот же абзац (опять же, в зависимости от того, что они изменили, ввод даты). to).

Я очень плохо знаком с HTML и JavaScript, поэтому на все прочитанные мною вопросы "Передача данных в модальные" есть ответы, которые мне просто не нравятсянасколько я могу судить. Вот 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: я хочу заменить предупреждение, которое появляется при отправке формы (которая имеетдругой параграф в теле в зависимости от ввода даты) с модальным, который делает то же самое. Любые нуб-дружественные объяснения того, что мне нужно сделать здесь, будут очень благодарны.

Ответы [ 2 ]

1 голос
/ 06 ноября 2019

Поскольку нет способа передать переменную через модальный режим, сделайте так, как показано ниже, 

$(".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 голос
/ 06 ноября 2019

Вы не можете передавать данные в HTML, как вы описываете. Что вы можете сделать, это установить содержимое <p> с помощью Javascript. Так что в test() вы можете сделать что-то вроде этого: 

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

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

PS Чтобы использовать getElementById, добавьте id к рассматриваемому элементу. В противном случае вы можете использовать getQuerySelector, если хотите использовать класс. Но, как правило, лучше использовать идентификаторы для получения элементов с помощью Javascript, поскольку вы можете изменить класс так, чтобы он соответствовал вашему CSS позже, и вы не хотите, чтобы это влияло на сценарий.

...