How to Refresh Form Page After Post Request

How to refresh/revisit the page after clicking submit on a form?

You can set the form's submit button's onClick event handler to reload the page with location.reload() or location = location (fallback for older browsers).

<!DOCTYPE html><html><head>    <title></title></head><body>    <div class="container">        <section class="section1">            <div class="sec1title">                <h1>Get in touch</h1>            </div>        </section>        <section class="section2">            <div class="contactform">                <h5>Drop us a line...</h5>                <form action="#">                    <label for="firstname"><i class="cntfrmicn fa fa-user"></i> <input class="form-fields" name="firstname" type="text"></label> <label for="email"><i class="cntfrmicn fa fa-envelope"></i> <input class="form-fields" name="email" type="text"></label> <label for="contact"><i class="cntfrmicn fa fa-phone"></i> <input class="form-fields" name="contact" type="text"></label> <label for="textarea"><i class="cntfrmicn fa fa-comment"></i>                     <textarea class="form-fields" cols="30" id="" name="textarea" rows="10"></textarea></label> <button class="form-fields button" type="submit" value="Send" onClick="refreshPage()">Send <i class="fa fa-paper-plane"></i></button>                </form>            </div>            <script src='https://maps.googleapis.com/maps/api/js?v=3.exp'>            </script>            <div class="contmap" style='overflow:hidden;height:550px;width:100%;'>                <div id='gmap_canvas' style='height:100%;width:100%;'></div>                <div>                    <small><a href="http://embedgooglemaps.com">embed google maps</a></small>                </div>                <div>                    <small><a href="http://freedirectorysubmissionsites.com/">free web directories</a></small>                </div>                <style>                                                    #gmap_canvas img{max-width:none!important;background:none!important}                </style>            </div>            <script type='text/javascript'>            function refreshPage(){               console.log("Refreshing page");               location.reload ? location.reload() : location = location;           }            </script>        </section>    </div></body></html>

Page refresh with post request

You will need to create a hidden form, add it to the document and then submit it by calling the .submit() on the form's DOM object.

Django - reload template after post request

You don't need to handle if request.method == "GET", it is GET by default if you're not doing a POST request.

Also it is a good practice to do a redirect after POST and not reply with a rendered page containing the results, because the POST request can be resubmitted(which could lead to data duplication), by:

  • reloading result page using Refresh/Reload browser button (explicit page reload, implicit resubmit of request);
  • clicking Back and then Forward browser buttons (implicit page reload and implicit resubmit of request);
  • returning back to HTML FORM after submission, and clicking Submit button on the form again (explicit resubmit of request)

So you can just redirect to your page after hitting POST.

Now i don't know how you named your url pattern for profile view, but presuming your urls.py are:

urlpatterns = [
...,
path('network/profile/<int:user>/', views.profile, name='network_profile')
]

Your views.py would then look like:

from django.shortcuts import redirect, reverse


def profile(request, user):
this_user = request.user
profileuser = get_object_or_404(User, username=user)
posts = Post.objects.filter(user=profileuser).order_by('id').reverse()
followed = Follow.objects.filter(followed=profileuser)
following = Follow.objects.filter(following=profileuser)
all_followed = len(followed)
all_following = len(following)
paginator = Paginator(posts, 10)
if request.GET.get("page") != None:
try:
posts = paginator.page(request.GET.get("page"))
except:
posts = paginator.page(1)
else:
posts = paginator.page(1)

try:
both_follow = Follow.objects.filter(followed=profileuser, following=request.user)
except:
both_follow == False

context = {
"posts": posts,
"profileuser": profileuser,
"all_followed": all_followed,
"all_following": all_following,
"both_follow": both_follow,
"this_user": this_user,
}

if request.method == "POST":
if both_follow:
both_follow.delete()
both_follow == False
else:
f = Follow()
f.followed = profileuser
f.following = request.user
f.save()
both_follow == True

return redirect(reverse('network_profile')) # We redirect to the same view

return render(request, "network/profile.html", context)

After submitting a form with a "POST" method when I refresh it asks to resend the information

This is a normal browser behavior. To avoid such thing, print out a redirect code such as:

<script>
location.href = "youroriginalpage.php";
</script>

You need to make your form submit to a page other than the one with the form, which is also a better approach in my opinion.

Another approach would also be to send an AJAX request instead which will keep the user on the same page.

How prevent reload after post request?

I got to the bottom of this. It turns out that the problem was due to VS Live Server which was detecting a change in the folder and hot-loading the app. The change was due to the backend, in the same folder, saving a log. Really silly thing to miss...

How to prevent page from refreshing after JavaScript fetch post request?

You should call the preventDefault method from the form submit attribute, not your button.

Check this answer for more info



Related Topics



Leave a reply



Submit