added by jQuery sends nothing

Question

I'm trying a little page with a HTML form and inside it, jQuery adds file fields having the name appended with [] so the PHP target receives it as array of files. But the PHP isn't receiving the files.

A sample:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
    $("#add").click(function() {
        $("#deps").before("<tr id=\"dependency\"><td>Dependency:</td><td><input type=\"file\" name=\"deps[]\" /></td></tr>");
    });
    $("#rem").click(function() {
        $("#dependency").remove();
    });
});
</script>
    <table>
        <tr>
            <td>
                <button id="add">+ Dependency</button>
            </td>
            <td>
                <button id="rem">- Dependency</button>
            </td>
        </tr>
    <form method="POST" enctype="multipart/form-data" action="target.php">
        <tr id="deps">
            <td></td>
            <td><input type="submit" name="submit" value="send" /></td>
        </tr>
    </form>
</table>

In target.php:

$deps = $_FILES['deps'];

But no files are sent. What should i do?

Possible duplicate of [PHP--parsing multipart form data](https://stackoverflow.com/questions/1075513/php-parsing-multipart-form-data) — messerbill, Mar 08 '19 at 18:22
That's also invalid html. A `
` is not a recognized child of a ``. https://html.spec.whatwg.org/multipage/tables.html#the-table-element Tables are one of the most strict html constructs that exist. You need to move your form outside so it encapsulates your table, or if all your form fields are in one td, you could move it inside the td. — Taplar, Mar 08 '19 at 18:24

score 0 · Answer 1 · answered Mar 08 '19 at 18:38

Wrapping the table in a form is part of the problem, however you have other issues that will come up. The below code solves those. A button's default state is submit, and you can't have multiple objects with the same id (hitting + dependency)

<html>
<head>
</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
    $("#add").click(function() {
        $("#deps").before("<tr><td>Dependency:</td><td><input type='file' name='deps[]' /><button type='button' class='rem'>- Dependency</button></td></tr>");
    });
    $(document).on("click",".rem",function() {
        $(this).parents("tr").remove();
    });
});
</script>
<form method="POST" enctype="multipart/form-data" action="target.php">
    <table>
        <tr>
            <td>
                <button type="button" id="add">+ Dependency</button>
            </td>
            <td>

            </td>
        </tr>
            <tr id="deps">
            <td></td>
            <td><input type="submit" name="submit" value="send" /></td>
        </tr>
</table>
    </form>
</body>
</html>

score 0 · Answer 2 · answered Mar 10 '19 at 17:46

Thank you guys. Ditched all the table thing just in case and now it works.

<html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
        <script src="script.js"></script>
    </head>
    <body>
        <form method="POST" enctype="multipart/form-data" action="target.php">
            <p>Course Name:&nbsp;<input type='text' name='courseName' /></p>
            <p>Resource:&nbsp;<input type='file' name='file' /></p>
            <p>Dependencies:&nbsp;<button type='button' id='add'>+</button></p>
            <div id="deps">
                <p><input type="submit" name="submit" value="send" /></p>
            </div>
        </form>
    </body>
</html>

scrtipt.js is:

$(document).ready(function() {
 $("#add").click(function() {
  $("#deps").prepend("<p><input type='file' name='deps[]' /><button type='button' class='rem'>- </button></p>");
 });
 $(document).on("click",".rem",function() {
  $(this).parents("p").remove();
 });
});

Basicaly changed imvain2's code.

added by jQuery sends nothing

2 Answers2