根据输入的邮编填充州和城市?
Populate state and city based on the entered zip?
我有可以输入邮政编码的表格,并且会根据该表格自动填充城市和州。所以这三个字段在同一个表单中是相邻的。这是我的表格示例:
$('.get-zip').keyup(getZipCode);
function getZipCode(){
var fldZip = $(this);
console.log($(this).closest('.form-group'));
if(fldZip.val().length === 5 && fldZip.val().match(/^[0-9]+$/)) {
//Send Ajax request and populate closest State and City fields.
}else{
//$(cityID).val('');
//$(stateID).val('');
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script language="javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<form name="frmSave" id="frmSave" autocomplete="off">
<div class="form-group">
<label class="control-label" for="city"><span class="label label-primary">City:</span></label>
<input type="text" class="form-control city" name="frm_city" id="frm_city" maxlength="50" placeholder="City auto populate based on the zip code" readonly>
</div>
<div class="form-group">
<label class="control-label" for="state"><span class="label label-primary">State:</span></label>
<input type="text" class="form-control state" name="frm_state" id="frm_state" maxlength="2" placeholder="State auto populate based on the zip code" readonly>
</div>
<div class="form-group">
<label class="control-label" for="zip"><span class="label label-primary">Zip:</span></label>
<input type="text" class="form-control get-zip" name="frm_zip" id="frm_zip" maxlength="5" placeholder="Enter 5 digits ZIP code" pattern="[0-9]{5}$" required>
</div>
<div class="row">
<div class="form-group col-xs-12 col-sm-12 col-md-12 col-lg-12">
<button type="submit" name="frm_submit" id="frm_submit" class="btn btn-primary">Submit</button>
</div>
<div class="form-group col-xs-12 col-sm-12 col-md-12 col-lg-12">
<div id="frmSave_message"></div>
</div>
</div>
</form>
此函数在我的应用程序中以其他几种形式使用,因此我需要它以任何形式工作。我想知道填充 Zip 输入字段上方的州和城市的最简单方法是什么?我尝试使用 closest()
但这不起作用,因为我需要指定我需要填充的确切输入。如果有人对如何实现这一目标有更好的想法,请告诉我。谢谢。
只要所有不同的形式都以相同的方式排列元素,下面的方法就可以工作。
var stateFormGroup = $(this).closest('.form-group').prev();
var stateElement = stateFormGroup.find('input');
var cityElement = stateFormGroup.prev().find('input');
在这里发表评论作为回答。
$(this).closest('.form-group')
将 select 父表单组。尝试 select 最接近的表单,然后向下遍历到表单组。
$form_group = $(this).closest('form').find('.form-group');
$form_group.find('input.city').val(city);
$form_group.find('input.state').val(state);
这将始终post到最接近的州和城市输入形式!
希望我有所帮助!
$('.get-zip').keyup(getZipCode);
function getZipCode(){
var fldZip = $(this);
// Testing Purpose
$(this).closest("form").find(".state").val($(this).val());
$(this).closest("form").find(".city").val($(this).val());
if(fldZip.val().length === 5 && fldZip.val().match(/^[0-9]+$/)) {
$(this).closest("form").find(".state").val("YOUR VALUE");
$(this).closest("form").find(".city").val("YOUR VALUE");
}else{
//$(cityID).val('');
//$(stateID).val('');
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script language="javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<form name="frmSave" id="frmSave" autocomplete="off">
<div class="form-group">
<label class="control-label" for="city"><span class="label label-primary">City:</span></label>
<input type="text" class="form-control city" name="frm_city" id="frm_city" maxlength="50" placeholder="City auto populate based on the zip code" readonly>
</div>
<div class="form-group">
<label class="control-label" for="state"><span class="label label-primary">State:</span></label>
<input type="text" class="form-control state" name="frm_state" id="frm_state" maxlength="2" placeholder="State auto populate based on the zip code" readonly>
</div>
<div class="form-group">
<label class="control-label" for="zip"><span class="label label-primary">Zip:</span></label>
<input type="text" class="form-control get-zip" name="frm_zip" id="frm_zip" maxlength="5" placeholder="Enter 5 digits ZIP code" pattern="[0-9]{5}$" required>
</div>
<div class="row">
<div class="form-group col-xs-12 col-sm-12 col-md-12 col-lg-12">
<button type="submit" name="frm_submit" id="frm_submit" class="btn btn-primary">Submit</button>
</div>
<div class="form-group col-xs-12 col-sm-12 col-md-12 col-lg-12">
<div id="frmSave_message"></div>
</div>
</div>
</form>
我有可以输入邮政编码的表格,并且会根据该表格自动填充城市和州。所以这三个字段在同一个表单中是相邻的。这是我的表格示例:
$('.get-zip').keyup(getZipCode);
function getZipCode(){
var fldZip = $(this);
console.log($(this).closest('.form-group'));
if(fldZip.val().length === 5 && fldZip.val().match(/^[0-9]+$/)) {
//Send Ajax request and populate closest State and City fields.
}else{
//$(cityID).val('');
//$(stateID).val('');
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script language="javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<form name="frmSave" id="frmSave" autocomplete="off">
<div class="form-group">
<label class="control-label" for="city"><span class="label label-primary">City:</span></label>
<input type="text" class="form-control city" name="frm_city" id="frm_city" maxlength="50" placeholder="City auto populate based on the zip code" readonly>
</div>
<div class="form-group">
<label class="control-label" for="state"><span class="label label-primary">State:</span></label>
<input type="text" class="form-control state" name="frm_state" id="frm_state" maxlength="2" placeholder="State auto populate based on the zip code" readonly>
</div>
<div class="form-group">
<label class="control-label" for="zip"><span class="label label-primary">Zip:</span></label>
<input type="text" class="form-control get-zip" name="frm_zip" id="frm_zip" maxlength="5" placeholder="Enter 5 digits ZIP code" pattern="[0-9]{5}$" required>
</div>
<div class="row">
<div class="form-group col-xs-12 col-sm-12 col-md-12 col-lg-12">
<button type="submit" name="frm_submit" id="frm_submit" class="btn btn-primary">Submit</button>
</div>
<div class="form-group col-xs-12 col-sm-12 col-md-12 col-lg-12">
<div id="frmSave_message"></div>
</div>
</div>
</form>
此函数在我的应用程序中以其他几种形式使用,因此我需要它以任何形式工作。我想知道填充 Zip 输入字段上方的州和城市的最简单方法是什么?我尝试使用 closest()
但这不起作用,因为我需要指定我需要填充的确切输入。如果有人对如何实现这一目标有更好的想法,请告诉我。谢谢。
只要所有不同的形式都以相同的方式排列元素,下面的方法就可以工作。
var stateFormGroup = $(this).closest('.form-group').prev();
var stateElement = stateFormGroup.find('input');
var cityElement = stateFormGroup.prev().find('input');
在这里发表评论作为回答。
$(this).closest('.form-group')
将 select 父表单组。尝试 select 最接近的表单,然后向下遍历到表单组。
$form_group = $(this).closest('form').find('.form-group');
$form_group.find('input.city').val(city);
$form_group.find('input.state').val(state);
这将始终post到最接近的州和城市输入形式! 希望我有所帮助!
$('.get-zip').keyup(getZipCode);
function getZipCode(){
var fldZip = $(this);
// Testing Purpose
$(this).closest("form").find(".state").val($(this).val());
$(this).closest("form").find(".city").val($(this).val());
if(fldZip.val().length === 5 && fldZip.val().match(/^[0-9]+$/)) {
$(this).closest("form").find(".state").val("YOUR VALUE");
$(this).closest("form").find(".city").val("YOUR VALUE");
}else{
//$(cityID).val('');
//$(stateID).val('');
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script language="javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<form name="frmSave" id="frmSave" autocomplete="off">
<div class="form-group">
<label class="control-label" for="city"><span class="label label-primary">City:</span></label>
<input type="text" class="form-control city" name="frm_city" id="frm_city" maxlength="50" placeholder="City auto populate based on the zip code" readonly>
</div>
<div class="form-group">
<label class="control-label" for="state"><span class="label label-primary">State:</span></label>
<input type="text" class="form-control state" name="frm_state" id="frm_state" maxlength="2" placeholder="State auto populate based on the zip code" readonly>
</div>
<div class="form-group">
<label class="control-label" for="zip"><span class="label label-primary">Zip:</span></label>
<input type="text" class="form-control get-zip" name="frm_zip" id="frm_zip" maxlength="5" placeholder="Enter 5 digits ZIP code" pattern="[0-9]{5}$" required>
</div>
<div class="row">
<div class="form-group col-xs-12 col-sm-12 col-md-12 col-lg-12">
<button type="submit" name="frm_submit" id="frm_submit" class="btn btn-primary">Submit</button>
</div>
<div class="form-group col-xs-12 col-sm-12 col-md-12 col-lg-12">
<div id="frmSave_message"></div>
</div>
</div>
</form>