How to prevent form resubmission on browser back button?

Question

I have got one GET ActionResult and one POST ActionResult. After a POST, a customized link appears for the user to click to get redirected to another page.

Thereafter, when the user presses the back button in their browser, the form gets resubmitted and a new customized link appears again. This is undesired. I would much rather the form completely clears out and be empty than this happening. Alternatevily, only go back to the same state before the redirection (same link showing and no resubmission happening)

[HttpPost]
    [ValidateAntiForgeryToken]
    public ActionResult ShortenURL(ShortURLModel model)
    {
        if (ModelState.IsValid)
        {
            ViewBag.currentdomain = GetCurrentAbsoluteURL();
            Tuple<bool, string> response = _shortUrlProcessor.CreateShortURL(model.originalURL, model.shortURL);
            if (response.Item1)
            {
                ViewBag.ShortenURLSuccess = true;           
                ViewBag.shortlink = ViewBag.currentdomain + response.Item2;
            }
            else
            {
                ViewBag.ShortenURLSuccess = false;
            }
        }
        return View();
    }

    [HttpGet]
    [Route("{*id}")]
    public IActionResult ShortenURL(string id)
    {
        ViewBag.currentdomain = GetCurrentAbsoluteURL();
        if (id == null)
        {
            return View();
        }

        var originalURL = _shortUrlProcessor.GetOriginalURL(id);
        if (originalURL == null)
        {
            return Redirect("~/");
        }
        return Redirect(originalURL);
    }

See the answers here https://stackoverflow.com/questions/8861181/clear-all-fields-in-a-form-upon-going-back-with-browser-back-button — Jasen, Sep 17 '21 at 21:13

score 0 · Answer 1 · answered Sep 21 '21 at 06:31

You can use the Window: pageshow event to clear the form elements' value. Please refer the following sample:

@model WebApplication6.Data.Person

<div class="row">
    <div class="col-md-4">
        <form asp-action="CreatePerson">
            <div asp-validation-summary="ModelOnly" class="text-danger"></div> 
            <div class="form-group">
                <label asp-for="Name" class="control-label"></label>
                <input asp-for="Name" class="form-control" />
                <span asp-validation-for="Name" class="text-danger"></span>
            </div>
            <div class="form-group">
                <label asp-for="Email" class="control-label"></label>
                <input asp-for="Email" class="form-control" />
                <span asp-validation-for="Email" class="text-danger"></span>
            </div>
            <div class="form-group">
                <label asp-for="Age" class="control-label"></label>
                <input asp-for="Age" class="form-control" />
                <span asp-validation-for="Age" class="text-danger"></span>
            </div>
            <div class="form-group">
                <input type="submit" value="Create" class="btn btn-primary" />
            </div>
        </form>
    </div>
</div>

@section Scripts {
    @{await Html.RenderPartialAsync("_ValidationScriptsPartial");}

<script type="text/javascript">
    //window.addEventListener("pageshow", () => {
    //    // find the relate form element and clear the value.
    //    $("#Name").val("");
    //    $("#Email").val("");
    //    $("#Age").val("");
    //});

    //use the above code or the following code
    $(window).bind("pageshow", function () {
       $("#Name").val("");
        $("#Email").val("");
        $("#Age").val("");
    });
</script>
}

In the above CreatePerson view page, when we click the browser back button, it will trigger the pageshow event, and then we can find the form elements and clear its value.

The result as below:

How to prevent form resubmission on browser back button?

1 Answers1