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

【问题标题】：manipulating form field values with jQuery that has had the form loaded into the DOM使用已将表单加载到 DOM 中的 jQuery 操作表单字段值
【发布时间】：2012-11-09 19:58:04
【问题描述】：

我有一个 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 以再次对其进行操作？

【问题讨论】：

标签： javascript jquery html ajax dom

【解决方案1】：

不要将表单保存为 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);
}

我正在做的是在 address_form 中搜索以下 id。

附言

在我看来，一个更干净的等价物会发生变化，但这主要是一个品味问题 :)

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

您可能想了解 jQuery 的 clone() 方法。

【讨论】：

您提供的第二个代码块是否真的改变了表单域的值？添加您提供的代码后，我正在做var address_form_str = address_form.html(); $('#options_container').html(address_form_str); 但address_form_str 不包括更新的值。
首先，为什么要转成html？使用这个：$('#options_container').empty().append(address_form); 它应该可以正常工作。我只是想确定一下，成功方法可以访问address_form？您的控制台日志中有任何错误吗？你确定data 包含它应该包含的值吗？
不，控制台日志中没有错误。我正在使用最新版本的 Firefox。成功方法肯定可以访问 address_form，因为我可以使用 console.log 将其转储出来。空/追加方法也不起作用。我尝试将 data 值更改为任意值，但它不会更新表单。
是的，你应该这样做，只是没有理由这样做。让我为你做一个代码示例，它可能会澄清一些事情。
这只是它的例子。忽略缺少的部分:) jsfiddle.net/L6wzE

【解决方案2】：

在成功处理程序中，您必须操作address_form 变量。我相信可以这样做：

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

【讨论】：

第一次使用 find 时在 Firebug 中抛出错误 (TypeError: address_form.find is not a function)。
在你的回答中 address_form 是一个字符串，而不是一个 jquery 对象。