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
– epascarello, Commented Jul 23, 2021 at 17:54

Ivandez · Accepted Answer · 2021-11-05 16:48:07Z

0

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
});

answered Nov 5, 2021 at 16:48

Ivandez

2837 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

blacky99 · Accepted Answer · 2021-11-05 16:54:55Z

0

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>

answered Nov 5, 2021 at 16:54

blacky99

1751 gold badge3 silver badges12 bronze badges

Comments

Devin Peterson · Accepted Answer · 2022-09-13 22:03:39Z

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, 2022 at 22:03

Devin Peterson

2612 silver badges8 bronze badges

3 Comments

djjeck Over a year ago

This does not submit the form, but triggers an event instead

Devin Peterson Over a year ago

that depends on postFunction(ajax)

djjeck Over a year ago

Does it depend on the return value of the handler?

Collectives™ on Stack Overflow

Prevent method Post form from refreshing

3 Answers 3

Comments

Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related