Clicking the browser back button after getting the confirmation page

Question

I have a page where I have to fill the student details for example name, email and department. Once I fill the details and click the submit my button it goes to next page and it shows the entered student details in the next page.

Here I have shown the code step by step.

The below code after entering the details and clicking the submit button.

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

This is the script code for clicking the submit my details button.

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

Once I clicked the button it goes to backend and fetch some details and it displays the confirmation.html page.

@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))

The below code is the confirmation.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>

So the problem here is once I come to the confirmation.html and if I click the browser back button it goes to the form and it lets me add the same details.

To avoid this I tried including this lines in the 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>

But it's not working. I tried one more method which is given in the link How to stop re submitting a form after clicking back button

This is also not working.

So what do I need is if I click the back button in the browser I should display the confirmation page only or it should tell this is not the authourized page.

score 1 · Accepted Answer · answered May 06 '20 at 06:55

Step 1: On the form submission page, initially set the form submission value to false.

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

Step 2: And when submitting the form in previous page, check:

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

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

Step 3: On confirmation.html page, you can store a submission value in sessionStorage.

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

GeneralPY · Answer 2 · 2020-04-30T09:42:31.093

0

You could add HTML5 history api. Use following code .

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")
   */
})

edited Apr 30 '20 at 09:42

answered Apr 30 '20 at 09:34

GeneralPY

3
6

score 0 · Answer 3 · answered May 02 '20 at 19:35

store the form data and reset the form just before the form data is sent to the server. Assuming that you are using $.ajax() to submit the form.

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
    };

}

Clicking the browser back button after getting the confirmation page

3 Answers3