Поля ввода добавляются динамически через JQuery не отправляется

Question

Я создал таблицу, в которой, если пользователь нажимает на тд, он преобразуется в поле ввода с именем и значением.

Поля создаются успешно, но не отправляются вместе с формой.

В моем HTML / PHP:

            <tr>
            <form action='form_handlers/assign_query.php' method='POST'>
                    <td >{$row['id']}</td>
                    <td class='editable-td' data-name='name'>{$row['name']}</td>
                    <td class='editable-td' data-name='phone_no'>{$row['phone_no']}</td>
                    <td class='editable-td' data-name='email'>{$row['email']}</td>
                    <td class='editable-td' data-name='type'>{$row['type']}</td>
                    <td class='short-cell editable-td textarea'  data-name='query'>
                        <div class='scrollable'>{$row['query']}</div>
                    </td>
                    <td class='editable-td' data-name='agents'>{$row['agents']}</td>
                    <td class='editable-td'><button type='submit' class='cstm-btn' name='update_query'><i class='fa fa-pencil'></i></button></td>
            </form>
            </tr>

В моих Js:

$('.editable-td').dblclick(function() {
    if($(this).hasClass('enabled')) {
        console.log('already enabled');
    } else {
        $(this).addClass('enabled');
        if($(this).hasClass('textarea')) {
            var text_content = $(this).find('.scrollable').html();
            var name = $(this).data('name');
            console.log(name);
            $(this).html("<textarea name='"+name+"'>"+ text_content +"</textarea>");
        }
        else {
            var text_content = $(this).html();
            var name = $(this).data('name');
            console.log(name);
            $(this).html("<input type='text' name='"+name+"' value='"+ text_content +"' ></input>");
        }
    }
});

В form_hanlders / assign_query.php:

<?php 
print_r($_POST);
?>

Поля ввода динамическидобавленные jQuery не отображаются в массиве $ _POST. Но если я вручную введу ту же самую строку, которую генерирует jQuery, и вставлю ее в тд, она будет отправлена. Любая помощь?

PS: я уже прочитал это и это и это , и они не помогают.

Answer 1

Проблема в том, что ваш HTML неверен. Вы не можете иметь элемент form в качестве дочернего элемента tr. Если вы проверите HTML в инспекторе DOM инструментов разработки, вы увидите, что элемент form либо перемещен за пределы таблицы (поэтому он больше не содержит элементы input или textarea), либо он был удаленполностью.

Чтобы решить проблему, форма должна обернуть всю table, например:

<form action="form_handlers/assign_query.php" method="POST">
  <table>
    <tbody>
      <tr>
        <td>{$row['id']}</td>
        <td class="editable-td" data-name="name">{$row['name']}</td>
        <!-- additional cells... -->
      </tr>
    </tbody>
  </table>
</form>