Writing data collected from a javascript prompt to a bootstrap card

user_2320476 0
Viewed 67

I have a javascript function that prompts me to enter a value I want to be able to write the value collected into a bootstrap card

        function GenerateCard() {
                var retVal = prompt("Enter action Name : ", "action name here");
                if (retVal !== null && retVal !== '') {
                    $('#actCard')
                        .clone()
                        .attr('id', 'action' + iCnt)
                        .appendTo("#container2");

                $("#action" + iCnt).html(retVal);

                    $("#container2").attr('style', 'border:solid 1px #555;');

                    iCnt = iCnt + 1;

                }
        }

Here is the code for the component. Value collected from prompt above should go in card-body and as I generate more they should be on different rows. I am cloning the actCard div.

How can I write into this inner div of the "actCard" and display in container2 div?

        <div class="me-3">
            <div class="border border-dark p-2 mb-3">
                <b>Actions</b>
            </div>
            <!-- start here Hidden div reserved for cloning-->
            <div id="actCard" class="card" style="display: none;" >
                <div class="card-body">
                   <!-write retval here -->
                </div>
            </div>          
            <!-- end here -->
            <div id="container2" style="display: none;"></div>
        </div>
jquery javascript
1 Answers

You can get reference of last div added inside container div using :last and then add your value there using .text().

Demo Code:

var iCnt = 1

function GenerateCard() {
  var retVal = prompt("Enter action Name : ", "action name here");
  if (retVal !== null && retVal !== '') {
    $('#actCard')
      .clone()
      .attr('id', 'action' + iCnt).attr("style", "")
      .appendTo("#container2 .row");
    $("#container2 .card:last .card-body ").html("<H4>"+retVal+"</H4>") //get last one and add text there

    $("#container2").attr('style', 'border:solid 1px #555;');

    iCnt = iCnt + 1;

  }
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<div class="me-3">
  <div class="border border-dark p-2 mb-3">
    <b>Actions</b>
  </div>
  <!-- start here Hidden div reserved for cloning-->
  <div id="actCard" class="col-sm-3" style="display: none;">
   <div class="card">
    <div class="card-body">
      
    </div>
    </div>
  </div>
  <!-- end here -->
  <div id="container2" class="container"> <div class="row"></div></div>
</div>
<button onclick="GenerateCard()">Click</button>

user_106064000
Related