2017-02-19 13 views
0

英国の郵便番号の前半を確認するには小さなフォームが必要です。 Iveはポストコードの前半を配列に追加しました。英国郵便番号の前半を配列と比較して確認するフォーム

フォームには単純な入力フィールドと送信ボタンがあります。ユーザーが例えばN1のような郵便番号の前半に入力すると、フォームに配列をチェックさせたい場合、一致があればdivを消してメッセージを表示させます。

<form class="navbar-form navbar-left" role="search" id="searchForm"> 
<div class="form-group"> 
<input type="text" name="s" class="form-control covered-area-search-input" placeholder="Enter the first half of your postcode..."> 
</div> 
<button type="submit" class="btn btn-default" value="Search"><i class="fa fa-paper-plane"></i> Submit</button> 
</form> 

<div id="result"></div> 

のjQuery:

var postcodes = ["N1", "N2", "N3", "N4", "N5", "N6", "N7", "N8", "N9", "N10", "N11", "N12", "N13", "N14", "N15", "N16", "N17", "N18", "N19", "N20", "N21", "N22", "NW1", "NW2", "NW3", "NW4", "NW5", "NW6", "NW7", "NW8", "NW9", "NW10", "NW11", "E1", "E2", "E3", "E4", "E5", "E6", "E7", "E8", "E9", "E10", "E11", "E12", "E13", "E14", "E15", "E16", "E17", "E18", "W1", "W2", "W3", "W4", "W5", "W6", "W7", "W8", "W9", "W10", "W11", "W12", "W13", "W14"]; 

$('#search').submit(function(){ 
     var postcode = $('#search input').val(); 
     if($.inArray(postcode.toUpperCase(), postcodes) > -1){ 
      $('#result').html('Yes, we cover your area!'); 
     }else{ 
      $('#result').html('Oops, it looks like we do not cover that area yet.'); 
     } 

     return false; 
    }); 

私は上記のコードが、運を試してみました。どうすればいい?事前に多くの感謝。

答えて

1

id 'search'のフォームはありません。それは 'searchForm'です。 以下のようにjQueryを更新できますか?

$('#searchForm').submit(function(){ 
    var postcode = $('#searchForm input').val(); 
    if($.inArray(postcode.toUpperCase(), postcodes) > -1){ 
     $('#result').html('Yes, we cover your area!'); 
    }else{ 
     $('#result').html('Oops, it looks like we do not cover that area yet.'); 
    } 

    return false; 
}); 
+0

ありがとうございました。問題を修正しました。 :) searchFormの代わりにsearchを使用した理由はわかりません。 – Sami

+0

部分一致のためにこのコードを変換する方法に関する提案はありますか?例えば。誰かがE1 4ABをタイプした場合、郵便番号の最初の半分が配列内にあるので、trueを返します。 –

関連する問題