Using Flask url_for in button onclick location.href redirect leads to `Method Not Allowed`

Question

I'm in the middle of wire-framing out some basic forms and I'm hitting an unexpected 405 Method Not Allowed blocker.

Basically I have some html in a jinja template looking like...

<!--Select File Y-->
<tr>
    <td>File Y</td>
    <td>{{form.pathY }}</td>
    <td><input type=file name=browse ></td>
    <td><button onclick="window.location.href='{{ url_for( 'dataTablePage' , table='Y' ) }}';">Display Table Y</button></td>
</tr>
<tr>
    <td/>
    <td/>
    <td/>
    <td><a href="{{ url_for( 'dataTablePage' , table='Merged' ) }}">View Merged Data</a></td>
</tr>

In the DOM this is rendering more or less what I'd expect as with the location.href = '/DataTable/Y/'

However when I click the button I wind up here in the 405 Method Not Allowed page.

On the other hand the redirect works as expected when I redirect from anchors with url_for. What's the deal with using url_for in in a button's onclick redirection?

Not sure if it matters, but here's the route I'm connecting to...

@app.route('/DataTable/<table>/')
def dataTablePage(table) :
    """
    Takes the user to the Table View corresponding to the given table parameter
    """
    table == "X" :
        dfTable = DataFrame( data = {"X1":[1,2,3] , "X2":[2,3,4]} ) 
    elif table == "Y" :
        dfTable = DataFrame( data = {"Y1":[1,2,3,4,5] , "Y2":[2,3,4,5,6]} ) 
    elif table == "Merged" :
        dfTable = DataFrame( data = {"M1":[1,2] , "M2":[2,3]} ) 
    else :
        redirect( url_for('error') )

    return render_template( 'dataTable.html' , filePath="x.csv" , headers=dfTable.columns.values.tolist() , table=dfTable.iterrows() )

Answer 1

This is a problem with your HTML actually, the default "type" of button is:

The missing value default is the Submit Button state.

And since you have not specified the button's type, it simply tries to submit the form, which leads to 405 problem.

Change your button type to "button" and it should work as expected:

<button type="button" onclick="window.location.href='{{ url_for( 'dataTablePage' , table='Y' ) }}';">Display Table Y</button>