CODEWITHSUNDEEP
javascripthtmljquerycssbootstrap-4
Suraj Prasad
Suraj Prasad

Reputation: 251

Populate HTML card dynamically by fetching details from an overlay

I am trying to make an HTML card that gets populated with the values and images that are input from an overlay.

  1. I need help in getting the data from an overlay to the card 2.Populating the data and image in the card like the below card sample.

An example of a single section would be very helpful.

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

Upvotes: 1

Views: 421

Answers (1)

matthias_h
matthias_h

Reputation: 11416

In this example the function to generate the card is bound to an additional button labeled "Get" as it's not possible to use the "Save" button which has a CMS-function bound to it that won't work outside of the 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>

Upvotes: 1

Related Questions