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

Question

I have made a table where if a user clicks on a td it converts into an input field with name and value.

The fields are created successfully but are not submitted along with the form.

In My 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>

In my 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>");
        }
    }
});

In form_hanlders/assign_query.php:

<?php 
print_r($_POST);
?>

Input fields dynamically added by jQuery don't show up in $_POST array. But if I manually type in the exact same line that jQuery generates and paste it in the td, it gets submitted. Any help?

PS: I have already read this , and this and this and they don't help.

Answer 1

The problem is because your HTML is invalid. You cannot have a form element as a child of a tr . If you check the HTML in the dev tools DOM inspector you'll see that the form element has either been moved outside of the table (so it no longer contains the input or textarea elements) or it has been removed completely.

To fix the problem the form needs to wrap the entire table , like this:

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