Bootstrap helper does not select the full name of the country

Question

I added a bootstrap helper form for the list of countries and their states. Initially, he did not collect the name of the country. But I managed to get the country name using jQuery, but it does not display the full name.

Here is the full form code:

<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 --> 

Here is the relevant 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"); }); 

I tried to look into the js file. I think it uses the javascript somthing associated array 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 that there is a way to get the full name by providing a short name. But I do not know how to do this.

I want to store the country name and state name in the database.

thanks

Answer 1

Sorry if you are late, but try this;

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

You must specify the country code data .