изменить входные данные, используя модальное поле bootstrap - PullRequest
Новая
       36

изменить входные данные, используя модальное поле bootstrap

1 голос
/ 24 апреля 2020

Я загружаю динамические c данные формы ввода в bootstrap модальное окно, используя jquery:

html: 

<table width="100%" class="table table-striped table-bordered table-hover">
  <thead>
    <th>Firstname</th>
    <th>Lastname</th>
    <th>Address</th>
    <th>Action</th>
  </thead>
  <tbody>

    <tr>
      <td><input type="text" id="first1" value="name1"></td>
      <td><input type="text" id="last1" value="last1"></td>
      <td><button type="button" class="btn btn-success edit" value="1"> Edit</button></td>
    </tr>
            <tr>
      <td><input type="text" id="first2" value="name2"></td>
      <td><input type="text" id="last2" value="last2"></td>
      <td><button type="button" class="btn btn-success edit" value="2"> Edit</button></td>
    </tr>
  </tbody>
</table>
<div class="modal fade" id="edit" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <center>
          <h4 class="modal-title" id="myModalLabel">Edit User</h4>
        </center>
      </div>
      <div class="modal-body">
        <div class="container-fluid">
          <div class="form-group input-group">
            <span class="input-group-addon" style="width:150px;">Firstname:</span>
            <input type="text" style="width:350px;" class="form-control" id="efirst">
          </div>
          <div class="form-group input-group">
            <span class="input-group-addon" style="width:150px;">Lastname:</span>
            <input type="text" style="width:350px;" class="form-control" id="elast">
          </div>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal"> Cancel</button>
        <button type="button" class="btn btn-success"> Update</button>
      </div>
    </div>
  </div>
</div>

JS: 

$(document).ready(function() {
  $(document).on('click', '.edit', function() {
    var id = $(this).val();
    var first = $('#first' + id).val();
    var last = $('#last' + id).val();

    $('#edit').modal('show');
    $('#efirst').val(first);
    $('#elast').val(last);
  });
});

на первом шаге Этот код работал верно и загружает данные в модальный режим bootstrap, но на втором шаге, как я могу редактировать / изменять входные данные с помощью модального после нажатия кнопки обновления и устанавливать исходные данные.

демо здесь

1 Ответ

2 голосов
/ 24 апреля 2020

Как это?

JSFIDDLE

https://jsfiddle.net/m79vrtsx/

$(document).ready(function() {
  $(document).on('click', '.edit', function() {
    var id = $(this).val();
    var first = $('#first' + id).val();
    var last = $('#last' + id).val();

    $('#edit').modal('show');
    $('#efirst').val(first);
    $('#elast').val(last);
    $('.submit_btn').val(id);
  });

  $(document).on('click', '.submit_btn', function() {
    var id = $(this).val();
    var first = $('#efirst').val();
    var last = $('#elast').val();

    $('#first' + id).val(first);
    $('#last' + id).val(last);
    $('#edit').modal('hide');
  });
});
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">

<table width="100%" class="table table-striped table-bordered table-hover">
  <thead>
    <th>Firstname</th>
    <th>Lastname</th>
    <th>Address</th>
    <th>Action</th>
  </thead>
  <tbody>

    <tr>
      <td><input type="text" id="first1" value="name1"></td>
      <td><input type="text" id="last1" value="last1"></td>
      <td><button type="button" class="btn btn-success edit" value="1"> Edit</button></td>
    </tr>
    <tr>
      <td><input type="text" id="first2" value="name2"></td>
      <td><input type="text" id="last2" value="last2"></td>
      <td><button type="button" class="btn btn-success edit" value="2"> Edit</button></td>
    </tr>
  </tbody>
</table>
<div class="modal fade" id="edit" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" data-id="1">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <center>
          <h4 class="modal-title" id="myModalLabel">Edit User</h4>
        </center>
      </div>
      <div class="modal-body">
        <div class="container-fluid">
          <div class="form-group input-group">
            <span class="input-group-addon" style="width:150px;">Firstname:</span>
            <input type="text" style="width:350px;" class="form-control" id="efirst">
          </div>
          <div class="form-group input-group">
            <span class="input-group-addon" style="width:150px;">Lastname:</span>
            <input type="text" style="width:350px;" class="form-control" id="elast">
          </div>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal"><span class="glyphicon glyphicon-remove"></span> Cancel</button>
        <button type="button" class="btn btn-success submit_btn" value=""> Update</button>
      </div>
    </div>
  </div>
</div>

<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
...