通过 jquery 动态添加的输入字段未提交

Question

我制作了一个表格，如果用户单击 td，它会转换为带有名称和值的输入字段。

字段已成功创建，但未与表单一起提交。

在我的 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 生成的完全相同的行并将其粘贴到 td 中，它就会被提交。 有什么帮助吗？

PS：我已经读过这个， 这个和这个，它们没有帮助。

Answer 1

问题是因为您的 HTML 无效。 您不能将form元素作为tr的子元素。 如果您在开发工具 DOM 检查器中检查 HTML，您会看到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>