0

我有两个用这个 jQuery 代码控制的表单字段

这是html代码

$('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>

当我用一些数据填充字段并填充两个字段时，会立即引发两个表单字段已填充的事件，但是当我删除任何表单字段中的一些数据时，我必须在表单字段之外单击以获取要触发的事件。有没有办法确保事件立即触发？

更新以包含地点 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");
   }
});
4

1 回答 1

1

你可以试试下面的代码：

$('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>

于 2018-12-26T15:16:19.303 回答