Bootstrap модальное обновление данных

Question

Я пытаюсь передать данные из модема начальной загрузки в элемент ul. Это позволяет мне добавлять несколько элементов li, но это всегда первый элемент li и не изменяется. Пожалуйста, помогите.

<ul id="myList">
</ul>

<button type="button" id="btnLaunch" class="btn btn-primary">Add Item</button>
<div class="modal fade" id="myModal">
        <div class="modal-dialog">
          <div class="modal-content">
            <div class="modal-header">
              <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span>
              </button>
              <h4 class="modal-title">Modal title</h4>
            </div>
            <div class="modal-body">
              <p>Enter text:</p>
              <input type="text" id="txtInput">
            </div>
            <div class="modal-footer">
              <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
              <button type="button" id="btnSave" class="btn btn-primary">Save changes</button>
            </div>
          </div>
          <!-- /.modal-content -->
        </div>
        <!-- /.modal-dialog -->
      </div>
      <!-- /.modal -->
<script>
$(function() {
  $('#btnLaunch').click(function() {
    $('#myModal').modal('show');
  });

  $('#btnSave').click(function() {

    var value = $('input').val();
     $("#myList").append('<li><input type="checkbox" id="'+ value +'" name="'+ value +'" value="'+ value +'" checked>'+ value +'</li>');

        $('#myModal').modal('hide');


  });
});
</script>

Answer 1

Используйте это:

 $('#txtInput').val();

вместо

 $('input').val();

Вы используете только селектор ввода на каждой итерации, которая является слишком общей. Вы можете использовать селектор Id из Jquery, чтобы получить элемент ввода и получить из него новое значение. Вот рабочий пример.

 <script>
  $(function() {

   $('#btnLaunch').click(function() {
      $('#myModal').modal('show');
   });

   $('#btnSave').click(function() {

   var value = $('#txtInput').val();
   $("#myList").append('<li><input type="checkbox" id="'+ value +'" 
   name="'+ value +'" value="'+ value +'" checked>'+ value +'</li>');

   $('#txtInput').val('');

   $('#myModal').modal('hide');
  });
 });
 </script>