I use a form to upload data:
<form method="POST" action="{{ Route('files.create') }}" enctype="multipart/form-data" onsubmit="event.preventDefault(); showSpinner();">
<!-- ... -->
</form>
<script>
const showSpinner = () => {
document.getElementById('btnSubmit').innerHTML =
'Loading ...';
document.querySelector('form').submit();
}
</script>
If I don't submit the form, I see the loading text. If I do, I don't see it. If I upload a big amount of data, this is annoying because the user has now feedback if it is uploading or not.
How can I show the loading text while the server (?) or client (?) is processing (?) the form?
you can use this
var spinner = $('#loader');
$(function() {
$('form').submit(function(e) {
e.preventDefault();
spinner.show();
$.ajax({
url: 'filename.php',
data: $(this).serialize(),
method: 'post',
dataType: 'JSON'
}).done(function(resp) {
spinner.hide();
alert(resp.status);
});
});
});
also check this click here