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)

Explosion Pills · Accepted Answer · 2017-08-15T14:59:19.683

26

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

edited Aug 15 '17 at 14:59

answered Sep 20 '13 at 15:46

Explosion Pills

188,624
52
326
405

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! – hal Sep 20 '13 at 16:52
1

But the time 10 is not that good since sometimes the submit is fast while sometimes slow. – Summer Sun Mar 14 '16 at 06:48
1

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://stackoverflow.com/a/22567796/781079 that uses ajax – amackay11 Jun 04 '18 at 16:41

score 1 · Answer 2 · answered Sep 20 '13 at 15:46

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.

score 1 · Answer 3 · answered Jun 11 '19 at 21:30

1

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.

answered Jun 11 '19 at 21:30

It's not reliable to rely on timing. This can randomly fail based on server load, network speed etc. – juzzlin Apr 02 '20 at 11:41

score 0 · Answer 4 · answered Sep 29 '21 at 22:54

0

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()"

answered Sep 29 '21 at 22:54

susukacang

11
2

score -2 · Answer 5 · edited Nov 28 '14 at 15:07

-2

location.refresh(true);

will help

edited Nov 28 '14 at 15:07

Artjom B.

61,146
24
125
222

answered Nov 28 '14 at 14:17

asa

11

Thanks. i know this was downvoted. but it worked for me. did precisely what i needed. i.e. Refreshed my partial after i submitted. – Vishav Premlall Oct 30 '17 at 14:52

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

5 Answers5

Linked