Prevent method Post form from refreshing

Question

I have a form with method Post and action with URL, when I click button to submit, after submitting, it gets refreshed. I want to prevent from being refreshed.

I used:

onsubmit=";return false" in form tag but it did not submit the form.

Also tried:

type="button" in save button but it did not submit.

my Form:

<form class="form-horizontal" method="POST" action="{{ url('panel/admin/webscraper') }}" enctype="multipart/form-data">
<input type="hidden" id="csrf_token" name="_token" value="{{ csrf_token() }}">
<input type="text" name="subcategory" value="{{$subcategory}}">
<button type="submit">Save</button>
</form>

well if you want to submit the form with normal HTML, the page is going to refresh. — epascarello, Jul 23 '21 at 17:54
https://stackoverflow.com/questions/19454310/stop-form-refreshing-page-on-submit This maybe help you — DineshMsd, Jul 23 '21 at 18:06
@DineshMsd Since I have action with URL your suggested Link did not work for me — Anonymous Girl, Jul 23 '21 at 18:15
https://www.webtrickshome.com/forum/how-to-stop-form-resubmission-on-page-refresh — DineshMsd, Jul 23 '21 at 18:22

score 0 · Answer 1 · answered Nov 05 '21 at 16:48

Add a submit event to your form and then use preventDefault to prevent refresh, after that do your AJAX

Set id to form

<form id="noRefreshForm" class="form-horizontal" method="POST" action="{{ url('panel/admin/webscraper') }}" enctype="multipart/form-data">

Finally select this form and then use preventdefault

document.getElementById("noRefreshForm").addEventListener("submit", function(event){
// this line prevents refresh the page
  event.preventDefault()

// do your AJAX
});

score 0 · Answer 2 · answered Nov 05 '21 at 16:54

Or just disable button after click:

<form class="form-horizontal" method="POST" action="{{ url('panel/admin/webscraper') }}" enctype="multipart/form-data">
<input type="hidden" id="csrf_token" name="_token" value="{{ csrf_token() }}">
<input type="text" name="subcategory" value="{{$subcategory}}">
<button type="submit" onclick="this.disabled=true">Save</button>
</form>

score 0 · Answer 3 · answered Sep 13 '22 at 22:03

0

Can use method="dialog"

<form onsubmit="postFunction()" method="dialog"></form>

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form#attr-action

answered Sep 13 '22 at 22:03

Devin Peterson

241
1
7

This does not submit the form, but triggers an event instead – djjeck Apr 14 '23 at 13:38

Prevent method Post form from refreshing

3 Answers3