2

I have two form fields that I am controlling with this jQuery code

This is the html code

$('form :input').change(function() {
  var pickup = $("#pickup").val();
  var destination = $("#destination").val();

  if (pickup !== "" && destination !== "") {
    console.log("all filed");
  } else {
    console.log("change but not filled");
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form name="order">
  <div class="form-group col-md-6 ">
    <label for="pickup">Pickup Location</label>
    <input type="text" name="pickup" id="pickup" class="form-control form-field" placeholder="Pickup Location" required>
  </div>
  <div class="form-group col-md-6 ">
    <label for="destination">Destination</label>
    <input type="text" class="form-control form-field" id="destination" name="destination" placeholder="Destination" required>
  </div>
  <hr/>
  <div class="form-group col-md-12 ">
    <button type="button" class="form-control btn btn-success" disabled>Confirm Order</button>
  </div>
</form>

When I fill the fields with some data and i fill both fields, the event is thrown immediately that the two form fields are filled but when i delete some of the data in any of the form fields, i have to click outside the form field for the event to be triggered. Is there a way i can make sure the event is triggered immediately?.

Update to include places api

var pickup = document.getElementById('pickup');
var destintion = document.getElementById('destination');
var options = {componentRestrictions: {country: 'nl'}};

new google.maps.places.Autocomplete(pickup, options);
new google.maps.places.Autocomplete(destination, options);

$('form :input').on('input', function() { 
   var pickup = $("#pickup").val();
   var destination = $("#destination").val();

   if(pickup !== "" && destination !== "") {
   console.log("all filed");
   }
   else{
   console.log("change but not filled");
   }
}); 
11
  • you can use .on('input' , instead of .change() .. but I think .on('input' in this case will cause a lot of problems .. in your case you need to blur Commented Dec 26, 2018 at 14:58
  • 1
    Change event won't occur until you blur away from the field. No way to reproduce behavior you describe getting event to trigger before you blur. Perhaps you have some other event listeners also?
    – charlietfl
    Commented Dec 26, 2018 at 14:59
  • @Mohamed-Yousef on input works but its a bit of a problem for auto complete. I am suing google places auto complete.
    – Gandalf
    Commented Dec 26, 2018 at 15:04
  • @charlietfl I dont have other listeners
    – Gandalf
    Commented Dec 26, 2018 at 15:04
  • 1
    Of course you have to click outside. As has been said, "change" fires after the field is blurred.
    – Taplar
    Commented Dec 26, 2018 at 15:13

1 Answer 1

2

You can try the below code:

$('form :input').on('input', function() {
  var pickup = $("#pickup").val();
  var destination = $("#destination").val();

  if (pickup !== "" && destination !== "") {
    console.log("all filed");
  } else {
    console.log("change but not filled");
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form name="order">
  <div class="form-group col-md-6 ">
    <label for="pickup">Pickup Location</label>
    <input type="text" name="pickup" id="pickup" class="form-control form-field" placeholder="Pickup Location" required>
  </div>
  <div class="form-group col-md-6 ">
    <label for="destination">Destination</label>
    <input type="text" class="form-control form-field" id="destination" name="destination" placeholder="Destination" required>
  </div>
  <hr/>
  <div class="form-group col-md-12 ">
    <button type="button" class="form-control btn btn-success" disabled>Confirm Order</button>
  </div>
</form>

5
  • Why keyup instead of input?
    – Taplar
    Commented Dec 26, 2018 at 15:20
  • 1
    No, keyup literally fires for every keyup. This includes arrow keys, and other keys that do not change the actual value of the field. input only fires when the value changes, and will fire before the blur happens.
    – Taplar
    Commented Dec 26, 2018 at 15:30
  • 1
    The point being keyup will do the same thing as input, but in cases where it really should not, as there's no actual work to do for the keys that do not change the value.
    – Taplar
    Commented Dec 26, 2018 at 15:32
  • yes I understand. But I have mentioned on whose keyup it should work. Thats why I have answered it as keyup. And yes you are right we can use input. In this case keyup and input should work as same. Correct me if I am wrong? Commented Dec 26, 2018 at 15:32
  • 1
    It's always important to be aware of when you are writing logic that is causing the system to perform more work than necessary.
    – Taplar
    Commented Dec 26, 2018 at 15:33

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.