我想在这里使用addresspicker http://xilinus.com/jquery-addresspicker/demos/index.html来自动填写我正在开发的地址表单。
我是网络开发的新手，已经开始使用twitter引导程序和几个用于表单验证的查询插件和一个工作正常的日期选择器，但是不知道如何将addresspicker合并到我的页面中以便我可以使用回调函数填充表单的地址部分。
有人可以帮助我或指出我正确的方向。我也遇到过这个示例https://github.com/elmariachi111/jquery-addresspicker，但它不包含表单部分。
到目前为止，这是我的代码：
<!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>
非常感谢你能给我的任何帮助...... 路加
答案 0 :(得分：0)
将以下内容放在脑中：
<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>
确保下载jquery.ui.addresspicker.js并将其放在index.html所在的文件夹中。