在彈出模式的輸入標簽中復制輸入標簽值
[英]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());
});
問題是該值沒有從第一個輸入標記（模態外部）復制到第二個輸入標記（模態內部）
2 個解決方案
解決方案1
0 2020-05-07 11:33:41
據我所知，您想復制#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 );
});
解決方案2
0 已采納 2020-05-07 12:51:29
每當您使用 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>
將值分配到3個輸入標記中
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.