在弹出模式的输入标签中复制输入标签值
[英]Copying input tag value in input tag in popup modal
问题描述
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 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 个解决方案
解决方案1
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.据我所知，您想复制#inlineFormInputGroup 的值并希望在#FirstMonth 中显示它，但是#FirstMonth 处于模态并且默认情况下是隐藏的，并且您在select 中的更改值上启动它。
so you need to get the value on select change, try this.所以你需要得到 select 变化的值，试试这个。
$('.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 );
});
解决方案2
0 已采纳 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.每当您使用 select change输入值时，您都可以调用另一个function它将更新您在模态框中的input 。
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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.