检查所选状态是否输入了输入的邮政编码jQuery

时间:2017-06-14 10:18:33

标签: javascript jquery api

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

我不确定我的功能在哪里确实存在错误。

我正在使用的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');
    }


});

2 个答案:

答案 0 :(得分:0)

您将条件置于错误的位置。 检查一下

&#13;
&#13;
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');
  }
});
&#13;
<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>
&#13;
&#13;
&#13;

答案 1 :(得分:0)

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

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

如果if ((el.val().length == 5) && (is_int(el.val()))) {的条件,请删除其他内容 线。这肯定会有用。