2017-06-14 67 views
0

我想檢查所選狀態是否包含輸入中輸入的郵政編碼。檢查選定狀態是否有輸入的郵政編碼jQuery

我不確定我的功能到底在哪裏。

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


}); 
+0

很確定它不會進入錯誤回調 - 只有當API通過HTTP狀態碼指示錯誤時纔會發生。您需要在成功回調中處理這兩種情況。 – CBroe

+0

它實際上是工作[https://jsfiddle.net/qz2ydr0g/](https://jsfiddle.net/qz2ydr0g/) –

+0

@NidhinChandran它只對輸入的郵政編碼的結果做console.log,但輸入的郵政編碼與所選狀態不匹配。我需要檢查所選擇的狀態是否與輸入的郵政編碼 –

回答

0

功能您放置的條件錯了地方。 選中此

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>

+0

這工作的罰款,TNX的幫助 –

0

這裏是你的問題的簡單解決方案。使用下面的代碼裏面你成功的回調函數

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

,並刪除否則,如果該if ((el.val().length == 5) && (is_int(el.val()))) { 線的條件。這肯定會起作用。

相關問題