How to make a Modal popup to take an input value using jQuery or Javascript?

Question

I want to click my text field and have a modal popup open to enter text in the modal, when I close the modal the text will appear on my text field

I just tried in js but it's not working and I'm looking for jQuery method.. but I'm new to jQuery.

document.getElementById('narrat_ok').myfunction('click', function() {
  document.getElementById('cash_narrat').value = document.getElementById('cash_text').value
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<td>
  <input type="text" id="cash_narrat" placeholder="Enter here" class="form-control narate" pattern="[a-zA-Z0-9-_.]{1,20}" name="cash_narrat" data-toggle="modal" data-target="#narratModal" />
</td>

<div class="modal fade" id="narratModal" tabindex="-1" role="dialog" aria-labelledby="narratModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close cash-dismiss" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title modal_head" id="narratModalLabel">Narration</h4>
      </div>
      <div class="modal-body">
        <label class="modal_note">Note: Only alphabets A-Z a-z number 0-9 and characters % & [] () - _ . , are allowed in text</label>
        <textarea class="cash_text" pattern="[a-zA-Z0-9-_.]{1,20}" id="cash_text">
                                                                Enter Here...
                                                            </textarea>
        <span class="modal_valid">0/200 Characterts entered</span>
      </div>
      <div class="modal-footer narr_footer">
        <button type="button" class="btn btn-primary cashmodal_btn" id="narrat_ok" data-dismiss="modal">OK</button>
      </div>
    </div>
  </div>
</div>

Answer 1

You need to change the script as bellow:

$(document).ready(function(){
   $("#narrat_ok").click(function(){
      $("#cash_narrat").val($("#cash_text").val())
   });
})

Answer 2

you can use below function in jquery.

$(document).ready(function(){
   $("#narrat_ok").on('click',function(){
       $("#cash_narrat").val($("#cash_text").val())
   })
})

here is working demo.

Answer 3

One way to do this is catch the hide.bs.modal event of Bootstrap's modal. From there, you can just get the value of the input inside the modal then put it in the input outside.

For now, it will get the value every time the modal closes, regardless if you clicked the button or not

I also removed the text in the modal to simplify it

$('#narratModal').on('hide.bs.modal', function() {
  let val = $('.myInput').val();
  $('#cash_narrat').val(val);
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<td>
  <input type="text" id="cash_narrat" placeholder="Enter here" class="form-control narate" pattern="[a-zA-Z0-9-_.]{1,20}" name="cash_narrat" data-toggle="modal" data-target="#narratModal" />
</td>

<div class="modal fade" id="narratModal" tabindex="-1" role="dialog" aria-labelledby="narratModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title modal_head" id="narratModalLabel">Narration</h4>
        <button type="button" class="close cash-dismiss" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
      </div>
      <div class="modal-body">
        <label class="modal_note">Input</label>
        <input class="myInput form-control form-control-sm" />
      </div>
      <div class="modal-footer narr_footer">
        <button type="button" class="btn btn-primary cashmodal_btn" id="narrat_ok" data-dismiss="modal">OK</button>
      </div>
    </div>
  </div>
</div>

Or if you really want to use only the button, here's another version

$('.cashmodal_btn').on('click', function() {
  let val = $('.myInput').val();
  $('#cash_narrat').val(val);
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<td>
  <input type="text" id="cash_narrat" placeholder="Enter here" class="form-control narate" pattern="[a-zA-Z0-9-_.]{1,20}" name="cash_narrat" data-toggle="modal" data-target="#narratModal" />
</td>

<div class="modal fade" id="narratModal" tabindex="-1" role="dialog" aria-labelledby="narratModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title modal_head" id="narratModalLabel">Narration</h4>
        <button type="button" class="close cash-dismiss" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
      </div>
      <div class="modal-body">
        <label class="modal_note">Input</label>
        <input class="myInput form-control form-control-sm" />
      </div>
      <div class="modal-footer narr_footer">
        <button type="button" class="btn btn-primary cashmodal_btn" id="narrat_ok" data-dismiss="modal">OK</button>
      </div>
    </div>
  </div>
</div>