HTML-форма отправки предыдущего выбора, когда я обновляю страницу веб-приложения Flask - PullRequest
Новая
       3

HTML-форма отправки предыдущего выбора, когда я обновляю страницу веб-приложения Flask

0 голосов
/ 12 июня 2019

В моем приложении Flask у меня есть простая форма типа POST и 4 опции радио-кнопок с тем же именем.Когда я выбираю опцию и нажимаю «Далее» (ввод типа отправки), новая страница загружается с другим содержимым, но в форме того же типа.

Проблема заключается в том, обновлю ли я недавно загруженную страницуформа отправляется с параметром, имеющим то же значение, что и ранее выбранный параметр.

Форма: 

<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

РЕДАКТИРОВАТЬ: сессия просто глобальная переменная, которую я использую для хранения вещей.name инициализируется в начале кода Python, а save_annotation () и get_least_annotated_page () являются функциями.

EDIT2: при загрузке новой страницы все кнопки не проверяются.Тем не менее, когда я обновляю, вариант представлен.Я только заметил, просматривая выходные данные командной строки.

Ответы [ 3 ]

0 голосов
/ 12 июня 2019

Когда вы обновляете страницу, браузер выполнит последнее действие, в вашем случае POST.

Чтобы избежать этого, можно изменить возврат на перенаправление вместо рендера: 

if request.method == 'POST':

    ...

    return redirect(url_for('this_view'))

...

Источник

0 голосов
/ 12 июня 2019

Я нашел рабочее решение. Возможно, потребуется больше тестов, прежде чем я в этом уверен, но сейчас все работает нормально.

По сути, я сохраню переменную, которая будет увеличиваться при выборе пользователем опции. Затем я сравню значение, сохраненное в сеансе (на стороне сервера), с версией, отправленной в форме по запросу 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 (Flask) Код: 

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'))
0 голосов
/ 12 июня 2019

Вы можете попробовать:

document.getElementById ("op1"). Prop ('флажок', ложь)

, чтобы отключить переключатель.Это можно сделать каждому.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...