根据输入的 zip 填充州和城市？

Posted 2023-02-23

【中文标题】根据输入的 zip 填充州和城市？

【英文标题】：Populate state and city based on the entered zip?

【发布时间】：2018-07-18 14:01:46

【问题描述】：

我的表格可以输入邮政编码，并根据该城市和州自动填充。因此，这三个字段以相同的形式彼此相邻。这是我的表单示例：

$('.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()，但这不起作用，因为我需要指定我需要填充的确切输入。如果有人对如何实现这一目标有更好的想法，请告诉我。谢谢。

【问题讨论】：

您要准确填充什么？您是否尝试用用户输入的内容替换标签标签？

@GrandIQ 如果您查看我的示例，您将看到两个输入字段。一份用于州，一份用于市。这两个应该被填充。所以我需要获取每个元素的id，以便填充这些值。

您可以为城市 id="city' 分配一个状态 id="state" 和另一个 id。这样​​您可以使用 jquery 定位它们吗？然后相应地为每个填充数据。

$(this).closest('.form-group') 将选择父表单组。尝试选择最接近的表单，然后向下遍历表单组 $form_group = $(this).closest('form').find('.form-group'); $form_group.find('input.city').val(city); $form_group.find('input.state').val(state);

@GrandIQ 我在上面的问题中已经提到这个函数应该在系统中的多个表单上工作，其中id's 可能不同，所以我应该使用state 和city 类来填充这些值。

【参考方案1】：

这将始终发布到最近的州和城市输入表单！ 希望我能帮上忙！

$('.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>

【参考方案2】：

只要所有不同形式的元素以相同的方式排列，下面的方法就可以工作。

jQuery .prev()

jQuery .find()

var stateFormGroup = $(this).closest('.form-group').prev();
var stateElement = stateFormGroup.find('input');
var cityElement = stateFormGroup.prev().find('input');

【讨论】：

他希望它也可以在其他论坛上使用，我假设它们可能在同一页面上，所以我们不能使用相同的 ID

@GrandIQ 你是对的，他们在同一个页面上，他们有不同的 id。

有道理，对不起，我误读了这个问题。即使这不适用于这种情况，我相信不同形式的东西需要相同才能起作用。如果 ID 不是一些，它们会共享一个公共类吗？如果没有，您可以使用类似 .closest('.form-group').prev() 的方法来获取前一个兄弟元素。 api.jquery.com/prev

@GabrielGates 您的解决方案与使用closest() 方法的解决方案在效率上有什么不同吗？与此同时，我找到了解决方案，并使用了prev() 和parent() 方法来获取所需的元素。

@espresso_coffee .parent() 只要.form-group 元素是直接父元素就可以工作。不确定在这种情况下它是否比.closest() 更有效。

【参考方案3】：

在此处发布评论作为答案。

$(this).closest('.form-group') 将选择父表单组。尝试选择最接近的表单，然后向下遍历表单组。

$form_group = $(this).closest('form').find('.form-group'); 
$form_group.find('input.city').val(city); 
$form_group.find('input.state').val(state);