Update the HTML card with dynamic content by retrieving information from an overlay

I am working on creating an HTML card that will display input values and images from an overlay.

  1. I require assistance with transferring data from the overlay to the card
  2. Populating the data and image in the card similar to the example below.

A sample of a single section would be greatly appreciated.

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

Answer №1

This instance demonstrates binding the card generation function to an extra button labeled "Get" since using the existing "Save" button is not feasible. The "Save" button has a CMS-function attached to it that only works within the CMS environment.

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

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

React fails to display image on the server

One issue I'm facing with my React project on the server is that some images are not being displayed. Click here to view image description The console error message reads: ASGimagen.png:1 GET https://[url of my server]/autodiagnostico/cuadroanimado ...

javascriptreactjsrefresh

After receiving a response from the .ajax function, the message will be added to the specified

After a successful AJAX request, the returned data will include a status parameter. If the status is false (indicating no AJAX failure), the data will contain an array of element names along with their corresponding error messages. The objective here is to ...

javascriptjqueryajaxerror-handlinghighlight

I'm looking to learn how to efficiently write file chunks from a video upload in Node Js. How can I

My current project involves attempting to stream webcam or audio data to Node.js and save it on disk. The aim is to send the chunks of data to the server as soon as they are available. I have successfully captured the stream using getUserMedia, set up me ...

javascriptnode.jsexpresswebrtcgetusermedia

Generating arrays dynamically with JavaScript

I'm attempting to dynamically generate an array from another array in JavaScript. The task at hand involves taking a string that represents a mathematical literal expression, such as '2a + 3b + 4a + 5c', and splitting it into an array contai ...

javascriptarrays

React Mapbox Error: Troubleshooting "ReferenceError: L is not defined"

Currently, I am working on a small project and trying to integrate react mapbox. You can find more information about the package here. import React from 'react'; import MapboxMap from 'react-mapbox'; class Operator extends React.Compo ...

javascriptnode.jsreactjsmapbox

Get the image to appear in the current browser window, just like how Google Chrome

Collaborating with Alvaro Montoro: This is the Javascript function I have created: function imageloadingdown() { var url = window.location.href; var hiddenIFrameId = 'hiddenDownloader'; var iframe = document.getElementByI ...

c#jqueryajax

Array Filtering with Redux

I have come across similar queries, but I am still unable to find a solution. While typing in the search box, the items on the screen get filtered accordingly. However, when I delete a character from the search box, it does not show the previous items. For ...

javascriptreactjsredux

``In a WordPress plugin, a SELECT query for the database (utilizing WordPress, PHP, and MySQL) is

When trying to fetch records from a select query within a plugin, I encounter an issue where no records are returned and I receive the following error message in the web console. Can someone help me identify what mistake I might be making?: Object { rea ...

javascriptphpjquerymysqlwordpress

The art of blending different inheritance (Styled Elements)

Can components be based on other styled components? Take a look at the code snippets below. I am interested in creating a component like this: const HeaderDropDownLi = styled(DropDownLi, HeaderItem) Both DropDownLi and HeaderItem are derived from a style ...

javascriptcssreactjstypescriptstyled-components

Add-on or code snippet for Node.js that allows for optional regex groups

Strings in Sequence line 1 = [A B C] line 2 = [A C] line 3 = [B C] Regular Expression /\[?(?<groupA>[A])?(?:[ ]*)?(?<groupB>[B])?(?:[ ]*)?(?<groupC>[C])\]/gm Is there a way to achieve the desired output using a plugin or spe ...

javascriptregexnode.js

Storing user input in MongoDB after encoding

I am currently exploring the most effective methods for storing and presenting user input in MongoDB. In traditional SQL databases, it is necessary to encode all user input as a precaution against injection attacks. However, in the context of MongoDB, ther ...

javascriptpythonajaxmongodbunicode

What is the best way to arrange these badges in a row?

I'm struggling to horizontally align these badges next to each other, as inline-block isn't working and they keep stacking vertically instead of side by side. How can I achieve the alignment shown in the image below? This is the desired appeara ...

htmlcsstwitter-bootstrapbootstrap-5

Looking to locate the child div elements within a parent div

I am having trouble determining the individual lengths of child divs within parent classes that share the same name. For example: <div class="main-div"> <div class="parent"> <div class="child"></div> <div class= ...

javascriptjquerybootstrap-4

Selenium is encountering a maximum call stack size error while attempting to access Highcharts

This particular issue is a bit complex. My goal is to retrieve highchart data from a selenium-controlled Chrome browser using the driver.execute_script method and injecting some JavaScript: driver.execute_script("return $('#chartID').highcharts( ...

javascriptgoogle-chromeseleniumhighcharts

Prevent event bubbling on a link generated by an Angular directive that includes transclusion

I am currently developing a directive that adds a link to a DIV element through transclusion. However, I am facing an issue where I want to execute specific functionality when the link is clicked without being redirected to the dummy href (in this case goo ...

javascriptangularjs

Using Multer to upload an image in a React application

I am currently working on a project with two essential files: the server file and the register file. In the server file, I have included the following code snippet: import multer from 'multer'; const storage = multer.diskStorage({ destinatio ...

javascriptreactjsnode.js

Arranging column contents neatly on small screens

Although there are similar answers available, I want to address those who are trying to prevent their columns from stacking on XS display. Despite having two columns, the content is still stacking at certain displays. This issue is occurring while using B ...

csstwitter-bootstrapbootstrap-4

Steps for adjusting the port number in a Vue.js CLI project

Is it possible to modify the Port number within a Vue-CLI project in order for it to operate on a different port other than 8080? ...

javascriptnode.jsvue.jsvuejs2vue-cli

Guide to incorporating Bootstrap's bg-variant modifier

I am working with some buttons <button type="button" class="myButton btn btn-primary">foo</button> <button type="button" class="myButton btn btn-secondary">bar</button> ... I want to add transparency to the background colors of th ...

sassbootstrap-4scss-mixins

Is there a way to log and process div data posted using jQuery in CSS format?

I am looking to extract and log a JavaScript-calculated result from an anonymous survey created using a WordPress plugin. The generated HTML code is: <div ref="fieldname57_1" class="cff-summary-item"> <span class="summary-field-title cff-summary ...

jquerycss