Disable multiple button clicks works but is not updating my data - php

Question

I am trying to prevent a button to be clicked multiple times to avoid resending requests. The disabling works but my data to be sent or updated is not executed.
<form class="detail_form" method="POST" action="{{ url('update', $id) }}" enctype="multipart/form-data">
#csrf
<button class="btn btn-update accntfrm_btn" type="submit" id="btn-update">Update</button>
</form>
$("#btn-update").on('click', function (event) {
event.preventDefault();
$(this).prop('disabled', true);
setTimeout(function(){el.prop('disabled', false); }, 3000);
});
How can I execute my updates and disallow the multiple clicks at the same time?

Answer 1

Use like this in action attribute of Form,
{{ route('update', ['id'=>$id]) }}
I guess it is your route,
Route::post('/update/{id}','YourController#your_function')->name('update');
and in your controller,
public function your_function(Request $request, $id){ // your code }
and if you want to go pure laravel,
use Form class
{!! Form::open(['route' => ['update', 'id'=>$id], 'files' => true, 'class' => 'detail_form']) !!}

Answer 2

event.preventDefault();
prevents default action of the form, this means that your form is not going to submit to the server. what you can do is use ajax or maybe axios if you have it installed to send your information to the server. Since you obviously have jquery, you can make an ajax request to your server to update your information like so
`const route = "{{ route('update', $id)}}";`
or
const route = "/route/to/your/server";
`$.post(route,
{//add a body if you need to send some information to the server
//it is optional},
function(data, status){// in this callback you can create a feedback
//from a successful trip to and from the server
//for your users
})`
.fail(function(error){
//in this callback you can handle errors from a failed trip
//to and from the server
});