Append from Toastr

Question

My desired behavior - On a page click the words "click me", this brings up the Toastr, and has a text box, the user types information in the Toastr Text box then clicks "Append" and this adds the text from the Toastr Textbox To the page.

So far, I can Append from a text box on a page, and I can make a toastr with a textbox with an append button (with the same code from the page), but I havent figured out how to append from the toastr.

$(document).ready(function() {
  $('#clickText').click(function() {
         toastr["success"]('<div><input class="input-small" value="textbox" id="first-name"/>&nbsp;</div><div><button type="button" id="okBtn" class="btn btn-primary">Close me</button><button type="button" id="inPut" class="btn" style="margin: 0 8px 0 8px">Append</button></div>')

    
  });

 
});     
toastr.options = {
  "closeButton": true,
  "debug": false,
  "newestOnTop": false,
  "progressBar": false,
  "positionClass": "toast-top-right",
  "preventDuplicates": false,
  "onclick": null,
  "showDuration": "300",
  "hideDuration": "1000",
  "timeOut": 0,
  "extendedTimeOut": 0,
  "showEasing": "swing",
  "hideEasing": "linear",
  "showMethod": "fadeIn",
  "hideMethod": "fadeOut",
  "tapToDismiss": false
}

$(document).ready(function() {
  $('#inPut').click(function() {
    var FLname =  "<br>" +
        $('#first-name').val() + " ";

    $('#outPut').append(FLname);
    
  });
 
});     

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<!--Toastr Min CSS --> 
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/css/toastr.min.css'> 
<!--Toastr Min JS -->
 <script type='text/javascript' src='https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/js/toastr.min.js'></script>
 

<!--Script Links Above -->

<input type='text' maxlength="25" id='first-name' placeholder="First Name">

<button type="button" id="inPut" class="btn" style="margin: 0 8px 0 8px">Append</button>
 </div>

   



<div id ="clickText"> Click Me! </div>


<div id='outPut'>
    </div>

filling in the input with the placeholder First Name, then hitting append right next to the box, appends the text to the page,

clicking the "Click Me!" text, brings up the Toastr.- i havent made the close button work yet.

Answer 1

When you click to clickText btn this create new #inPut button and you need to assign click function for new button

Try to change this

$(document).ready(function() {
  $('#clickText').click(function() {
     toastr["success"]('<div><input class="input-small" value="textbox" id="first-name"/>&nbsp;</div><div><button type="button" id="okBtn" class="btn btn-primary">Close me</button><button type="button" id="inPut" class="btn" style="margin: 0 8px 0 8px">Append</button></div>')
 });
}); 

to

 $(document).ready(function() {
   $('#clickText').click(function() {
      toastr["success"]('<div><input class="input-small" value="textbox" id="first-name"/>&nbsp;</div><div><button type="button" id="okBtn" class="btn btn-primary">Close me</button><button type="button" id="inPut" class="btn" style="margin: 0 8px 0 8px">Append</button></div>')
      $('#inPut').click(function() {
      var FLname =  "<br>" +
        $('#first-name').val() + " ";

      $('#outPut').append(FLname);

       });
     });
  });

make sure to remove - <input type='text' maxlength="25" id='first-name' placeholder="First Name">

from your other portion of code ( the code outside of the toastr)