Нажав кнопку браузера назад после получения страницы подтверждения - PullRequest
Новая
       7

Нажав кнопку браузера назад после получения страницы подтверждения

0 голосов
/ 22 апреля 2020

У меня есть страница, где я должен заполнить данные об ученике, например, имя, адрес электронной почты и отдел. Как только я заполняю детали и нажимаю submit my button, он переходит на следующую страницу и показывает введенные реквизиты студента на следующей странице.

Здесь я покажу код шаг за шагом.

Приведенный ниже код после ввода сведений и нажатия кнопки отправки. 

<div class="top-space-20">
    <input class="btn btn-info" type="button" onclick="submitEvent()" class="btn" value="submit my details">
</div>

Это код сценария для нажатия кнопки отправки моих данных. 

function submitEvent() {
    form = document.createElement("form");
    form.method = "POST";
    form.action = "/confirmation";
}

После того, как я нажал кнопку, нажмите идет к бэкэнду и извлекает некоторые детали и отображает страницу confirmation.html. 

@app.route("/confirm",methods=['GET','POST'])
def confirm():
    "Confirming the event message"
    response_value = request.args['value']

    return render_template("confirmation.html", value=json.loads(response_value))

@app.route("/confirmation", methods=['GET', 'POST'])
def ssubmit_and_confirm():
    "submit an event and display confirmation"

    if request.method == 'POST':       
        return redirect(url_for('confirm', value=value))

Приведенный ниже код является подтверждением. html page 

<body style="background-color:powderblue;">
    <div class="panel panel-default" style="max-width:1000px;max-height: 800px;margin-left:auto;margin-right:auto;">
        <div class="panel-heading " style="text-align: center;">submit student details</div>
        <div class="panel-body" id="resultDiv">
            <div class="panel-group">
                <div class="panel panel-default">
                    <div class="panel-body">
                        <label class="col-md-8" for="Date:">Date:
                            {{ value }}</br> Time :{{value}}</label>
                        <label class="col-md-8" for="dateApplied"></label>
                    </div>
                </div>
                <div class="panel panel-default">
                    <div class="panel-body">
                        <label class="col-md-8" for="student email:">
                            student email id:{{value}}</label>
                    </div>
                </div>   
        </div>
    </div>
</body>

Так что проблема здесь как только я прихожу к confirmation.html и если я нажимаю кнопку возврата браузера, он переходит к форме и позволяет мне добавлять те же детали.

Чтобы избежать этого, я попытался включить эти строки в confirmation.html

</div>
<div><input type="hidden" id="reloadPage" /></div>
<script type="text/javascript">
    $(document).ready(function() {
        function reloadPage(){
            location.reload(true); ;    // RELOAD PAGE ON BUTTON CLICK EVENT.

            // SET AUTOMATIC PAGE RELOAD TIME TO 5000 MILISECONDS (5 SECONDS).
            var timerId = setInterval('refreshPage()', 5000);
        }
    });
    function refreshPage() { clearInterval(timerId); location.reload(); }
</script>

Но это не работает. Я попробовал еще один метод, который приведен в ссылке Как прекратить повторную отправку формы после нажатия кнопки назад

Это тоже не работает.

Так что мне делать нужно, если я нажму кнопку «Назад» в браузере, я должен отобразить только страницу подтверждения или он должен сказать, что это не авторизованная страница.

Ответы [ 3 ]

2 голосов
/ 06 мая 2020

Шаг 1. На странице отправки формы изначально установите значение отправки формы в false.

sessionStorage.setItem('form-submit', false)

Шаг 2. И при отправке формы на предыдущей странице установите флажок: 

function submitEvent() {
    formSubmitted = sessionStorage.getItem('form-submit')

    if (!formSubmitted){
        // Write your code here
    }
}

Шаг 3. На странице confirmation.html можно сохранить значение отправки в sessionStorage.

sessionStorage.setItem('form-submit', true)

0 голосов
/ 02 мая 2020

сохранить данные формы и сбросить форму непосредственно перед отправкой данных формы на сервер. Предполагая, что вы используете $. ajax () для отправки формы. 

function submitEvent() {
    form = document.createElement("form");
    form.method = "POST";
    form.action = "/confirmation";

    // Add id attribute to the form
    form.id = "student_details_form";

    // Collect form data

    // reset your form just before calling $.ajax() or $.post()
    document.getElementById('student_details_form').reset();

    // call $.ajax() or $.post()
    $.ajax({
        url: form.action,
        // snipps
    };

}
0 голосов
/ 30 апреля 2020

Вы можете добавить HTML5 истории API. Используйте следующий код. 

name = document.title
history.pushState(null,name,name)//add this code in your configuration.html file in document ready block
$(window).on("popstate",()=>{
   //....Do whatever you want
   /*If you want to display unauthorized page then
   $(document).html("Unauthorized page")
   */
})
...