基于下拉选择项值动态修改表单action属性时出现Method Not Allowed错误求助

Let's break down what's going wrong here and fix it step by step:

Key Issues Causing the Error #

1. Function Scope Problem #

Your submit_function is defined inside the $(function() {}) closure, which means it's not accessible in the global scope. When the form's onsubmit attribute tries to call it, the browser can't find the function—so the form never gets its action updated. It ends up submitting to the current page's URL instead, which almost certainly doesn't accept POST requests, hence the "Method Not Allowed" error.

2. Duplicate IDs in Looped Elements #

You're generating multiple forms and dropdowns with the same IDs (List_select and Lists) inside your for loop. document.getElementById('Lists') will only ever return the first matching dropdown on the page, not the one inside the form you're actually submitting. This means you're probably setting the wrong action URL (or none at all) for most forms.

3. Missing CSRF Token (Critical for Flask POST Requests) #

Flask requires CSRF protection for POST requests (especially if you're using extensions like Flask-WTF). Without a valid CSRF token in your form, Flask will reject the request—sometimes this manifests as a "Method Not Allowed" error, even if the HTTP method is correct.

Fixed Code Solutions #

Step 1: Update the Template (Remove Duplicate IDs & Prepare for JQuery Binding) #

Modify your form to use classes instead of IDs, and remove the onsubmit attribute since we'll handle submission via JQuery:

{% for list in [view_model.todo_items, view_model.doing_items, view_model.done_items] %}
<ul class="list-group">
    {% if list %}
    <h4 class="display-2">{{list.0.list_name}}</h4>
    {% endif %}
    {% for item in list %}
    <li class="list-group-item">
        <div class="form-inline">
            <div class="form-group mb-2">
                <h3 class="display-5">{{item.name}}</h3>
            </div>
            <div class="form-group mx-sm-3 mb-2">
                <form method="POST" class="move-item-form">
                    <!-- Add CSRF token (required for Flask POST requests) -->
                    <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
                    <label>Move Item</label>
                    <select class="form-control move-select">
                        <option data-action="{{ url_for('complete_item', titleID = item.id) }}">Move to Done</option>
                        <option data-action="{{ url_for('doing_item', titleID = item.id) }}">Move to Doing</option>
                        <option data-action="{{ url_for('revert_item', titleID = item.id) }}">Move to To Do</option>
                    </select>
                    <input class="btn btn-primary" type="submit" value="Move">
                </form>
            </div>
        </div>
        ...
    </li>
    {% endfor %}
</ul>
{% endfor %}

Step 2: Fix the JQuery Code (Use Event Delegation & Relative Selectors) #

Replace your existing JQuery code with this, which uses event delegation to handle all form submissions correctly:

$(function() {
    // Use event delegation to catch submissions from all move-item-forms
    $(document).on('submit', '.move-item-form', function(e) {
        // Prevent default submission first so we can update the action
        e.preventDefault();
        const $form = $(this);
        // Get the selected option from the dropdown INSIDE this specific form
        const $selectedOption = $form.find('.move-select option:selected');
        const actionUrl = $selectedOption.data('action');

        if (actionUrl) {
            // Update the form's action and submit it
            $form.attr('action', actionUrl);
            // Unbind the submit handler first to avoid an infinite loop
            $form.off('submit').submit();
        }
    });
});

Step 3: Verify Flask CSRF Setup #

Make sure your Flask app has CSRF protection enabled. If you're using Flask-WTF, this is usually handled automatically, but if not, you can use the flask-wtf extension's CSRF protection:

from flask_wtf.csrf import CSRFProtect

app = Flask(__name__)
app.config['SECRET_KEY'] = 'your-secret-key-here'
csrf = CSRFProtect(app)

Why This Works #

• Event delegation ensures we handle submissions for every form generated in the loop, even if they're added dynamically later.
• Relative selectors ($form.find('.move-select')) guarantee we're targeting the dropdown inside the form being submitted, not a random one on the page.
• CSRF token ensures Flask accepts the POST request instead of rejecting it.
• We avoid global function issues by keeping all logic within the JQuery ready closure.

内容的提问来源于stack exchange，提问作者S. Penev