[英]Copying input tag value in input tag in popup 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>
此输入中的值由此脚本控制,因此如果用户选择不同的货币,则输入标签中的值会根据所选货币和当前汇率而变化
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") {}
);
此输入中的值由此脚本控制,因此如果用户选择不同的货币,则输入标签中的值会根据所选货币和当前汇率而变化。
我想在此输入标签中复制上述输入中的数字
<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>
这就是模式的启动方式(当用户在下拉菜单中选择一个项目时)
$('#installments').change(function() {
if (this.value == '1') {
$('#TwoMonthsModal').modal('show');
}
});
我正在使用它来尝试将第一个输入值复制到第二个
$("input[name=inlineFormInputGroup]").on('keyup', function() {
$('#FirstMonth').html($(this).val());
});
问题是该值没有从第一个输入标记(模态外部)复制到第二个输入标记(模态内部)
据我所知,您想复制#inlineFormInputGroup 的值并希望在#FirstMonth 中显示它,但是#FirstMonth 处于模态并且默认情况下是隐藏的,并且您在select 中的更改值上启动它。
所以你需要得到 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 );
});
每当您使用 select change
输入值时,您都可以调用另一个function
它将更新您在模态框中的input
。
演示代码:
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.