Question

在我的Flask应用程序中，我有一个简单的类型POST类型和四个具有相同名称的单选按钮选项。当我选择一个选项并按“下一步”（提交类型的输入）时，新页面将加载不同的内容，但格式相同。

问题是，如果刷新新加载的页面，则提交的表单中的选项与先前选择的选项具有相同的值。

表格：

<form id="myForm" name="myForm" method="post" >
    <table align="center" cellpadding="10" border="0" style="background-color: antiquewhite;">
        <tr>
            <td rowspan="2"><h3>Is this an <i>origin</i> for the <i>claim?</i></h3></td>
            <td><input type="radio" name="op" id="op1" value="1" >Yes</td>
            <td><input type="radio" name="op" id="op2" value="2" >No</td>
            <td rowspan="2"><input type="submit" value=Next></td>
        </tr>

        <tr>
            <td><input type="radio" name="op" id="op3" value="3" >Invalid Input</td>
            <td><input type="radio" name="op" id="op4" value="4" >Don't Know</td>
        </tr>
    </table>
    </form>

处理表单的Python代码片段

if request.method == 'POST':
            op = request.form.get('op')
            if op:
                if op in ['1', '2', '3', '4']:
                    save_annotation(session.get('claim'),session.get('origin'), op, name)
                    c_url, o_url = get_least_annotated_page(name, session['claim'])

            else:
                c_url = session['claim']
                o_url = session['origin']

else:
    print("NOT POST AND LOGGED IN")
    c_url, o_url = get_least_annotated_page(name)
.
.
.
.
.
return render_template('index.html',t1=c_url, t2=o_url)

我只希望能够在不发布表单的情况下刷新页面。

我已经尝试使用

document.getElementById("myForm").reset();

以及

<body onload="document.myForm.reset();">

和

autocomplete="off"

此处提供完整代码（annotator.py，app / templates / index.html和app / templates / base.html）：

https://github.com/MohamedMoustafaNUIG/AnnotatorVM.git

EDIT：session只是一个用于存储内容的全局变量。名称在python代码的开头初始化，并且save_annotation（）和get_least_annotated_page（）是函数。

EDIT2：加载新页面时，所有按钮均未选中。但是，当我刷新时，将提交一个选项。我只是通过查看命令行输出才注意到的。

Answer 1

您可以尝试：

document.getElementById（“ op1”）。prop（'checked'，false）

这将取消选中单选按钮。每个人都可以做到这一点。

Answer 2

刷新页面时，浏览器将执行最后一个操作，在本例中为POST。

避免这种情况的方法是将返回值更改为重定向，而不是渲染：

if request.method == 'POST':

    ...

    return redirect(url_for('this_view'))

...

Source

Answer 3

我找到了可行的解决方案。在我确定之前，它可能需要更多的测试，但是现在可以正常工作了。

基本上，病态保留一个变量，当用户选择一个选项时，该变量将递增。然后，将会话（服务器端）中存储的值与POST请求以表格形式发送的版本进行比较。如果它们相同，则这是刷新，否则是正常提交。

代码：

客户端（index.html）::

<form method="post">
    <table align="center" cellpadding="10" border="0" style="background-color: antiquewhite;">
        <tr>
            <td rowspan="2"><h3>Is this an <i>origin</i> for the <i>claim?</i></h3></td>
            <td><input type="radio" name="op" id="op1" onchange="incAlpha();" value="1" >Yes</td>
            <td><input type="radio" name="op" id="op2" onchange="incAlpha();" value="2" >No</td>
            <td rowspan="2"><input type="submit" value=Next></td>
        </tr>

        <tr>
            <td><input type="radio" name="op" id="op3" onchange="incAlpha();" value="3" >Invalid Input</td>
            <td><input type="radio" name="op" id="op4" onchange="incAlpha();" value="4" >Don't Know</td>
        </tr>
    </table>
        <input type="hidden" id="alpha" name="alpha" value={{alpha}}>
    </form>
<script type="text/javascript">
    var globFlag=true; // use so that the incrementation is only triggered once every page load
    function incAlpha()
    {
        if(globFlag)
        {
            let value= document.getElementById("alpha").value;
            document.getElementById("alpha").value = (parseInt(value)+1)%10;
            globFlag=false;
        }
    }
</script>

Python（烧瓶）代码：

name = session.get('username')
        alphaFromSession = session.get('alpha')
        if request.method == 'POST':
            op = request.form.get('op')
            alphaFromClient = request.form.get('alpha')
            if op and not (alphaFromSession == alphaFromClient):
                if op in ['1', '2', '3', '4']:
                    save_annotation(session.get('claim'),session.get('origin'), op, name)
                    session['alpha']=alphaFromClient
                    c_url, o_url, src_lst, donePg, totalPg, done, total = get_least_annotated_page(name, session.get('claim'))


.
.
.
.
return render_template('index.html',t1=c_url, t2=o_url,alpha=session.get('alpha'))

刷新Flask网络应用程序页面时，HTML表单会提交先前的选择

3 个答案: