Bootstrap表单助手没有选择完整的国家/地区名称 [英] Bootstrap form helper not picking complete country name
问题描述
我已添加bootstrap表单助手以列出国家及其状态。
最初,它根本没有取得国名。但我设法用jQuery检索国家名称,但它没有显示完整的名称。
I have added bootstrap form helper to list down the countries and their states. Initially, It was not picking up the country name at all. But I managed to retrieve the country name with jQuery but it is not showing the complete name.
以下是表格的完整代码:
Here is the complete code of the form:
<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代码:
Here is the corresponding jquery code:
$(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文件。我认为它使用了关联的javascript数组,例如:
I tried to look into js file. I think it uses associate javascript array somthing like:
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'};
我相信有办法通过提供短名称来检索完整名称。但我不知道该怎么做。
I believe there is way to retrieve the complete name by providing the the short name. But I do not know how to do so.
我想将国家名称和州名存储在数据库中。
I want to store the country name and state name in the database.
谢谢
推荐答案
对不起,如果它迟到了,试试这个;
Sorry if its late but try this;
<select id="countries_phone1" class="form-control bfh-countries" data-country="GR"></select>
您应该将国家/地区代码提供给 data
属性。
You should give country code to data
attribute.
这篇关于Bootstrap表单助手没有选择完整的国家/地区名称的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!