Level 122
try returning boolean value from the ajax's call, not "yes" or "no" - both of which are truthy.
Don't set the checkbox value to "yes" and "no". that's nonsense
1 like
Aug 27, 2022
6
Level 2
show checked values when editing a record using jquery laravel
i am editing my form using a modal.so here I am able to get all the values for a certain record from the database and display them in the inputs of the form.
am using jquery ajax to display the modal and when the modal with the form pops up with the records of the data pops up with all the earlier added data the user can make changes where necessary.then after updating i have created a code to empty all the inputs then reload the table and hide the model.
my code is working.for example i have 3 records all having a edit function.i have use the datatable plugin to display the data and it all works fine.so on clicking the edit button a modal appears for editing the record details. i have been to show all the other part of the details except the part on checkboxes where am getting a bug.
the checkbox is based on a yes or no value as per the data in the database.if the value is yes the checkbox gets clicked but if it isn't it doesnt get clicked.the bug comes here,if a record has all the values as yes,then on proceeding to other records they all become checked even when their values are not a yes in the table at the database.
i havent understood where the bug is coming.but here in the modal i have set the checkboxes value as yes.and also am emptying the checkboxes after updating and closing the modal.where might the bug be coming from?
.here is my modal that edits the data
<div class="modal fade editrentalhse" id="editrentalhsedetailsmodal" tabindex="-1" role="dialog" aria-labelledby="modalLabel" aria-hidden="true" >
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-body">
{{-- Edit Property Details --}}
<div class="row" id="edithousedata" style="margin: 100px 5px;">
<div class="mx-auto" style="text-align: center; font-size:18px; background-color:black;
display: flex;
justify-content: center; padding:5px;">
<h3 class="mb-2 panel-title text-white edit_title"></h3>
</div>
@if ($errors)
@foreach ($errors->all() as $error)
<p class="text-danger">{{ $error }}</p>
@endforeach
@endif
<form action="javascript:void(0)" id="updatehsesform" class="form-horizontal updaterentaldetails" role="form" method="POST" enctype="multipart/form-data">
@csrf
<input type="hidden" id="rentalhouseid">
<div class="card padding-card product-card">
<div class="card-body">
<h5 class="card-title mb-4" style="color: black; font-size:18px;">1.Rental Description</h5>
<div class="row section-groups">
<div class="form-group inputdetails col-sm-4">
<label>Rental Name<span class="text-danger inputrequired">*</span></label>
<input type="text" class="form-control text-white bg-dark" required name="rental_name" id="rental_title"
>
</div>
<div class="form-group inputdetails">
<label>Rental Details<span class="text-danger inputrequired">*</span></label>
<div id="rental_details_ck" style="border:2px solid black; width:100%;">
</div>
</div>
<div class="form-group inputdetails col-sm-4">
<label>Rental category<span class="text-danger inputrequired">*</span></label>
<select name="rentalhousecategory" class="rentalselectcat form-control text-white bg-dark" required style="width:100%;">
@foreach($allrentalcategories as $category)
<option value="{{ $category->id }}">{{ $category->rentalcat_title }}
</option>
@endforeach
</select>
</div>
</div>
</div>
</div>
//here are my checkboxes
<div class="card padding-card product-card">
<div class="card-body">
<h5 class="card-title mb-4" style="color: black; font-size:18px;">3.Rental House Amenities</h5>
<div class="row section-groups">
<div class="col-md-4 inputdetails" style="text-align: left; color:black;">
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input wifi" name="wifi" value="yes" id="osahan-checkbox6">
<label class="custom-control-label" for="osahan-checkbox6">WIFI</label>
</div>
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input generator" name="generator" value="yes" id="osahan-checkbox1">
<label class="custom-control-label" for="osahan-checkbox1">BACKUP GENERATOR</label>
</div>
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input balcony" name="balcony" value="yes" id="osahan-checkbox2">
<label class="custom-control-label" for="osahan-checkbox2">BALCONY</label>
</div>
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input parking" name="parking" value="yes" id="osahan-checkbox3">
<label class="custom-control-label" for="osahan-checkbox3">PARKING</label>
</div>
</div>
<div class="col-md-4 inputdetails" style="text-align: left">
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input cctv_cameras" name="cctv_cameras" value="yes" id="osahan-checkbox4">
<label class="custom-control-label" for="osahan-checkbox4">CCTV SECURITY CAMERAS</label>
</div>
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input servant_quarters" name="servant_quarters" value="yes" id="osahan-checkbox5">
<label class="custom-control-label" for="osahan-checkbox5">SERVANT QUARTERS</label>
</div>
</div>
</div>
</div>
</div>
<button type="submit" class="btn btn-success">Update Rental Details</button>
<ul class="alert alert-warning d-none" id="update_errorlist"></ul>
</form>
</div>
</div>
</div>
</div>
</div>
here is my jquery code upon clicking the edit button the modal shows,
// show editing modal
$(document).on('click','.editrentalhsedetails',function(e){
e.preventDefault();
var rentalhsedetailsid=$(this).data('id');
$.ajax({
url:'{{ url("admin/activerental",'') }}' + '/' + rentalhsedetailsid + '/edit',
method:'GET',
processData: false,
contentType: false,
success:function(response)
{
console.log(response)
if (response.status==404)
{
alert(response.message);
}
else if(response.status==200)
{
$('#editrentalhsedetailsmodal').modal('show');
$('#rentalhouseid').val(response.editrentalhsedetail.id);
$('.edit_title').html('Edit details for' + response.editrentalhsedetail.rental_name);
$('#rental_title').val(response.editrentalhsedetail.rental_name); $(".rentalselectcat").val(response.editrentalhsedetail.housecategory.id).trigger('change');
$('input[name^="wifi"][value="' + response.editrentalhsedetail.wifi + '"]').prop('checked', true);
$('input[name^="generator"][value="'+response.editrentalhsedetail.generator+'"]').prop('checked', true);
$('input[name^="balcony"][value="'+response.editrentalhsedetail.balcony+'"]').prop('checked', true);
$('input[name^="parking"][value="'+response.editrentalhsedetail.parking+'"]').prop('checked', true);
$('input[name^="cctv_cameras"][value="'+response.editrentalhsedetail.cctv_cameras+'"]').prop('checked', true);
$('input[name^="servant_quarters"][value="'+response.editrentalhsedetail.servant_quarters+'"]').prop('checked', true);
}
}
})
});
// update rental house details
$(document).on('submit','#updatehsesform',function(e)
{
var hseupdateid=$('#rentalhouseid').val();
var url = '{{ route("updaterentaldetails", ":id") }}';
updatehseurl = url.replace(':id',hseupdateid);
var form = $('.updaterentaldetails')[0];
var formdata=new FormData(form);
$.ajax({
url:updatehseurl,
method:'POST',
processData:false,
contentType:false,
data:formdata,
success:function(response)
{
console.log(response);
if (response.status==400)
{
$('#update_errorlist').html(" ");
$('#update_errorlist').removeClass('d-none');
$.each(response.message,function(key,err_value)
{
$('#update_errorlist').append('<li>' + err_value + '</li>');
})
$('#rentalhouseid').val('');
$('.edit_title').html('');
$('#rental_title').val('');
$(".rentalselectcat").val('');
$('input[name^="wifi"][value="no"]').prop('checked', false);
$('input[name^="generator"][value="no"]').prop('checked', false);
$('input[name^="balcony"][value="no"]').prop('checked', false);
$('input[name^="parking"][value="no"]').prop('checked', false);
$('input[name^="cctv_cameras"][value="no"]').prop('checked', false);
$('input[name^="servant_quarters"][value="no"]').prop('checked', false);
$('#editrentalhsedetailsmodal').modal('hide');
} else if (response.status==200)
{
alertify.set('notifier','position', 'top-right');
alertify.success(response.message);
activerentalhousestable.ajax.reload();
$('#rentalhouseid').val('');
$('.edit_title').html('');
$('#rental_title').val('');
$(".rentalselectcat").val('');
$('input[name^="wifi"][value="no"]').prop('checked', false);
$('input[name^="generator"][value="no"]').prop('checked', false);
$('input[name^="balcony"][value="no"]').prop('checked', false);
$('input[name^="parking"][value="no"]').prop('checked', false);
$('input[name^="cctv_cameras"][value="no"]').prop('checked', false);
$('input[name^="servant_quarters"][value="no"]').prop('checked', false);
$('#editrentalhsedetailsmodal').modal('hide');
}
}
});
})
everything is working well except for the checkboxes i havent understood where am missing the point?
Level 1
@Snapey how do we save yes $ no answers in a database which method we can use??
Level 122
@ZohaibAhmed A checkbox can have a value, but that value must be constant. The checkbox will be checked or unchecked.
If it is unchecked it is never posted to the server as part of a form request.
In the controller you can use $request->has('generator') to populate the database with true (the checkbox was checked, or false, the checkbox was not present.
When populating the existing state of the form, you just need to know if generator is true then make checkbox checked, else make it unchecked.
If you need to persist the strings 'yes' and 'no' in the database for some strange reason then mutate the true/false in the controller or the model.
does @zohaibahmed === @stephen waweru ??
2 likes
Level 13
Hello @ZohaibAhmed This information can help you since it fits a lot to your case and it is as recommended @snapey https://stackoverflow.com/questions/41070382/how-to-save-boolean-values-in-laravel-eloquent
1 like
Level 2
@Snapey i have understood very well
Level 2
after looking into the bug keenly i noticed my code is correct and i was missing some other part elsewhere.so upon opening a model and the data from the database is filled in the inputs,i have a choice of either updating the data or closing the modal without making any change.if i close the modal without any update the data for that record remains there.what i have to do is upon closing a modal without making any change i have to empty the inputs.this is how i solved it
$(document).ready(function(){
$("#editrentalhsedetailsmodal").on('hide.bs.modal', function(){
$('#rentalhouseid').val('');
$('.edit_title').html('');
$('#rental_title').val('');
$('#rental_slug').val('');
$('#monthly_rent').val('');
$("#rental_details_ck").children("textarea").remove();
$('.hsedetailstextarea').val('');
$('#totalrooms').val('');
$('.rentalhsevideo').val('');
$(".rentalselectcat").val('');
$(".rentalhsevacancy").val('');
$(".rentalhselocation").val('');
//pass array object value to select2
$('.rentaltagselect2').val('');
// preview an image that was previously uploaded
var deleteimage=$('#showimage').removeAttr('src');
$('.rentalhseimage').html('deleteimage');
//here i gave the checkboxes a class of edit checkbox
$('.editcheckbox').prop('checked', false);
});
2 likes
Please or to participate in this conversation.