Changing form action based on select option value

Question

I am trying to change the form url_for action based on the selected option:

app.py

@app.route('/complete_item/<string:titleID>', methods=['POST'])
def complete_item(titleID):
    logger.log.info('Attempting to move card to Done list: '+ titleID)
    session.move_Card('Done', titleID)
    return redirect(url_for('index'))


@app.route('/doing_item/<string:titleID>', methods=['POST'])
def doing_item(titleID):
    logger.log.info('Attempting to move card to Doing list: '+ titleID)
    session.move_Card('Doing', titleID)
    return redirect(url_for('index'))


@app.route('/revert_item/<string:titleID>', methods=['POST'])
def revert_item(titleID):
    logger.log.info('Attempting to move card to To Do list: '+ titleID)
    session.move_Card('To Do', titleID)
    return redirect(url_for('index'))

Django template:

{% 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 id="List_select" method="POST" onsubmit="submit_function(this)">
                            <label>Move Item</label>
                            <select class="form-control" id="Lists">
                                    <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 %}

JQuery

$(function() {
    function submit_function(form) {
        var selected = document.getElementById('Lists');
        var dataset = selected[selected.selectedIndex].dataset;
        console.log("2")
        if (dataset.action) {
            form.action = dataset.action;
        }
        return true;
    };
});

When I try select an option and press the Move button, however I get:

Method Not Allowed The method is not allowed for the requested URL.

Answer 1

You can get the selected option by jQuery and get the value of the selected option and give it to the form action. Here you go:

HTML:

<form name="List_select" id="List_select" method="POST">
<div class="modal-body">
    <label>Move Item</label>
    <select id="Lists" class="form-control Lists">
            <option value="{{ url_for('complete_item', titleID = item.id) }}">Move to Done</option>
            <option value="{{ url_for('doing_item', titleID = item.id) }}">Move to Doing</option>
            <option value="{{ url_for('revert_item', titleID = item.id) }}">Move to To Do</option>
    </select>
    <input class="btn btn-primary" type="submit" value="Move">
</div>       
</form>

jQuery:

$(".Lists").change(function(){
    $('#List_select').attr('action', $('.Lists').find(":selected").val())
})

Answer 2

Changed that to buttons instead:

<label>Move Item to:</label>
<form style="display: inline-block;" method="POST" action="{{ url_for('revert_item', titleID = item.id) }}">
    <input class="btn btn-primary" type="submit" name="revert_item" value="To Do" />
</form> 
<form style="display: inline-block;" method="POST" action="{{ url_for('doing_item', titleID = item.id) }}">
    <input class="btn btn-primary" type="submit" name="doing_item" value="Doing" />
</form>
<form style="display: inline-block;" method="POST" action="{{ url_for('complete_item', titleID = item.id) }}">
    <input class="btn btn-primary" type="submit" name="complete_item" value="Done" />
</form>