2015-11-10 4 views
5

国と州の一覧を表示するためにブートストラップフォームヘルパーを追加しました。 当初、国名は一切取り上げていませんでした。しかし、私はjQueryで国名を取得することができましたが、完全な名前は表示されません。ここでブートストラップフォームヘルパーが国名を完全にピックアップしない

<div class="signup-form"> 
    <div class="container"> 
     <div class="row"> 
      <div class="col-sm-3"></div> <!-- blank column --> 
      <div class="col-sm-6"> 
       <div class="panel panel-info"> 
        <div class="panel-heading"> 
         <h3 class="panel-title">Registration Form</h3> 
        </div> 
        <div class="panel-body"> 

         <form action="signup.php" method="post" class="form-horizontal" role="form"> 
          <div class="form-group"> <!-- First Name Field --> 
           <label class="col-sm-4 ">Name</label> 
           <div class="col-sm-8"> 
            <input class="form-control" name="name" type="text" placeholder="Ener your name"> 
           </div> 
          </div>       

          <div class="form-group"> <!-- Surname Field --> 
           <label class="col-sm-4">Surname</label> 
           <div class="col-sm-8"> 
            <input class="form-control" name="surname" type="text" placeholder="Ener your surname "> 
           </div> 
          </div>      

          <div class="form-group"> <!-- Username --> 
           <label class="col-sm-4">Username</label> 
           <div class="col-sm-8"> 
            <input class="form-control" name="username" type="text" placeholder="Enter your lowercase username "> 
           </div> 
          </div>      

          <div class="form-group"> <!-- Email Field --> 
           <label class="col-sm-4">Email</label> 
           <div class="col-sm-8"> 
            <input class="form-control" id="email" name='email' type="email" placeholder="Ener your valid email "> 
           </div> 
          </div>      

          <div class="form-group"> <!-- Password Field --> 
           <label class="col-sm-4">Password</label> 
           <div class="col-sm-8"> 
            <input class="form-control" type="password" name="password" placeholder="Ener your password (at least 6 digits) "> 
           </div> 
          </div> 

          <div class="form-group"> <!-- Confirm Password Field --> 
           <label class="col-sm-4">Confirm Password</label> 
           <div class="col-sm-8"> 
            <input class="form-control" type="password" name="confirm_password" placeholder="Retype your password "> 
           </div> 
          </div>      

          <div class="form-group"> <!-- Sex Field --> 
           <label class="col-sm-4">Sex</label> 
           <div class="col-sm-8"> 
            <select name="sex"> 
             <option>Male</option> 
             <option>Female</option> 
            </select> 
           </div> 
          </div> 

          <div class="form-group"> <!-- Phone Number Field --> 
           <label class="col-sm-4">Phone No</label> 
           <div class="col-sm-8"> 
            <input class="form-control" type="text" name="phone_no" placeholder="Enter your phone number"> 
           </div> 
          </div> 

          <div class="form-group"> <!-- Date of birth Field --> 
           <label class="col-sm-4">Date of Birth</label> 
           <div class="col-sm-8"> 
            <input class="form-control" id="dob" type="text" name="dob" placeholder="Enter your Date of birth"> 
           </div> 
          </div> 

          <div class="form-group"> <!-- Nationality Field --> 
           <label class="col-sm-4">Nationality</label> 
           <div id="country_name" class="col-sm-8 bfh-selectbox bfh-countries" data-country="NG" data-flags="true" name="country"> 
            <input type="hidden" id="country" name="country" value="">        
           </div> 
          </div> 

          <div class="form-group"> <!-- State of Residence Field --> 
           <label class="col-sm-4">State of Residence </label> 
           <div class="col-sm-8 bfh-selectbox bfh-states" data-country="country_name"> 
            <input type="hidden" id="state" name="state" value=""> 
           </div> 
          </div> 

          <div class="form-group"> <!-- Sign Up Button --> 
          <div class="col-sm-4"></div> <!-- Blank for space --> 
          <div class="col-sm-8 signup-button"> 
           <button type="submit" class="btn btn-default" action="signup.php">Sign Up</button> 
          </div> 
         </form> 
        </div> 
       </div> 

      </div> <!-- End of main colum --> 
      <div class="col-sm-3"></div> <!-- blank column --> 
     </div> <!-- End of row --> 
    </div> <!-- End of container --> 
</div> <!-- End of sign up --> 

対応のjQueryコードされています:

$(function(){ 
    $("#dob").datepicker(); 
}); 


$('document').ready(function(){ 
    $("#dob").datepicker(); 

    $(document).find(".bfh-countries input[type=hidden]").attr("name","country"); 
    $(document).find(".bfh-states input[type=hidden]").attr("name","state"); 
}); 

私はJSファイルに見てみました

ここでは、フォームの完全なコードです。私は短い名前を提供することにより、完全な名前を取得する方法があると信じて

var bootFHCountriesList = { 
    'AF': 'Afghanistan', 
    'AL': 'Albania', 
    'DZ': 'Algeria', 
    'AS': 'American Samoa', 
    'AD': 'Andorra', 
    'AO': 'Angola', 
    'AI': 'Anguilla', 
    'AQ': 'Antarctica', 
    'AG': 'Antigua and Barbuda', 
    'AR': 'Argentina', 
    'AM': 'Armenia', 
    'AW': 'Aruba', 
    'AU': 'Australia', 
    'AT': 'Austria', 
    'AZ': 'Azerbaijan', 
    'BH': 'Bahrain'}; 

:私は次のようにそれが関連付けjavascript配列の気にいらを使用していますね。しかし、私はそうする方法を知らない。

国名と州名をデータベースに保存します。

ありがとうございました

+1

「bootFHCountriesList ['AF'] 'のようにキーをインデックスとして使用すると、JavaScript配列から名前を取得できます。 'Afghanistan'を取得します。しかし、私は本当にあなたの問題がどこにあるのかは分かりません。 –

答えて

0

ごめんなさい、これを試してみてください。

<select id="countries_phone1" class="form-control bfh-countries" data-country="GR"></select> 

アイドルコードをdataにする必要があります。

関連する問題