Заполнять карточку HTML динамически, извлекая детали из оверлея

Question

Я пытаюсь создать карту HTML, в которую будут добавлены значения и изображения, введенные из оверлея.

1. Мне нужна помощь в получении данных из оверлея на карту 2. Добавьте данные и изображение в карточку, как показано на примере карточки ниже.

Было бы очень полезно использовать пример одного раздела.

        <!-- Overlay -->
          <div class="ibm-common-overlay ibm-overlay-alt-two" data-widget="overlay" data-type="alert" id="overlayExampleAlert">

            <form id="overlay" class="ibm-row-form" method="post" action="__REPLACE_ME__">

              <h1 class="ibm-bold">Usecase 1</h1>

              <div class="ibm-fluid">
                <div class="ibm-col-12-12">

                  <label for="uc-title">Use case title<span class="ibm-required">*</span></label></br>
                  <span>
                    <input type="text" value="" size="40" id="uc-title" name="uc-title">
                  </span>
                </div>
              </div>

              <div class="ibm-fluid">
                <div class="ibm-col-12-12">
                  <label for="uc-desc">Use case description<span class="ibm-required">*</span></label></br>
                  <span>
                    <input type="text" value="" size="40" id="uc-desc" name="uc-desc">
                </div>
              </div>

              <div class="ibm-fluid">
                <div class="ibm-col-12-12">
                  <p class="ibm-form-elem-grp">
                    <label>No of scene(s)<span class="ibm-required">*</span></label></br>
                    <span>
                      <select id="scenes">
                        <option value="" selected>Select one</option>
                        <option value="A">1</option>
                        <option value="B">2</option>
                        <option value="C">3</option>
                        <option value="D">4</option>
                        <option value="E">5</option>
                        <option value="F">6</option>
                      </select>
                    </span>
                  </p>
                </div>
              </div>

              <div class="ibm-fluid">
                <div class="ibm-col-12-12">
                  <label for="myInputField1">Usecase Image<span class="ibm-required">*</span></a></label>
                  <span>
                    <input id="myInputField1" type="file" data-widget="fileinput" data-multiple="false" />
                  </span>
                </div>
              </div>

              <div class="ibm-fluid">
                <div class="ibm-col-12-12">
                  <p class="ibm-btn-row"><button class="ibm-btn-pri ibm-btn-blue-50" style="float:right;" onclick="IBMCore.common.widget.overlay.hide('overlayExampleAlert',true);">Save</button> <button
                      class="ibm-btn-sec ibm-btn-transparent ibm-btn-blue-50" style="float:right" ; onclick="IBMCore.common.widget.overlay.hide('overlayExampleAlert',true);">Cancel</button></p>
                </div>

Answer 1

В этом примере функция для создания карты привязана к дополнительной кнопке с надписью «Получить», поскольку невозможно использовать кнопку «Сохранить», к которой привязана функция CMS, которая не будет работать за пределами CMS.

$("#get").on("click", function() {
  let title = $("#uc-title").val();
  let desc = $("#uc-desc").val();
  let scene = $("#scenes option:selected").html();
  let image = $("#myInputField1").next("span").text().replace("(", "").replace(")", "");
  let card = "<div class='card'><div class='card-image'><img src='/images/" + image + "'/></div><div class='title'>" + title + "</div><div class='desc'>" + desc + "</div><div class='scene'>No of scene(s): " + scene + "</div></div>";
  document.body.insertAdjacentHTML("beforeend", card);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
 <h1 class="ibm-bold">Usecase 1</h1>

              <div class="ibm-fluid">
                <div class="ibm-col-12-12">

                  <label for="uc-title">Use case title<span class="ibm-required">*</span></label></br>
                  <span>
                    <input type="text" value="" size="40" id="uc-title" name="uc-title">
                  </span>
                </div>
              </div>

              <div class="ibm-fluid">
                <div class="ibm-col-12-12">
                  <label for="uc-desc">Use case description<span class="ibm-required">*</span></label></br>
                  <span>
                    <input type="text" value="" size="40" id="uc-desc" name="uc-desc">
                </div>
              </div>

              <div class="ibm-fluid">
                <div class="ibm-col-12-12">
                  <p class="ibm-form-elem-grp">
                    <label>No of scene(s)<span class="ibm-required">*</span></label></br>
                    <span>
                      <select id="scenes">
                        <option value="" selected>Select one</option>
                        <option value="A">1</option>
                        <option value="B">2</option>
                        <option value="C">3</option>
                        <option value="D">4</option>
                        <option value="E">5</option>
                        <option value="F">6</option>
                      </select>
                    </span>
                  </p>
                </div>
              </div>

              <div class="ibm-fluid">
                <div class="ibm-col-12-12">
                  <label for="myInputField1">Usecase Image<span class="ibm-required">*</span></a></label>
                  <span>
                    <input id="myInputField1" type="file" data-widget="fileinput" data-multiple="false" />
                    <span>(IMG_3861.jpg)</span>
                  </span>
                </div>
              </div>

              <div class="ibm-fluid">
                <div class="ibm-col-12-12">
                  <p class="ibm-btn-row"><button class="ibm-btn-pri ibm-btn-blue-50" style="float:right;" onclick="IBMCore.common.widget.overlay.hide('overlayExampleAlert',true);">Save</button> <button
                      class="ibm-btn-sec ibm-btn-transparent ibm-btn-blue-50" style="float:right" ; onclick="IBMCore.common.widget.overlay.hide('overlayExampleAlert',true);">Cancel</button></p>
                </div>
                <button id="get">
                Get
                </button>