Changing form action based on select option value-CodePudding

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 >
        {% if list %}
            <h4 >{{list.0.list_name}}</h4>
        {% endif %}
        {% for item in list %}
            <li >
                <div >
                    <div >
                        <h3 >{{item.name}}</h3>
                    </div>
                    <div >
                        <form id="List_select" method="POST" onsubmit="submit_function(this)">
                            <label>Move Item</label>
                            <select  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  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.

CodePudding user response：

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 >
    <label>Move Item</label>
    <select id="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  type="submit" value="Move">
</div>       
</form>

jQuery:

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

CodePudding user response：

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  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  type="submit" name="doing_item" value="Doing" />
</form>
<form style="display: inline-block;" method="POST" action="{{ url_for('complete_item', titleID = item.id) }}">
    <input  type="submit" name="complete_item" value="Done" />
</form>