Javascript 使用已将表单加载到DOM中的jQuery操作表单字段值

我有一个HTML表单，可以根据用户的操作在DOM中上下移动，因此地址表单将加载到一个变量中，以便稍后重新注入DOM

/* Load the address form into a variable to be re-injected into the dom later */
var address_form = $('#address_temp').html();
$('#address_temp').remove();

接下来，我进行了一个AJAX调用，并基于响应，希望用值填充表单字段。因此，表单中有地址1、地址2和邮政编码，我想做如下操作：

$.ajax({
   url: "/qualify/",
   dataType: "json",
   data: {
      ajax : 'true',
      lookup : 'true',
      postcode : $('#avail_input').val()                
   },
   success: function(data) {    
      $('#address1').val(data.street);          
      $('#address2').val(data.city);
      $('#postcode').val(data.postcode);
}});

---

但是，这不起作用，因为地址已加载到DOM中，并且副本已放置在变量中。如何替换表单字段的值？我是否需要将其重新加载回DOM以再次操作它？

在成功处理程序中，您必须操作

地址表单

变量。我相信可以这样做：

  success: function(data) {    
        address_form.find('#address1').val(data.street);          
        address_form.find('#address2').val(data.city);
        address_form.find('#postcode').val(data.postcode);
  }

---

不要将表单保存为html字符串，而是将dom本身复制为jquery对象：

/* Load the address form into a variable to be re-injected into the dom later */
var address_form = $('#address_temp').clone(true);
$('#address_temp').remove();

然后，您可以操纵表单的dom，即使它不在文档的dom中：

success: function(data) {    
      $('#address1', address_form).val(data.street);          
      $('#address2', address_form).val(data.city);
      $('#postcode', address_form).val(data.postcode);
}

我所做的是在

地址\u表单

中搜索以下id

附言

在我看来，一个更干净的等价物将会改变，但这主要是一个品味的问题：）

---

您可能想了解jQuery的方法。

在第一次使用

find

时，在Firebug中抛出并出错（

TypeError:address\u form.find不是一个函数）

。在您的回答中

address\u form

是一个字符串，不是jquery对象。您提供的第二段代码是否确实更改了表单字段的值？在添加您提供的代码之后，我正在执行

var address\u form\u str=address\u form.html（）$（“#选项_容器”）.html（地址#表格(str)）

但是

地址\u表单\u str

不包括更新的值。首先，为什么需要将其转换为html？使用以下命令：

$（'#选项_容器'）.empty（）.append（地址_表单）并且它应该可以正常工作。我只是想确定，成功方法有权访问
地址\u表单
？您的控制台日志中有任何错误吗？您确定
数据
包含它应该包含的值吗？不，控制台日志中没有错误。我正在使用最新版本的Firefox。success方法肯定可以访问address_表单，因为我可以使用console.log将其转储出去。空/追加方法也不起作用。我尝试过将
数据
值更改为任意值，但它不会更新表单。是的，你应该这样做，只是没有理由这么做。让我给你举个代码示例，它可能会澄清一些事情。这只是一个示例。忽略缺少的部分：）
success: function(data) {
    address_form
        .find('#address1').val(data.street).end()
        .find('#address2').val(data.city).end()
        .find('#postcode').val(data.postcode);
}