Copying input tag value in input tag in popup modal
Question
I would like to make an input in a table in my modal a copy of the input outside of the modal.
So for example. If I change the input value in the input tag outside the modal, the input tag inside the modal would show the same value
Here is my code for the outer modal:
<a class="justify-content-between d-flex">
<p style="display: flex;justify-content: center;align-items: center;height: 50px;"><strong>Price</strong></p>
<div class="input-group-addon currency-symbol" style="display: flex;justify-content: center;align-items: center;height: 50px;">$</div>
<input type="text" id="inlineFormInputGroup" value="200" placeholder="200" readonly="readonly" size="8" style="background-image: url('http://placehold.it/350x25/F9F9F9');-webkit-appearance: none;border: none">
<div class="input-group-addon currency-addon">
<select class="currency-selector" onchange="changeCurrency()">
<option data-symbol="$">USD</option>
<option data-symbol="₦">Naira</option>
</select>
</div>
</a>
The value in this input is controlled by this script, so if a user selects a different currency the value in the input tag changes based on the currency selected and current rate
JavaScript
function changeCurrency() {
$.getJSON("https://openexchangerates.org/api/latest.json?app_id=1678605ef04949d78e8abc946250b370",
function(data) {
var currency = $('.currency-selector').val();
var useramount = 200;
if (currency == "USD") {
$('#inlineFormInputGroup').val(data.rates.USD * useramount);
} else if (currency == "Naira") {}
);
The value in this input is controlled by this script, so if a user selects a different currency the value in the input tag changes based on the currency selected and current rate.
I would like to copy the number in the above input in this input tag
<div class="modal fade" id="TwoMonthsModal" role="dialog">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Payment over two months</h4>
</div>
<div class="modal-body">
<table>
<head>
<tr>
<th>Payment Due Date</th>
<th>Amount</th>
</tr>
</thead>
<body>
<tr>
<td data-column="Month">17 May 2020</td>
<td data-column="Amount"><input type="text" id="FirstMonth" value="" readonly="readonly" size="8" style="background-image: url('http://placehold.it/350x25/F9F9F9');-webkit-appearance: none;border: none" ></td>
</tr>
</tbody>
</table>
</div>
This is how the modal is launched (when a user selects an item in a dropdown menu)
$('#installments').change(function() {
if (this.value == '1') {
$('#TwoMonthsModal').modal('show');
}
});
I am using this to try and copy the first input value into the second
$("input[name=inlineFormInputGroup]").on('keyup', function() {
$('#FirstMonth').html($(this).val());
});
The problem is that the value is not being copied from the first input tag (outside the modal) into the second one (inside the modal)
2 answers
solution1
0 2020-05-07 11:33:41
as I can understand, you want to copy the value of #inlineFormInputGroup and want to show it in #FirstMonth, but the #FirstMonth is in modal and that is hidden by default and you are launching it on the change value in select.
so you need to get the value on select change, try this.
$('.currency-selector').on('change', function() {
var valueOutOfModal = $("input[name=inlineFormInputGroup]").val();
// make sure the modal's display is block before the next line execution
$('#FirstMonth').val(valueOutOfModal );
});
solution2
0 ACCPTED 2020-05-07 12:51:29
Whenever you change the value of your input using select you can call another function which will update your input which is inside your modal-box.
Demo code :
changeCurrency(); function changeCurrency() { var currency = $('.currency-selector').val(); var useramount = 200; $.getJSON("https://openexchangerates.org/api/latest.json?app_id=1678605ef04949d78e8abc946250b370", function(data) { if (currency == "USD") { $('#inlineFormInputGroup').val(data.rates.USD * useramount); } else if (currency == "Naira") { $('#inlineFormInputGroup').val(data.rates.NAD * useramount); } //calling function update_value(); }); } function update_value() { //getting current value of input var currentvalue = $("#inlineFormInputGroup").val(); //setting value of input inside modal $('#FirstMonth').val(currentvalue); } $('#installments').change(function() { if (this.value == '1') { $('#TwoMonthsModal').modal('show'); }else if (this.value == '2') { $('#TwoMonthsModal').modal('show'); } });
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script> <a class="justify-content-between d-flex"> <p style="display: flex;justify-content: center;align-items: center;height: 50px;"><strong>Price</strong></p> <div class="input-group-addon currency-symbol" style="display: flex;justify-content: center;align-items: center;height: 50px;">$</div> <input type="text" id="inlineFormInputGroup" value="200" placeholder="200" readonly="readonly" size="8" style="background-image: url('http://placehold.it/350x25/F9F9F9');-webkit-appearance: none;border: none"> <div class="input-group-addon currency-addon"> <select class="currency-selector" onchange="changeCurrency()"> <option data-symbol="$">USD</option> <option data-symbol="₦">Naira</option> </select> </div> </a> Select this: <select id="installments" > <option value="">--Select one--</option> <option value="1">1</option> <option value="2">2</option> </select> <:-- Trigger the modal with a button <button type="button" class="btn btn-info" data-toggle="modal" data-target="#TwoMonthsModal">Open Modal</button>---> <div class="modal fade" id="TwoMonthsModal" role="dialog"> <div class="modal-dialog modal-lg"> <div class="modal-content"> <div class="modal-header"> <h4 class="modal-title">Payment over two months</h4> </div> <div class="modal-body"> <table> <head> <tr> <th>Payment Due Date</th> <th>Amount</th> </tr> </thead> <body> <tr> <td data-column="Month">17 May 2020</td> <td data-column="Amount"><input type="text" id="FirstMonth" value="" readonly="readonly" size="8" style="background-image: url('http.//placehold;it/350x25/F9F9F9'):-webkit-appearance; none:border: none"></td> </tr> </tbody> </table> </div>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.