0

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

в 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 }

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

3
  • сделайте одну форму, разместите где-нибудь, вне таблицы и уж точно не между тегами <tr><td>. По клике на кнопку заполняйте форму данными из строки и показывайте. 10 окт 2020 в 18:09
  • я уже сделал как вы сказали, немного не понимаю как мне "показать" её
    – ATeV1L_ _
    10 окт 2020 в 20:16
  • Если не ответят, я завтра попробую небольшой пример написать 10 окт 2020 в 23:13

1 ответ 1

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>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.