При нажатии на кнопку должна появится форма

Question

есть кнопка "изменить" при её нажатии должна появляться форма с изменением записи

в js скрипте я написал функцию show

function show(state) {
    document.getElementById('form').style.display = state;

}

где на главной странице у меня расположена форма, которая должная открыться по нажатию кнопки, на ней висит display: none;

я прописал onclick в кнопку с параметром block, чтобы форма изменила none на block по нажатию

код добавления данных в таблицу

while ($row = mysqli_fetch_array($result)) {?>
                <tr>
                    <form action="" method="get" role = "form">
                        <td><?php echo $row['vk_id'];?></td>
                        <td><?php echo $row['name'];?></td>
                        <td><?php echo $row['qqqq'];?></td>
                        <td><?php echo $row['wwww'];?></td>
                        <td><input type="submit" name="submitDeleteBtn" value="<?php echo $row['id']?>" required></td>
                    </form>
                    <td><button onclick="show('block')" class="btn btn-success btn-sm">Изменить</button></td>
                </tr>
            <?php }

буду рад любому совету!

Answer 1

Вы для каждой строки делаете форму, это не особо удобно, если их будет много, да и не нужно.

Можно сделать одну форму и при клике на кнопку просто заполнять ее данными.

В примере: упрощенная таблица, за ней форма. С помощью js получаем из строки таблицы нужные данные и подставляем в форму. Я не знаток js, поэтому не берите за пример, писал на коленке и для простоты использовал jquery.

Ну и по кнопке сохранить сейчас отправляется post запрос на ту же страницу.

$('table input').on('click', function() {
  let $row = $(this).parent().parent();
  let $rowColumns = $row.children('td');
  let rowData = {};
  $('#table_row input[name=id]').val($row.data('id'));
  $('#table_row input[name=vk_id]').val($rowColumns[0].innerHTML);
  $('#table_row input[name=row_name]').val($rowColumns[1].innerHTML);
  if ($('#table_row').css('display') === 'none') {
    toggleForm();
  }
});
$('#cansel').on('click', toggleForm);

function toggleForm() {
  $('#table_row').toggle();
}

#table_row {
  background-color: #eee;
  padding: 5px;
  display: none;
  position: fixed;
  top: 20%;
  left: 50%;
  width: 200px;
  margin: 0 0 0 -40%;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tr>
    <th>vk_id</th>
    <th>row_name</th>
    <th></th>
  </tr>
  <tr data-id="1">
    <td>34</td>
    <td>row1</td>
    <td><input type="button" value="изменить" /></td>
  </tr>
  <tr data-id="2">
    <td>99</td>
    <td>row2</td>
    <td><input type="button" value="изменить" /></td>
  </tr>
</table>

<form id="table_row" method="post">
  <input type="hidden" name="id" />
  <input name="vk_id" />
  <input name="row_name" />
  <input type="submit" value="сохранить" />
  <input id="cansel" type="button" value="отмена" />
</form>

БЛОГ НА HUSL

При нажатии на кнопку должна появится форма

Ответы (1 шт):