Level 29
You can't achieve that with plain form submission you gonna need to use ajax request for that.
1 like
Dec 14, 2020
6
Level 1
Submit Modal and save to db without refreshing the page in Laravel?
I am trying to update one of my pages through a pop up its working fine just the page will reload after submitting it how to prevent it from reloading?
Level 73
You need to prevent the deafault submit and handle that yourself in your JavaScript.
Since you don't share any code it's hard to know if you use vanilla or any framework.
<button id="submit-from-modal" class="btn" onclick="submit()">Submit</button>
async function postRequest() {
parameters = {
//Set the parameters here
}
try {
let responsePromise = await fetch('<url here>' {
method: 'POST',
headers: {
'Content-Type': 'application/x-www-form-urlencoded'
},
body: new URLSearchParams(parameters)
});
if(! responsePromise.ok) {
throw new Error(responsePromise.status );
}
hideLoading();
return await responsePromise.json();
} catch (error) {
return error;
}
}
1 like
Level 1
@wingly I am using ajax for my modal @tray2 I have prevent default in my code but I don't know how to make it stop reloading here is my code which works after reloading the page
my modal
<!-- modal -->
<div class="modal fade" id="mediumModal" tabindex="-1" role="dialog" aria-labelledby="mediumModalLabel"
aria-hidden="true">
<div class="modal-dialog modal-dialog-centered modal-lg" role="document">
<div class="modal-content">
<div class="modal-body" id="mediumBody">
<form id="modal-form" method="get">
<div>
<!-- the result of displayed apply here -->
</div>
</form>
</div>
</div>
</div>
</div>
@endsection
ajax
<script>
// display a modal (medium modal)
$(document).on('click', '#mediumButton', function(event) {
event.preventDefault();
let href = $(this).attr('data-attr');
$.ajax({
url: href,
beforeSend: function() {
$('#loader').show();
},
// return the result
success: function(result) {
// @if (count($errors) > 0) @endif
$('#mediumModal').modal("show");
$('#mediumBody').html(result).show();
$("#date-picker").datepicker({
changeMonth: true,
changeYear: true,
dateFormat: 'yy-mm-dd'
});
} ,
complete: function() {
$('#loader').hide();
},
error: function(jqXHR, testStatus, error) {
console.log(error);
alert("Page " + href + " cannot open. Error:" + error);
$('#loader').hide();
},
timeout: 8000
});
});
</script>
my blade form
<form action="{{ route('storefile' , $requisition->id) }}" method="POST"
enctype="multipart/form-data">
@csrf
@method('PUT')
<div class="form-group row">
<div class="col-sm-12">
<label for="title"> Account Status: </label>
<select class="form-control" name="acc_status">
<option value="0" {{ $requisition->acc_status == 0 ? 'selected' : '' }}> Inactive
</option>
<option value="1" {{ $requisition->acc_status == 1 ? 'selected' : '' }}> Active
</option>
</select>
</div>
<div class="col-sm-12 pt-4">
<label for="title"> Account document File: </label>
<div>
@if (!empty($requisition->acc_document))
<label class="badge-success">
{{ $requisition->acc_document }}
</label>
@else
<label class="badge-danger">
Nothing uploaded </label>
@endif
</div>
<input type="file" name="acc_document" class="form-control" id="acc_document" />
</div>
</div>
<div class="card-footer">
<div class="row">
<div class="col-md-6 text-left">
<input type="submit" value="Upload document" class="btn btn-primary">
</div>
</div>
</div>
</div>
</form>
Level 73
It most likely use submit on enter and the uses the regular submit button since it can't find the
#mediumbutton
1 like
Level 1
my #mediumbutton is on another page when you are clicking on it it will show the popup its working and updating without any errors the only thing that I want is to update without reloading the page
<td>
<div class="col-md-6">
<a style="display:inline-block; text-decoration:none; margin-right:10px;"
class="text-secondary" data-toggle="modal" id="mediumButton"
data-target="#mediumModal" title="upload"
data-attr="{{ route('upload' , $requisition->id) }}">
<i class="fas fa-upload"></i>
</a>
</div>
</td>
Level 73
Then you need to highjack this button
<input type="submit" value="Upload document" class="btn btn-primary">
And prevent the default action.
Please or to participate in this conversation.