Копирование значения тега ввода в тег ввода в модальном всплывающем окне - PullRequest
Новая
       0

Копирование значения тега ввода в тег ввода в модальном всплывающем окне

1 голос
/ 07 мая 2020

Я хотел бы сделать ввод в таблице в моем модальном окне копией ввода за пределами модального.

Так, например. Если я изменю входное значение во входном теге вне модального окна, входной тег внутри модального окна покажет то же значение

Вот мой код для внешнего модального окна: 

<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 ]

0 голосов
/ 07 мая 2020

Всякий раз, когда вы change значение вашего ввода с помощью select, вы можете вызвать другой 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>
0 голосов
/ 07 мая 2020

насколько я понимаю, вы хотите скопировать значение #inlineFormInputGroup и хотите показать его в #FirstMonth, но #FirstMonth находится в модальном режиме и по умолчанию скрыт, и вы запускаете его при изменении значения в 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 );

  });
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...