OnChange Function in Laravel using JQuery?

In this tutorial I’m going to learn how to use on Change function using laravel jQuery. On change function would be work on category wise.

First go to blade page where you want to show the data.

<form method="post" id="sample_form" class="form-horizontal"
		enctype="multipart/form-data">
		@csrf

		<div class="form-group" id="name_form">
			<label class="control-label col-md-4">Project Name</label>
			<div class="col-md-12">
			<select name="project_name" id="project_name" class="w-100 p-2">
					<option value="default" class="form-control text-dark">Select Project </option>
					@foreach(App\Http\Controllers\Api\ProjectApiController::getvalueall($slug_id) as $project)

					<option name="{{$project['id']}}" value="{{$project['project_name']}}">{{$project['project_name']}}</option>
					@endforeach
				</select>

			</div>
		</div>

		<div class="form-group" id="name_form">
			<label class="control-label col-md-4">URL</label>
			<div class="col-md-12">
				<select name="url" id="url" class="w-100 p-2">
					<option value="" class="form-controll text-dark">Select URL </option>
					<option value="" class="form-controll text-dark"> </option>
				</select>

			</div>
		</div>

		<div class="form-group" id="name_form">
			<label class="control-label col-md-4">Keyword</label>
			<div class="col-md-12">
				<!-- <input type="text" name="keyword" id="keyword" class="form-control" /> -->
				<!-- testing keyword open -->
				<input id="keyword1"  name="keyword" class="form-control">
				<!-- testing keyword close -->
			</div>
			<!-- information open -->
			<span class="fa fa-info-circle text-success"> 
			<span class="text-danger mt-2">After Each Keyword Press Enter  </span>
			</span>
			<!-- information close -->
		</div>
		<!-- Sending admin_id and admin_email in hidden input box -->
		<input type="hidden" value="{{ Auth::user()->id }}" name="admin_id"
			id="admin_id" />
		<input type="hidden" value="{{ Auth::user()->email }}" id="admin_email" name="admin_email" />
		<input type="hidden" value="NULL" name="user_id" id="user_id">
		<input type="hidden" value="NULL" name="user_email" id="user_email">
		<input type="hidden" value="" id="url_id" name="url_id" />
		<input type="hidden" value="" id="project_id" name="project_id">
		<input type="hidden" value="{{$org_slug}}" id="slug" name="u_org_slugname">
		<input type="hidden" value="{{$slug_id}}" name="u_org_organization_id" id="u_org_organization_id">
		<input type="hidden" value="{{$getting_roll_id}}" name="u_org_role_id" id="u_org_role_id">
</div>

<!-- <br /> -->
<div class="form-group text-center">
	<input type="hidden" name="action" id="action" />
	<input type="hidden" name="hidden_id" id="hidden_id" />
	<input type="submit" name="action_button" id="action_button"
		class="btn btn-warning float-center" value="Add" />
</div>
</form>

Next go to script tag and put below code.

$('#project_name').on('change',function(){
        console.log('project name change');
        if(this.value !='default'){
            ajaxCall();
        } else{
            $('#url').empty();
            $('#url').append('<option> Select URL</option>');
        }
        function ajaxCall() {
        console.log('in ajaxCall');
        var project_id = $("#project_name option:selected").attr("name");
        console.log(project_id);
        $.ajax({
                "type": "GET",
                "url": "{{url('api/v1/j/addurl/getProject')}}/"+project_id,
                "data": {},
                "headers": {
                    "Authorization": "Bearer " + localStorage.getItem('a_u_a_b_t')
                },
                success: function(html) {
                    console.log(html.data);
                    $('#url').empty();
                    $('#url').append('<option> Select Url </option>');
                    $.each(html.data, function(i, link) {
                        console.log('all category here: ' + link.url);
                        $('#url').append('<option name="' + link.id +'" value="' + link.url + '">' + link.url +'</option>'); 
                    });                    
                },
                error: function(errorResponse) {
                    console.log(errorResponse);
                }
            });
        }
    });

Output:-

Now data is coming successfully.

Hi I am Amit Kumar Thakur Experienced as s Software Developer with a demonstrated history of working in the information technology and services industry. Skilled in HTML, CSS, Bootstrap4, PHP, Laravel-9 , REST API,FB API,Google API, Youtube Api, Bitbucket,Github,Linux and jQuery. Strong engineering professional focused in Computer/Information Technology Administration and Management. Currently my profile is to Software Developer, analyze the requirement, creating frame for web application, coding and maintenance.

Related Posts

Could not fetch https://api.github.com/repos/Setasign/FPDI/zipball/

When I composer update in Laravel its throwing error could not fetch issues so let’s start to finish this issues. 1st step go to GitHub setting section….

Error: error:0308010C:digital envelope routines::unsupported

In this tutorial I’m going to share how to solve Error: error:0308010C:digital envelope routines::unsupported. Just copy below code and run your terminal. After run above all code…

API calls from the server require an appsecret_proof argument

In this tutorial im going to solve this issue API calls from the server require an appsecret_proof argument. 1st step go to developer facebook advance setting and…

How to Delete All Records Older Than 30 Days in Laravel 10 ?

In Laravel, you can use the Eloquent ORM to delete records older than a certain number of days. Here’s an example of how you can delete all…

How to safely remove Laravel Debugbar ?

What is Laravel Debugbar ? Laravel Debugbar is a package for the Laravel PHP framework that provides a debug bar or toolbar for your application. It offers…

Example of __construct and __destruct in laravel ?

In Laravel, PHP classes can have a constructor and destructor like any other PHP class. The constructor is called when an object is created, and the destructor…

0 0 votes
Article Rating
Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x
()
x