将 Bootstrap 表单助手国家选择器保存到我的数据库

Question

我使用 Bootstrap-Form-Helpers 通过下拉框显示国家和旗帜。我使用了以下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>

保存到数据库的PHP代码是

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">&times;</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">&times;</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">&times;</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">&times;</button>';
        echo 'Success! Well done its submitted.';
        echo '</div>';
        echo '</div>';
    }
}

我的所有其他数据都输入到我的数据库中。但不是国家。 请帮忙！！

Answer 1

您可以在下面的 div 标签中使用 data-name="country"。然后你就可以在$_POST中进入选定的国家了。

<div class="bfh-selectbox bfh-countries" data-country="US" data-name="country" data-flags="true"> ..............remaining code here.............. </div>

$country = $_POST['country'];

如果这有帮助，请告诉我。

谢谢

Answer 2

假设您至少使用 2.3 版的 formhelpers 库，您应该可以替换它：

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

有了这个：

<div class="country bfh-selectbox bfh-countries" data-flags="true" data-filter="true" data-name="country"></div>

data-name 属性指定用于存储两个字符国家代码的隐藏字段的名称。您还可以指定 data-country 的值，该值将提供默认值或在回发后保持该值，但这取决于您如何处理它。

Answer 3

您获得的输入字段被表单帮助函数

覆盖

试试下面的代码

<?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">&times;</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">&times;</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">&times;</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">&times;</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>

关于DOM参考这里

关于DOM manupilation参考这里