How to check if two input fields are filled in and wait 2 seconds using jquery

Question

I am using an api that is getting the correct street name and place when a user types in his zip code and house number.

Currently I got the following layout:

<p class="form-row form-row form-row-wide address-field validate-required" id="billing_postcode_field" data-o_class="form-row form-row form-row-last address-field validate-required validate-postcode">
   <label for="billing_postcode" class="">Postcode<abbr class="required" title="required">*</abbr></label><input type="text" class="input-text " name="billing_postcode" id="billing_postcode" value="">
</p>
<p class="form-row form-row form-row-wide address-field validate-required" id="billing_housenumber_field" data-o_class="form-row form-row form-row-last address-field validate-required validate-postcode">
   <label for="billing_housenumber" class="">Huisnummer<abbr class="required" title="required">*</abbr></label><input type="text" class="input-text " name="billing_housenumber" id="billing_housenumber" value="">
</p>
<p class="form-row form-row form-row-wide address-field validate-required" id="billing_address_1_field">
   <label for="billing_address_1" class="">Adres<abbr class="required" title="required">*</abbr></label><input type="text" class="input-text " name="billing_address_1" id="billing_address" value="">
</p>
<p class="form-row form-row form-row-wide address-field validate-required" id="billing_city_field" data-o_class="form-row form-row form-row-wide address-field validate-required">
   <label for="billing_city" class="">Plaats<abbr class="required" title="required">*</abbr></label><input type="text" class="input-text " name="billing_city" id="billing_city" placeholder="" value="">
</p>

Inside a form with id checkoutform .

I've tried the following already:

tpj('#checkoutform').on('input', function() {
  var val1 = tpj('#billing_postcode').val();
  var val2 = tpj('#billing_housenumber').val();
  if (val1 > 0 && val2 > 0) {
    console.log('both filled in');
  } else {
    console.log('both not filled in');
  }
});

This shows the log in the console every keypress inside either fields. In the end I want to post with ajax to a PHP script that makes an api call, I got a limited amount of calls each day so this is very bad.

I only want to make 1 request when both fields are filled in, what would be the best course of action?

I was thinking maybe wait 1 or 2 seconds after both fields are filled in and then post to the script.

How can I do that? (Only the time part, I can fix the ajax posting myself).

If anyone has a better suggestion to what I am thinking please say so.

Answer 1

Here is one approach:

1. Set a timeout function for 2000ms and in it check if both inputs have values. 1.1. If they have values, post the form. 1.2. If they don't, set the timeout function again.
2. On an input event clear the timeout and set it again for 2000ms - this will reset your timeout counter.

All this will guarantee that you will always wait for at least two seconds after each input and also will continue waiting till you have something in both of your inputs.

Answer 2

You dont need to wait 2 seconds, just make the event when the user fill the form.

$(function()
{
    $("#btn").on("click",function()
    {
        let inputOne = $("#inputOne").val();
        let inputTwo = $("#inputTwo").val();
        if (inputOne == "" || inputTwo == "")
        {
            alert("fill inputs");
        }
        else
        {
            // Ajax call goes here
        }
    })
})