I want to load some ajax data after selected a value from dropdown in textbox.
Eg: After selecting a teacher from dropdown, teachers remaining credit and credit_taken value should be load. How do I do it with ajax?
NB: Here teacher value has selected from another dropdown selecting in Ajax
<script>
$('#teacher').on('change',function(e){
var teach_id = $('#teacher option:selected').attr('value');
var info=$.get("{{url('ajax-teach')}}",{teach_id:teach_id});
info.done(function(data){
$.each(data,function(index,subcatObj){
/// Here will be the loaded code ///
});
});
info.fail(function(){
alert('ok');
});
});
</script>
Here is my controller:
Route::get('ajax-teach',function(Request $request){
$teach_id = $request::input(['teach_id']);
$teachers=\App\Teacher::where('teacher_id','=',$teach_id)->get();
return Response::json($teachers);
});
Here is the view Page:
<div class="form-group">
<label for="">Teacher</label>
<select class="form-control input-sm" required name="teacher_id" id="teacher" >
<option value=""></option>
</select>
</div>
<div class="form-group">
<label>Credit to be Taken</label>
<input type="text" name="credit_taken" id="credit_taken" class="form-control" required placeholder="Credit to be Taken">
</div>
<div class="form-group">
<label>Remaining Credit</label>
<input type="text" name="remaining_credit" class="form-control" required placeholder="Remaining Credit">
</div>
In this tutorial, I show how you can auto-populate dropdown with jQuery AJAX in Laravel. 1. Database Configuration Open .env file. Specify the host, database name, username, and password. 2. Table structure Create departments and employees table using migration and add some records.
You need a JavaScript library to send a network request without a page refresh to the server to use Ajax. The ajax request can be GET or POST or other valid types. To use AJAX in Laravel, you need to import a jquery library in your view file to use ajax functions of jquery, which will be used to send and receive data using ajax from the server.
You need to gradually complete the following steps for creating the feature of auto loading the data from the server or database while scrolling in laravel using jQuery AJAX. Ensure you have the composer tool installed on your system, further open the terminal, and execute the command to create the laravel project.
Data is loaded in this dropdown based on the department selection using jQuery AJAX. Define on change event on the first dropdown. Read selected value and assign to id variable. Empty the second dropdown except the first <option>.
In your routes (routes/web.php
)
Route::get( '/ajaxteach', array(
'as' => 'ajaxteach',
'uses' => 'TeachController@get_teach'
) );
In your controller (app/Http/Controllers/TeachController.php
)
class TeachController extends Controller
{
public function get_teach(Illuminate\Http\Request $request)
{
$teach_id = $request->get('teach_id');
$teachers=\App\Teacher::where('teacher_id','=',$dept_id)->get();
return response()->json(['response' => $teachers]);
}
}
Then in your AJAX script you can use at least one of the following ways
use absolute url in javascript code
var base_url = 'http://localhost/laravel'
$.ajax({
type: "GET",
url : base_url+"/ajaxteach",
data : dataString,
success : function(data){
console.log(data);
}
use url()
with route
$.ajax({
type: "POST",
url : "{{url('ajaxteach')}}",
data : dataString,
success : function(data){
console.log(data);
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With