Jquery 带引导的地址选择器
我想在这里使用地址选择器来自动完成我正在开发的地址表单 我对web开发完全陌生，已经开始使用twitter引导程序，其中有两个用于表单验证的查询插件和一个工作正常的日期选择器，但不知道如何将addresspicker合并到我的页面中，以便我可以使用回调函数填充表单的地址部分 有人能帮我吗？或者给我指出正确的方向。我也遇到过这个例子，但它不包括表单部分 以下是我目前的代码：Jquery 带引导的地址选择器,jquery,twitter-bootstrap,Jquery,Twitter Bootstrap,我想在这里使用地址选择器来自动完成我正在开发的地址表单 我对web开发完全陌生，已经开始使用twitter引导程序，其中有两个用于表单验证的查询插件和一个工作正常的日期选择器，但不知道如何将addresspicker合并到我的页面中，以便我可以使用回调函数填充表单的地址部分 有人能帮我吗？或者给我指出正确的方向。我也遇到过这个例子，但它不包括表单部分 以下是我目前的代码： <!DOCTYPE html> <html> <head>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Add a member</title>
<link href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css" rel="stylesheet">
<link href="http://twitter.github.com/bootstrap/assets/css/bootstrap-responsive.css" rel="stylesheet">
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.no-icons.min.css" rel="stylesheet">
<link href="//netdna.bootstrapcdn.com/font-awesome/3.1.1/css/font-awesome.css" rel="stylesheet">
<link href="css/datepicker.css" rel="stylesheet">
<style type="text/css">
/* Sticky footer styles
-------------------------------------------------- */
.top-margin
{
margin-top: 20px;
}
.help-inline {
color: #FF0000;
}
</style>
</head>
<body>
<div class="container top-margin"> <div class="well text-center"><h1 class="muted">Add a member</h1></div></div>
<div class="container">
<div class="well">
<form id="signup" class="form-horizontal" method="post" action="success.php">
<legend>Member entry</legend>
<div class="control-group">
<label class="control-label">First Name</label>
<div class="controls">
<div class="input-prepend">
<span class="add-on"><i class="icon-user"></i></span>
<input type="text" class="input-xlarge" id="fname" name="fname" placeholder="first name">
</div>
</div>
</div> <!-- Control-group -->
<div class="control-group ">
<label class="control-label">Last Name</label>
<div class="controls">
<div class="input-prepend">
<span class="add-on"><i class="icon-user"></i></span>
<input type="text" class="input-xlarge" id="lname" name="lname" placeholder="last name">
</div>
</div>
</div> <!-- Control-group -->
<div class="control-group">
<label class="control-label">Email</label>
<div class="controls">
<div class="input-prepend">
<span class="add-on"><i class="icon-envelope"></i></span>
<input type="text" class="input-xlarge" id="email" name="email" placeholder="email">
</div>
</div>
</div> <!-- Control-group -->
<div class="control-group">
<label class="control-label">Home Telephone</label>
<div class="controls">
<div class="input-prepend">
<span class="add-on"><i class="icon-phone"></i></span>
<input type="text" class="input-xlarge" id="telephone" name="telephone" placeholder="home number">
</div>
</div>
</div> <!-- Control-group -->
<div class="control-group">
<label class="control-label">Mobile Number</label>
<div class="controls">
<div class="input-prepend">
<span class="add-on"><i class="icon-mobile-phone"></i></span>
<input type="text" class="input-xlarge" id="mobile" name="mobile" placeholder="mobile number">
</div>
</div>
</div> <!-- Control-group -->
<div class="control-group">
<label class="control-label">Join Date</label>
<div class="controls">
<div class="input-prepend">
<span class="add-on"><i class="icon-calendar"></i></span>
<input type="text" class="span2" id="jdate" name="jdate" placeholder="dd-mm-yyyy">
</div>
</div>
</div> <!-- Control-group -->
<div class="control-group">
<label class="control-label">Date of Birth</label>
<div class="controls">
<div class="input-prepend">
<span class="add-on"><i class="icon-calendar"></i></span>
<input type="text" class="span2" id="dofb" value="01-01-1980" name="dofb" placeholder="dd-mm-yyyy">
</div>
</div>
</div> <!-- Control-group -->
<div class="control-group ">
<label class="control-label">Proposed By</label>
<div class="controls">
<div class="input-prepend">
<span class="add-on"><i class="icon-user"></i></span>
<select class="span2" name="pby">
<option selected>-</option>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
<option>7</option>
<option>8</option>
<option>9</option>
<option>10</option>
</select>
</div>
</div>
</div> <!-- Control-group -->
<div class="control-group ">
<label class="control-label">Seconded By</label>
<div class="controls">
<div class="input-prepend">
<span class="add-on"><i class="icon-user"></i></span>
<select class="span2" name="sby">
<option selected>-</option>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
<option>7</option>
<option>8</option>
<option>9</option>
<option>10</option>
</select>
</div>
</div>
</div> <!-- Control-group -->
<div class="control-group">
<label class="control-label">Gender</label>
<div class="controls">
<div id="gender" name="gender" class="btn-group" data-toggle="buttons-radio">
<button type="button" class="btn btn-primary">Male</button>
<button type="button" class="btn btn-primary">Female</button>
</div>
</div>
</div> <!-- Control-group -->
<div class="control-group">
<label class="control-label">BCF</label>
<div class="controls">
<input type="checkbox" id="bcf" value="bcf" name="bcf">
</div>
</div> <!-- Control-group -->
<legend>Address</legend>
<div class="control-group ">
<label class="control-label">Address Line 1</label>
<div class="controls">
<div class="input-prepend">
<span class="add-on"><i class="icon-home"></i></span>
<input type="text" class="input-xlarge" id="addressl1" name="addl1" placeholder="address line 1">
</div>
</div>
</div> <!-- Control-group -->
<div class="control-group ">
<label class="control-label">Address Line 2</label>
<div class="controls">
<div class="input-prepend">
<span class="add-on"><i class="icon-home"></i></span>
<input type="text" class="input-xlarge" id="addl2" name="addl2" placeholder="address line 2">
</div>
</div>
</div> <!-- Control-group -->
<div class="control-group ">
<label class="control-label">City</label>
<div class="controls">
<div class="input-prepend">
<span class="add-on"><i class="icon-home"></i></span>
<input type="text" class="input-xlarge" id="city" name="city" placeholder="city">
</div>
</div>
</div> <!-- Control-group -->
<div class="control-group ">
<label class="control-label">County</label>
<div class="controls">
<div class="input-prepend">
<span class="add-on"><i class="icon-home"></i></span>
<input type="text" class="input-xlarge" id="county" name="county" placeholder="county">
</div>
</div>
</div> <!-- Control-group -->
<div class="control-group ">
<label class="control-label">Post Code</label>
<div class="controls">
<div class="input-prepend">
<span class="add-on"><i class="icon-home"></i></span>
<input type="text" class="input-medium" id="pcode" name="pcode" placeholder="post code">
</div>
</div>
</div> <!-- Control-group -->
<div class="control-group">
<label class="control-label"></label>
<div class="controls">
<button type="submit" class="btn btn-success" >Create Member</button>
</div>
</div> <!-- Control-group -->
</form>
</div>
</div>
<!-- Javascript placed at the end of the file to make the page load faster -->
<script src="http://twitter.github.com/bootstrap/assets/js/jquery.js"></script>
<script src="http://twitter.github.com/bootstrap/assets/js/bootstrap-button.js"></script>
<script src="js/bootstrap-datepicker.js"></script>
<script type="text/javascript" src="http://jzaefferer.github.com/jquery-validation/jquery.validate.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#signup").validate({
rules:{
gender:"required",
fname:"required",
lname:"required",
email:{
required:true,
email: true
}
},
messages: {
email:{
email: "Please enter a valid email address"
}
},
errorClass: "help-inline"
});
});
$('#jdate').datepicker({
format: 'dd-mm-yyyy',
todayBtn: 'linked'
});
$('#dofb').datepicker({
format: 'dd-mm-yyyy',
todayBtn: 'linked'
});
</script>
</body>
</html>
添加成员
/*粘性页脚样式
-------------------------------------------------- */
.上页边距
{
边缘顶部：20px；
}
.联机帮助{
颜色：#FF0000；
}
添加成员
成员条目
名字
姓
电子邮件
家庭电话
手机号码
加入日期
出生日期
提议人
-
1.
2.
3.
4.
5.
6.
7.
8.
9
10
附议
-
1.
2.
3.
4.
5.
6.
7.
8.
9
10
性别
男性
女性
BCF
地址
地址行1
地址行2
城市
县
邮政编码
创建成员
$（文档）.ready（函数（）{
$（“#注册”）.validate({
规则：{
性别：“必需”，
fname：“必需”，
lname:“必需”，
电邮：{
要求：正确，
电子邮件：真的
}
},
信息：{
电邮：{
电子邮件：“请输入有效的电子邮件地址”
}
},
errorClass:“帮助内联”
});
});
$（'#jdate'）。日期选择器({
格式：“dd-mm-yyyy”，
今日BTN:'链接'
});
$（'#dofb'）。日期选择器({
格式：“dd-mm-yyyy”，
今日BTN:'链接'
});
卢克在你的脑海里放上以下内容：
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<script src="jquery.ui.addresspicker.js"></script>
<script>
$( "#addressl1" ).addresspicker();
</script>
$（“#addressl1”）.addresspicker（）；