0

I have a zipcode checker which posts using ajax after the length of an input field is equal to 6. This works, except the ajax is posted twice. Why is that? I am using an api which has 1000 calls each month, so this behaviour already cuts that in half.

Maybe it would make sense to me that because of some bug it fires again when typing a 7th character, but that is not even the case, when I type exactly 6 characters the ajax is fired twice.

$("body").on("keyup", "#billing_postcode", function() {
  var value = $(this).val();
  var housenumber = $("#billing_streetnumber").val();
  if (housenumber.length >= 1) {
    if (value.length == 6) {
      url = 'catalog/postcodecheck.php';

      var $postcode = $('#billing_postcode').val();
      var $huisnummer = $('#billing_streetnumber').val();

      var posting = $.post(url, {
        postcode: $postcode,
        huisnummer: $huisnummer
      });
      posting.done(function(data) {
        var content = $($.parseHTML(data));
        $("#postcoderesult").empty().append(content);
      });
    } else {

    }
  } else {
    alert('Vul eerst je huisnummer in voor dat je verder kan.');
    $("#billing_postcode").val('');
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-lg-3">
  <p class="single-form-row">
    <label>Huisnummer <span class="required">*</span></label>
    <input type="text" name="billing_streetnumber" id="billing_streetnumber" required>
  </p>
</div>
<div class="col-lg-4">
  <p class="single-form-row">
    <label>Toevoeging (optioneel)</label>
    <input type="text" name="billing_streetextra" id="billing_streetextra">
  </p>
</div>
<div class="col-lg-5">
  <p class="single-form-row">
    <label>Postcode<span class="required">*</span></label>
    <input type="text" name="billing_postcode" id="billing_postcode" required>
  </p>
</div>
<div id="postcoderesult" class="col-lg-12">
  <div class="row">
    <div class="col-lg-6">
      <p class="single-form-row">
        <label>Straatnaam <span class="required">*</span></label>
        <input type="text" name="billing_street" id="billing_street" disabled required>
      </p>
    </div>
    <div class="col-lg-6">
      <p class="single-form-row">
        <label>Stad<span class="required">*</span></label>
        <input type="text" name="billing_city" id="billing_city" disabled required>
      </p>
    </div>
  </div>
</div>
twan
  • 2,450
  • 10
  • 32
  • 92
  • 1
    Presumably you're getting repeated `keyup` events - you could set a flag when you first process the ajax call and test it next time to avoid the call if it's a repeat. – peeebeee Nov 12 '19 at 08:44
  • 2
    You probably binded the keyup event twice, cause your code [works fine](https://jsfiddle.net/skobaljic/w60df1q9/2/). What I noticed is that you bind on keyup, but that won't catch holding the key, neither pasting the code, so you better use [input](https://stackoverflow.com/questions/17384218/jquery-input-event) event instead. – skobaljic Nov 12 '19 at 08:49
  • 1
    as @peeebee and @skobaljic said you probably binded the keyup event twice, add preventDefault to stop it from calling it twice `$("body").on("keyup", "#billing_postcode", function(e) { e.preventDefault();` – Ram Segev Nov 12 '19 at 09:05
  • Thank you, I fixed it with the `input` event @skobaljic talked about. Never heard about it, but this also prevents a user from spamming the input field for tons of ajax calls. – twan Nov 12 '19 at 09:14

0 Answers0