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>

You may refer to this document: jqueryui.com/dialog/#modal-form to learn more — Chaska
– Chaska, Commented Oct 3, 2019 at 6:47

Carl Binalla · Accepted Answer · 2019-10-03 06:49:04Z

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>

Negi Rox · Accepted Answer · 2019-10-03 07:06:13Z

0

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.

answered Oct 3, 2019 at 7:06

Negi Rox

3,9421 gold badge14 silver badges18 bronze badges

Comments

mohammad reza goudarzi · Accepted Answer · 2019-10-03 07:06:32Z

0

You need to change the script as bellow:

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

answered Oct 3, 2019 at 7:06

mohammad reza goudarzi

363 bronze badges

Collectives™ on Stack Overflow

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

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related