In this tutorail i’m going to share how to use onchange function in laravel and get the value of onchage functions.

What is Onchange Function ?

The onchange function is not a specific function on its own; rather, it is an event handler attribute used in HTML and JavaScript. It is commonly used with form elements, such as input fields, select boxes, and textareas, to execute a script or function when the value of the element is changed by the user.

How to use it ?

Go to blade page and put below code

<select name="project_ids" id="project_ids" class="form-control" required
    autocomplete="off">
    <option value="" class="text-dark">Select Project Name
    </option>
    <!-- Other options go here -->
</select>

Next go to script and put below code

$('#project_ids').on('click', function() {
                    console.log('Selected a project');
                    var selectedProjectId = $(this).find(':selected').attr('name');
                    $('#projects_id').val(selectedProjectId);
                    // Print the selected project ID
                    console.log('Selected Project ID:', selectedProjectId);
                    ajaxCall();
                });
                function ajaxCall() {
                    // Get the currently selected project name
                    var selectedProjectName = $('#project_ids').val();
                    $.ajax({
                        type: "GET",
                        url: "{{ url('api/v1/j/project/index/') }}/" + slug_id,
                        data: {},
                        headers: {
                            "Authorization": "Bearer " + localStorage.getItem('a_u_a_b_t')
                        },
                        success: function(html) {
                            console.log("Data received successfully");
                            console.log(html.data);
                            // Clear and populate the dropdown or perform other actions
                            var projectIdsDropdown = $('#project_ids');
                            // Clear existing options, but keep the "Select Url" option
                            projectIdsDropdown.find('option:not(:first)').remove();
                            $.each(html.data, function(i, link) {
                                console.log('All category here: ');
                                projectIdsDropdown.append('<option name="' + link.id + '" value="' +
                                    link.project_name + '">' + link.project_name + '</option>');
                            });
                            // Reselect the previously selected project name
                            projectIdsDropdown.val(selectedProjectName);
                        },
                        error: function(errorResponse) {
                            console.error('Error in AJAX call');
                            console.log(errorResponse);
                        }
                    });
                }

Output :-