Получение значений из динамически созданных входных данных из таблицы

Question

У меня есть таблица

   <form id="project-form">
                    <table id="project-table" class="table table-striped table-inverse table-responsive">
                        <caption>Projects</caption>
                        <thead class="thead-inverse">
                            <tr>
                                <th scope="col">#</th>
                                <th scope="col">Project name</th>
                                <th scope="col">Description</th>
                                <th scope="col">Estimated time (min)</th>
                                <th scope="col">Actual time (min)</th>
                                <th scope="col">Add task</th>
                                <th scope="col">Delete project</th>
                            </tr>
                        </thead>
                        <tbody id="project-body">


                        </tbody>
                    </table>
                </form>

Эта таблица заполнена данными из AJAX запроса GET

function getProjects() {
  $.ajax({
    method: 'GET',
    dataType: 'json',
    data: {
      functionToCall: 'project',
    },
    url: 'http://localhost/WBS/php/api/requests/get.php',
    success: (response) => {
      $.each(response, function () {
        $.each(this, function (index, value) {
          $('#project-body').append(
            `
            <tr>
                <td>
                  <input class="form-control" type="hidden" name="projectid" id="projectid"  value="${value.projectid}">
                </td>
                <td>
                  <input class="form-control" type="text" name="projectName" id="projectName" value="${value.title}">
                </td>
                <td>
                  <input class="form-control" type="text" name="description" id="description"  value="${value.description}">
                </td>
                <td>
                  <input class="form-control" type="text" name="estimatedTime" id="estimatedTime"  value="${value.Estimated_time}">
                </td>
                <td>
                  <input class="form-control" type="text" name="actualTime" id="actualTime"  value="${value.Actual_time}">
                </td>
                <td>
                  <a id="addTask" class="btn btn-info" href="Overview.html?id=${value.projectid}" role="button">
                    <i class="fa fa-angle-right" aria-hidden="true"> </i> Add task
                  </a>
                </td>
                <td>
                  <button type="button" id="deleteProject" name="deleteProject" class="btn btn-danger">
                    <i class="fa fa-angle-right" aria-hidden="true"> </i> Delete project
                  </button>
                </td>
            </tr>

            `
          );
        });
      });
    },
    error: () => {
      console.error('Something went wrong with the getProjects function');
    },
  });
}

Также есть возможность динамически добавлять новую строку входы в таблицу

function addProject() {
  event.preventDefault();

  $('#project-body').append(

    `
        <tr>
            <td>
              <input class="form-control" type="hidden" name="projectid" id="projectid" >
            </td>
            <td>
              <input class="form-control" type="text" name="projectName" id="projectName">
            </td>
            <td>
              <input class="form-control" type="text" name="description" id="description">
            </td>
            <td>
              <input class="form-control" type="text" name="estimatedTime" id="estimatedTime">
            </td>
            <td>
              <input class="form-control" type="text" name="actualTime" id="actualTime">
            </td>
            <td>
              <a id="addTask" class="btn btn-info" href="Overview.php" role="button">
                <i class="fa fa-angle-right" aria-hidden="true"> </i> Add task
              </a>
            </td>
            <td>
              <button type="button" id="deleteProject" name="deleteProject" class="btn btn-danger">
                <i class="fa fa-angle-right" aria-hidden="true"> </i> Delete project
              </button>
            </td>
        </tr>

        `
  );
}

Я отправляю все свои данные на эту кнопку

<button id="saveProjects" form="project-form" class="btn btn-info" type="button"><i class="fa fa-angle-right" aria-hidden="true"></i> Save changes</button>

В готовом документе я обрабатываю все мои события onclick

$(document).ready(() => {

  $('#saveProjects').on('click', () => {
    uploadProjects();
  });

  $('#addProject').on('click', () => {
    addProject();
  });
});

На моей PHP стороне у меня есть класс, который обрабатывает все мои запросы POST, внутри этого класса есть функция, которая будет обрабатывать загрузку новых проектов

    public function uploadProject()
    {
        try {
            $title = $_POST["projectName"];
            $description = $_POST["description"];
            $estimatedTime = $_POST["estimatedTime"];
            $actualTime = $_POST["actualTime"];

            $stm = $this->pdo->getCon();

            $PDOStatement = $stm->prepare("INSERT INTO projects (title,description,Estimated_time,Actual_time) VALUES(:title,:description,:Estimated_time,:Actual_time)");

            $PDOStatement->bindParam(':title', $title, PDO::PARAM_STR);
            $PDOStatement->bindParam(':description', $description, PDO::PARAM_STR);
            $PDOStatement->bindParam(':Estimated_time', $estimatedTime, PDO::PARAM_STR);
            $PDOStatement->bindParam(':Actual_time', $actualTime, PDO::PARAM_STR);

            $PDOStatement->execute();

            header('HTTP/1.1 200 OK');
        } catch (Exception  $th) {
            header("HTTP/1.0 404 Not Found");
            throw $th->getMessage();
        }
    }

Теперь отлаживаю мой PHP код , и все данные, которые я получаю в массиве POST, всегда будут соответствовать первой строке в таблице, например:

Допустим, у меня есть существующая строка внутри моей таблицы со значениями: Project name = Hello | Описание = World.

Я нажимаю кнопку добавления проекта, и в таблицу добавляется новая строка, я заполняю поля ввода внутри строки примерно таким: Имя проекта = Second table row | Description = Second description.

На сервере я всегда буду получать значения Hello и World, а не значения последней добавленной строки внутри таблицы.

Я немного погуглил и увидел только примеры того, как значение ОДНОГО динамически добавляемого ввода, а не новой строки.

Answer 1

Я думаю, вы можете переименовать свои входные данные, например:

 name="projectid[]"

Тогда PHP получит массив этих значений:

$total = count($_POST["projectid"]);
for ($i = 0; $i < $total; $i++) {
    $title = $_POST["projectName"][$i];
    $description = $_POST["description"][$i];
    $estimatedTime = $_POST["estimatedTime"][$i];
    $actualTime = $_POST["actualTime"][$i];

    // Your INSERT query is performed here
}