检查所选状态是否具有输入的邮政编码 jQuery答案

【问题标题】：Checking if selected state has the entered zip code jQuery检查所选状态是否具有输入的邮政编码 jQuery
【发布时间】：2017-06-14 10:18:33
【问题描述】：

我想检查所选状态是否包含输入时输入的邮政编码。

我不确定我在函数中的错误到底在哪里。

我正在使用的 api 返回正确的信息，但这是我的错误。

<select id="shipping_state">
  <option value="">Select a state</option>
  <option value="AL">Alabama</option>
  <option value="AK">Alaska</option>
  <option value="AZ">Arizona</option>
  <option value="AR">Arkansas</option>
  <option value="CA">California</option>
  <option value="CO">Colorado</option>
  <option value="CT">Connecticut</option>
  <option value="DE">Delaware</option>
  <option value="DC">District Of Columbia</option>
  <option value="FL">Florida</option>
  <option value="GA">Georgia</option>
  <option value="HI">Hawaii</option>
  <option value="ID">Idaho</option>
  <option value="IL">Illinois</option>
  <option value="IN">Indiana</option>
  <option value="IA">Iowa</option>
  <option value="KS">Kansas</option>
  <option value="KY">Kentucky</option>
  <option value="LA">Louisiana</option>
  <option value="ME">Maine</option>
  <option value="MD">Maryland</option>
  <option value="MA">Massachusetts</option>
</select>

所以我想从输入中获取值并检查上面选择的状态是否包含该邮政编码，是否不显示用户错误消息以及是否继续

<input type="text" id="shipping_postcode" name="shipping_postcode" placeholder="ZIP" class="input-text">

这是我的 jQuery 函数

function is_int(value) {
        if ((parseFloat(value) == parseInt(value)) && !isNaN(value)) {
            return true;
        } else {
            return false;
        }
    }
   // $('#checkout-button').off("click");
  $('#checkout-button:contains("Submit")').click(function () {
    //console.log("click!");
    var state = "";
    var postalCode = "";
    var zipInputVal = $("#shipping_postcode").val();

    var el = $("#shipping_postcode");

    var stateCheck = '';

    var stateSelect = $('#shipping_state').val();
// Did they type five integers?
    if ((el.val().length == 5) && (is_int(el.val()))) {

        // Call Ziptastic for information
        $.ajax({
        url: "https://zip.getziptastic.com/v2/US/" + el.val(),
        cache: false,
        dataType: "json",
        type: "GET",
        success: function(result, success) {        
            console.log(result);

            stateCheck = result.state;
        },
        error: function(result, success) {
            alert("Your zip code doesnt match with your state");
        }
        });
    }
    else if(stateSelect === stateCheck) {
        alert('done');
    }
    else {
        alert('Not correct');
    }


});

【问题讨论】：

很确定它不会进入错误回调 - 只有当 API 通过 HTTP 状态代码指示错误时才会发生这种情况。您需要在成功回调中处理这两种情况。
它实际上正在工作https://jsfiddle.net/qz2ydr0g/
@NidhinChandran 它只对输入的邮政编码的结果进行console.log，但输入的邮政编码与选择的状态不匹配。我需要检查所选状态是否与输入的邮政编码匹配
但是当我将 zip '12363' 与 'Arkansas' 一起使用时，我收到了“您的邮政编码与您的州不匹配”的警报
@NidhinChandran 那是因为那个邮政编码不正确，我认为

标签： javascript jquery api

【解决方案1】：

你把条件放错地方了。检查这个

function is_int(value) {
  if ((parseFloat(value) == parseInt(value)) && !isNaN(value)) {
    return true;
  } else {
    return false;
  }
}
// $('#checkout-button').off("click");
$('#checkout-button:contains("Submit")').click(function() {
  //console.log("click!");
  var state = "";
  var postalCode = "";
  var zipInputVal = $("#shipping_postcode").val();

  var el = $("#shipping_postcode");

  var stateCheck = '';

  var stateSelect = $('#shipping_state').val();
  // Did they type five integers?
  if ((el.val().length == 5) && (is_int(el.val()))) {

    // Call Ziptastic for information
    $.ajax({
      url: "https://zip.getziptastic.com/v2/US/" + el.val(),
      cache: false,
      dataType: "json",
      type: "GET",
      success: function(result, success) {
        console.log(result);

        stateCheck = result.state;
        if (stateSelect === stateCheck) {
          alert('done');
        } else {
          alert('Not correct');
        }
      },
      error: function(result, success) {
        alert("Your zip code doesnt match with your state");
      }
    });
  } else {
    alert('5 chars required');
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<select id="shipping_state">
  <option value="">Select a state</option>
  <option value="AL">Alabama</option>
  <option value="AK">Alaska</option>
  <option value="AZ">Arizona</option>
  <option value="AR">Arkansas</option>
  <option value="CA">California</option>
  <option value="CO">Colorado</option>
  <option value="CT">Connecticut</option>
  <option value="DE">Delaware</option>
  <option value="DC">District Of Columbia</option>
  <option value="FL">Florida</option>
  <option value="GA">Georgia</option>
  <option value="HI">Hawaii</option>
  <option value="ID">Idaho</option>
  <option value="IL">Illinois</option>
  <option value="IN">Indiana</option>
  <option value="IA">Iowa</option>
  <option value="KS">Kansas</option>
  <option value="KY">Kentucky</option>
  <option value="LA">Louisiana</option>
  <option value="ME">Maine</option>
  <option value="MD">Maryland</option>
  <option value="MA">Massachusetts</option>
</select>
<input type="text" id="shipping_postcode" name="shipping_postcode" placeholder="ZIP" class="input-text">
<button id="checkout-button" type="submit">Submit</button>

【讨论】：

【解决方案2】：

这是您的问题的简单解决方案。在成功回调函数中使用以下代码

stateCheck = result.state;
if (stateSelect === stateCheck) {
    alert('done');
} else {
    alert('Not correct');
}

如果这个if ((el.val().length == 5) && (is_int(el.val()))) {的条件，则删除else 线。这肯定会奏效。

【讨论】：