提交动态生成的表单

Question

I'm creating a website, and I have a form that gets created by Django. Once the page is loaded, the user can add text inputs to the form by clicking a button. The problem is that when the submit button is clicked, only the text inputs that were originally created by Django get submitted. In other words, the extra text inputs that were added dynamically don't get submitted.

I'm guessing that this is due to the fact that the submit button is only "aware" of form elements that were present when the page was loaded, and not dynamically loaded elements. With that in mind, I'm guessing I need to use some kind of Javascript in order to submit all of the form elements, including the dynamically added ones, but I can't figure out how to do it.

I've tried the jQuery submit function, but I don't really know what I'm supposed to do with it. Any tips would be appreciated!

EDIT: Here's a code snippet, which shows what the HTML looks like after 2 more text inputs have been added dynamically to the "origin"

<table>
    <form class="dataInput" action="/foner/116" method="post">
    <input type='hidden' name='csrfmiddlewaretoken' value='YYuqTzXUVosu1s2HD3zS00DpoPwQ7N0k' />
    <tbody class="origin">
        <tr>
            <th>
                <label>Origin:</label>
            </th>
            <td>
                <input id="id_Origin-0" maxlength="200" name="Origin-0" type="text" value="A native of Georgia" /> // PRESENT AT PAGE LOAD
            </td>
            <td>
                <button class="adder origin">+</button> // USER CLICKS THIS TO APPEND MORE TEXT INPUTS TO THE FORM
            </td>
        </tr>
        <tr>
            <th>
            </th>
            <td>
                <input type="text" value="" maxlength="200" name="origin[]"></input> // DYNAMICALLY ADDED
            </td>
        </tr>
        <tr>
            <th>
            </th>
            <td>
                <input type="text" value="" maxlength="200" name="origin[]"></input> // DYNAMICALLY ADDED
            </td>
        </tr>
    </tbody>
    <tr>
        <th>
            <label>Notes:</label>
        </th>
        <td>
            <input class="submitButton" type="submit" value="S" />
        </td>
    </tr>
    </form>
</table>

Answer 1

Ok, I was able to solve the problem. I had a table that was arranging all of the text inputs for the form, and the table also enclosed the form itself. It turns out that by inverting this, and enclosing the table inside of the form, all of the dynamically generated inputs get POSTed successfully. Thanks again to those who gave input in the comments above -- it's always helpful to get other opinions & perspectives.

So my question is (I know you're not supposed to ask questions in answers, but in case anyone feels like responding...): How was I supposed to know this? If you're using a compiled language, this is something that a compiler would probably catch for you. Is it just the kind of thing that you get the hang of with experience? Are there any books that would help me to get a handle on elementary problems like this? I find web development to be very tedious and frustrating because I often get hung up for long periods of time on trivial errors like this, and I'm assuming it doesn't have to be this way; I just don't quite know how to improve.