Is there any way that I can call an ajax request only when the user has filled in all required fields? I have three fields for an event title, a list and a job title. Once all of these fields have been filled in I want to fire an ajax request to get the data that I want, but I don’t know how to add an event listener to check if all these fields have values? Obviously users may change their input so I need to be checking whether all fields are filled in all the time before running the search.

This is how the data to search with is being obtained:

$('#event').autocomplete({
            source: function(request, response) {
                $.ajax({
                    url : 'search.php',
                    dataType: "json",
                    data: {
                        event_title: request.term,
                        type: 'event'
                    },
                    success: function(events) {
                        response($.map(events, function (event) {
                            return {
                                label: event.date + "| " + event.title + "[" + event.short_name + "]",
                                value: event.title,
                                id: event.id
                            }
                        }));
                    }
                });
            },
            autoFocus: true,
            minLength: 1
        });

        $("#event").on("autocompleteselect", function (event, ui) {
            $("#event_id").val(ui.item.id);
        });

        $("#list").autocomplete({
            source: function (request, response) {
                $.ajax({
                    url: "search.php",
                    dataType: "json",
                    data: {
                        list_name: request.term,
                        type: 'list'
                    },
                    success: function (lists) {
                        response(lists);
                        response($.map(lists, function (list) {
                            return {
                                label: list.l_name,
                                value: list.l_name,
                                id: list.id
                            }
                        }));
                    }
                });
            }
        });

        $("#list").on("autocompleteselect", function (event, ui) {
            $("#list_id").val(ui.item.id);
        });

I then want to perform an ajax request using the data from those fields – but a user may obviously change those fields and they will start of blank.

Read more here:: Run ajax request only when user has filled in all required fields