How can I refresh a form page after the form submits to _blank?

Question

I have an HTML form which targets _blank. I would like the page that form is on to reload after submitting.

So here's some sample markup:

<form method="POST" action="result.php" target="_blank">
    <label for="name">Name:</label>
    <input type="text" name="name" />

    <label for="email">Email:</label>
    <input type="email" name="email" />

    <input type="submit" value="submit" />
</form>

So when you submit this form it will POST to result.php in a new window or tab. This leaves the form page as is. I want the form page to reload, or at least reset all fields.

I've tried <form onsubmit="location.reload()"... as well as onsubmit="window.location.reload()" but nothing changed.

Any suggestions?

(please no jquery)

Rorry

Answer 1

Not sure why window.location.reload() doesn't work. I think it should. However, this does seem to work:

onsubmit="setTimeout(function () { window.location.reload(); }, 10)"

Diandrous

perfect! not sure why I didn't think of that. I guess I've just been away from JS for too long. Thanks for the help! – Rorry

But the time 10 is not that good since sometimes the submit is fast while sometimes slow. – Commutual

I agree that the 10 is not so great (what if the server is having a bad day and takes longer than 10 ms to save the changes). I found this great nugget here: https://mcmap.net/q/142815/-how-do-i-capture-response-of-form-submit that uses ajax – Mori

Answer 2

There are two ways to do this, one that you may not want to hear about.

FIRST:

In the form init tag, if you set action="" then the form will submit to the same page (to itself).

<form action="" method="post">

This allows you to add server-side code to the top of the page, like this (using PHP, for example):

<?php
    If (empty($_POST)===false) {
        //server side scripting to handle the submitted form
    }else{
?>
    //HTML to create/show the page with form for user input
<?php
    //Close the if statement
    }
?>

SECOND:

Use AJAX (javascript or jQuery) to "submit" the form, and then -- in the AJAX function's callback -- carry on with whatever changes you want to make to the page, including redirecting to a new page.

Deon

Answer 3

The accepted answer did not produce the desired results for me.

Accepted answer:
onsubmit="setTimeout(function () { window.location.reload(); }, 10)"

Changing the accepted answer from onsubmit to onclick did fix my issue;

Worked for me:
onclick="setTimeout(function () { window.location.reload(); }, 3)"

There may be undesirable results, or this may not be preferred but it performs as desired for me.

Heteromerous

It's not reliable to rely on timing. This can randomly fail based on server load, network speed etc. – Critical

Answer 4

It should work if a callback is passed to the onsubmit event attribute. For example,

(Traditional anonymous function)

onsubmit="function() {location.reload()}"

or

(Arrow function)

onsubmit="() => location.reload()"

Edify

Answer 5

location.refresh(true);

will help

Serotonin

Thanks. i know this was downvoted. but it worked for me. did precisely what i needed. i.e. Refreshed my partial after i submitted. – Jihad