Save Bootstrap Form Helpers Country picker to my database - php

Question

I have used Bootstrap-Form-Helpers to display the countries and the flags through a drop down box. I have used the following Html,
<div class="bfh-selectbox bfh-countries" data-country="US" data-flags="true">
<input type="hidden" value="">
<a class="bfh-selectbox-toggle" role="button" data-toggle="bfh-selectbox" href="#">
<span class="bfh-selectbox-option input-medium" data-option=""></span>
<b class="caret"></b>
</a>
<div class="bfh-selectbox-options">
<input type="text" class="bfh-selectbox-filter" name="country">
<div role="listbox">
<ul role="option">
</ul>
</div>
</div>
</div>
The PHP code to save to the database is
if (isset($_POST['btn_signup'])) {
$fname = $_POST['fname'];
$lname = $_POST['lname'];
$email = $_POST['email'];
$username = $_POST['username'];
$pass = $_POST['password'];
$cpass = $_POST['conf_pass'];
$country = $_POST['country'];
$dropdown = $_POST['dropdown'];
$query3 = "SELECT * from tbl_users WHERE email = '" . $email . "'";
$result3 = mysql_query($query3, $con) or die(mysql_error());
$query = "SELECT * from tbl_users WHERE username = '" . $username . "'";
$result = mysql_query($query, $con) or die(mysql_error());
if (mysql_num_rows($result) > 0) {
echo '<div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">';
echo '<div class="alert alert-danger alert-dismissable">';
echo '<button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>';
echo 'Username is not available! Please Try another username!!.' . mysql_error();
echo '</div>';
echo '</div>';
}
elseif ($pass != $cpass) {
echo '<div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">';
echo '<div class="alert alert-danger alert-dismissable">';
echo '<button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>';
echo 'Password typed doesnt match please retype the password correctly!!.' . mysql_error();
echo '</div>';
echo '</div>';
}
elseif (mysql_num_rows($result3) > 0) {
echo '<div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">';
echo '<div class="alert alert-danger alert-dismissable">';
echo '<button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>';
echo 'Email Already exist please try another email!!.' . mysql_error();
echo '</div>';
echo '</div>';
}
else {
$query2 = "INSERT INTO tbl_users (first_name,last_name,username,password,confPass,email,country,user_type)VALUES('{$fname}','{$lname}','{$username}','{$pass}','{$cpass}','{$email}','{$country}','{$dropdown}')";
$result2 = mysql_query($query2);
echo '<div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">';
echo '<div class="alert alert-success alert-dismissable">';
echo '<button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>';
echo 'Success! Well done its submitted.';
echo '</div>';
echo '</div>';
}
}
All my other data is entered to my database. But not the country.
Please help!!

Answer 1

You can use data-name="country" in below div tag. Then you can get in selected country in the $_POST.
<div class="bfh-selectbox bfh-countries" data-country="US" data-name="country" data-flags="true"> ..............remaining code here.............. </div>
$country = $_POST['country'];
Let me know if this help.
Thanks

Answer 2

