Jquery Получить поле входного массива и отобразить на Bootsrap Modal

Question

У меня есть входные данные для массивов.

<input type="text" name="owner[]" value="Rey">
<input type="text" name="owner[]" value="Jan">

Я уже передал это значение в Jquery, но как я могу отобразить поля этого массива на моем модале. Тот же дисплей, что и я:

 $(document).on("click", ".open_modal", function () {
    $('input[name^="owner"]').each(function() {
        alert($(this).val());  already displaying the list of array in the alert text
        $(".modal-body #owner_value").val();
    });
});

Мой модал

    <div class="modal modal-success fade" id="acceptModal">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-body">

            <input type="hidden" name="owner_modal" id="owner_value">
            <p id="owner_view"></p>

          </div>
        </div>
      </div>
    </div>

Answer 1

Вы можете использовать map() для построения массива всех значений, а затем join() их вместе перед отображением. Попробуйте это:

$(document).on("click", ".open_modal", function() {
  var values = $('input[name^="owner"]').map((i, el) => el.value).get().join(',');
  $("#owner_value").val(values);
  $("#owner_view").html(values);

  $('#acceptModal').dialog('open');
});

// jQuery UI modal setup
$('#acceptModal').dialog({
  autoOpen: false
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" />
<input type="text" name="owner[]" value="Rey">
<input type="text" name="owner[]" value="Jan">
<button class="open_modal">Open modal</button>

<div class="modal modal-success fade" id="acceptModal">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-body">
        <input type="text" name="owner_modal" id="owner_value">
        <p id="owner_view"></p>
      </div>
    </div>
  </div>
</div>

Обратите внимание, что селектор [name^="owner"] также захватывает вход name="owner_modal" в самом модале, следовательно, дополнительный , на выходе. Я не уверен, что это намеренно, поэтому я оставил это в примере. Если вы не хотите, чтобы это происходило, измените имя поля в модальном режиме или улучшите используемый селектор.