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");
}
});
.on('input' ,
instead of.change()
.. but I think.on('input'
in this case will cause a lot of problems .. in your case you need toblur