The input field your getting is overwriting by the form helper function
Try the below code
<?php
session_start();
require_once ("includes/db.php");
print_r($_POST);
if (isset($_POST['btn_signup'])) {
$fname = $_POST['fname'];
$lname = $_POST['lname'];
$email = $_POST['email'];
$username = $_POST['username'];
$pass = $_POST['password'];
$cpass = $_POST['conf_pass'];
$country = $_POST['country'];
$dropdown = $_POST['dropdown'];
$query3 = "SELECT * from tbl_users WHERE email = '" . $email . "'";
$result3 = mysql_query($query3, $con) or die(mysql_error());
$query = "SELECT * from tbl_users WHERE username = '" . $username . "'";
$result = mysql_query($query, $con) or die(mysql_error());
if (mysql_num_rows($result) > 0) {
echo '<div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">';
echo '<div class="alert alert-danger alert-dismissable">';
echo '<button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>';
echo 'Username is not available! Please Try another username!!.' . mysql_error();
echo '</div>';
echo '</div>';
}
elseif ($pass != $cpass) {
echo '<div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">';
echo '<div class="alert alert-danger alert-dismissable">';
echo '<button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>';
echo 'Password typed doesnt match please retype the password correctly!!.' . mysql_error();
echo '</div>';
echo '</div>';
}
elseif (mysql_num_rows($result3) > 0) {
echo '<div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">';
echo '<div class="alert alert-danger alert-dismissable">';
echo '<button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>';
echo 'Email Already exist please try another email!!.' . mysql_error();
echo '</div>';
echo '</div>';
}
else {
$query2 = "INSERT INTO tbl_users (first_name,last_name,username,password,confPass,email,country,user_type)VALUES('{$fname}','{$lname}','{$username}','{$pass}','{$cpass}','{$email}','{$country}','{$dropdown}')";
$result2 = mysql_query($query2);
echo '<div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">';
echo '<div class="alert alert-success alert-dismissable">';
echo '<button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>';
echo 'Success! Well done its submitted.';
echo '</div>';
echo '</div>';
}
}
?>
<!DOCTYPE html>
<html>
<head>
<title>Mycricprofle</title>
<link rel="shortcut icon" href="http://faviconist.com/icons/be7b568b1a766b3888e5326879e1a9b8/favicon.ico" />
<link rel="stylesheet" href="css/bootstrap.min.css"/>
<link rel="stylesheet" href="css/bootstrap-theme.min.css"/>
<link rel="stylesheet" href="css/bootstrap-formhelpers-countries.flags.css"/>
<link rel="stylesheet" href="css/bootstrap-formhelpers.min.css"/>
<script src="js/vendor/jquery-1.11.2.min.js"></script>
<script src="js/vendor/bootstrap.min.js"></script>
<script src="js/bootstrap-formhelpers.min.js"></script>
<script src="js/bootstrap-formhelpers-countries.js"></script>
<style>
.style {
color: #761c19;
text-decoration: none;
}
.style a {
text-decoration: none;
font-weight: bold;
}
</style>
</head>
<body>
<div class="container">
<div class="col-md-6 col-sm-6 col-xs-12">
<h2>Signup to Create a New Account</h2>
<br/>
<form action="signup.php" method="post" enctype="multipart/form-data">
<div class="form-group">
<label for="text">First Name:</label>
<input type="text" class="form-control" placeholder="Firstname" name="fname" required/>
</div>
<br/>
<div class="form-group">
<label for="text">Last Name:</label>
<input type="text" class="form-control" placeholder="Last name" name="lname" required/>
</div>
<br/>
<div class="bfh-selectbox bfh-countries" data-country="US" data-flags="true">
<input type="hidden" id="country" name="country" value="">
<a class="bfh-selectbox-toggle" role="button" data-toggle="bfh-selectbox" href="#"> <span class="bfh-selectbox-option input-medium" data-option=""></span> <b class="caret"></b> </a>
<div class="bfh-selectbox-options">
<input type="text" class="bfh-selectbox-filter">
<div role="listbox">
<ul role="option">
</ul>
</div>
</div>
</div>
<br/>
<div class="form-group">
<label for="text">Email:</label>
<input type="email" class="form-control" placeholder="Email" name="email" required/>
</div>
<br/>
<div class="form-group">
<label for="text">Username:</label>
<input type="text" class="form-control" placeholder="Username" name="username" required/>
</div>
<br/>
<div class="form-group">
<label for="text">Password:</label>
<input type="password" class="form-control" placeholder="Password" name="password" required/>
</div>
<br/>
<div class="form-group">
<label for="text">Confirm Password:</label>
<input type="password" class="form-control" placeholder="Confirm Password" name="conf_pass" required/>
</div>
<br/>
<select class="form-control selectpicker" name="dropdown" id="type_user" required/>
<option value="player">Player</option>
<option value="recruiter">Recruiter</option>
</select>
<br/>
<br/>
<button class="mdl-button mdl-js-button mdl-button--raised mdl-button--accent" id="btn_signup" name="btn_signup">Submit</button>
</form>
<br/>
<p class="style">Back to <a href='index.php'>Home</a></p>
<p class="style">Signin to Get in <a href='signin.php'>Sigin in</a></p>
</div>
</div>
<script>
$(document).ready(function(e) {
$(document).find(".bfh-countries input[type=hidden]").attr("name","country");
});
</script>
<?php
// include('includes/footer.php');
?>
</body>
</html>
About DOM reffer this
About DOM manupilation reffer this

Answer 3

Assuming you're using at least version 2.3 of the formhelpers library, You should be able to replace this:
<div class="bfh-selectbox bfh-countries" data-country="US" data-flags="true">
<input type="hidden" id="country" name="country" value="">
<a class="bfh-selectbox-toggle" role="button" data-toggle="bfh-selectbox" href="#"> <span class="bfh-selectbox-option input-medium" data-option=""></span> <b class="caret"></b> </a>
<div class="bfh-selectbox-options">
<input type="text" class="bfh-selectbox-filter">
<div role="listbox">
<ul role="option">
</ul>
</div>
</div>
</div>
With this:
<div class="country bfh-selectbox bfh-countries" data-flags="true" data-filter="true" data-name="country"></div>
The data-name attribute specifies the name of the hidden field that's used to store the two character country code. You can also specify the value of data-country which will either supply a default value or maintain the value after the postback but that depends on how you're handling it.