Level 88
What exactly is the problem? It's a lot of code, but not a clear problem!
Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.
hello, guys, I am working on two data fields and get the available room without refresh page using ajax, but I encounter this problem.
<strong>Start date:</strong>
<div class="input-group date" data-provide="datepicker">
<input type="text" name="check_in" class="form-control">
<div class="input-group-addon">
<span class="glyphicon glyphicon-th"></span>
</div>
</div>
</div>
<div class="form-group">
<strong>End date:</strong>
<div class="input-group date" data-provide="datepicker">
<input type="text" name="check_out" class="form-control">
<div class="input-group-addon">
<span class="glyphicon glyphicon-th"></span>
</div>
</div>
</div>
<div class="form-group">
<div class="form-group">
<strong>Quantity:</strong>
<select name="quantity" >
@for($i=1; $i<=$roomQuantity; $i++)
<option >{{$i}}</option>
@endfor
</select>
</div>
but i want the quantity change as the data changes, so i update the code like this
<label>Check Out:</label>
<div class="input-group date" data-provide="datepicker">
<input id="check_out" name="check_out" type="text" class="form-control">
<div class="input-group-addon">
<span class="glyphicon glyphicon-th"></span>
</div>
</div>
<button type="button" name="filter" id="filter" class="btn btn-info btn-sm">Check Availabilty</button>
<br>
<div class="form-group">
<strong>Quantity:</strong>
<select name="availableQuantity" id="availableQuantity" >
</select>
</div>
@section('javascript')
var _token = $('input[name="_token"]').val();
availableQuantity();
function availableQuantity(check_in = '', check_out = '')
{
$.ajax({
url:"{{ route('available-quantity') }}",
method:"POST",
data:{check_in:check_in, check_out:check_out, _token:_token},
dataType:"json",
success:function(data)
{
var output = text(roomQuantity-data.quantity);
// $('#availableQuantity').text(data.length);
for(var count = 0; count <= output; count++)
{
$('#availableQuantity option[value=' + output+ ']').prop('Selected',true);
// output += 'data[count]';
// output += '<td>' + data[count].post_title + '</td>';
// output += '<td>' + data[count].post_description + '</td>';
// output += '<td>' + data[count].date + '</td></tr>';
// }
// $('tbody').html(output);
}
})
}
$('#filter').click(function(){
var check_in = $('#check_in').val();
var check_out = $('#check_out').val();
if(check_in != '' && check_out != '')
{
fetch_data(check_in, check_out);
}
else
{
alert('Both Date is required');
}
});
on ApiController
public function availableQuantity(Request $request, Room $room)
{
if($request->ajax())
{
$roomQuantity=$room->quantity;
if($request->check_in != '' && $request->check_out != '')
{
$status_id = BookStatus::where('name', 'Booked')->firstOrFail()->id;
$data = $room->whereNotIn('id',App\Booking::select('id')->with('bookable')->where(function ($query) {
$query->when(request(['check_in','check_out']), function($q){
return $q->where('bookable.check_out','=<', request('check_in'))
->where('bookable.check_in','>=',request('check_out'))
->where('bookable.book_status_id',$status_id);
});
}))->get();
} //end of if (request->request)
else
{
//
}
return response()->json($data, $roomQuantity);
} //end of if (request->ajax)
}
web
//ajax-availability
Route::post('api/available-quantity','APIController@availableQuantity')->name('available-quantity');
any help i am new to ajax , thanks
Please or to participate in this conversation.