获取包装器的 innerHTML，包括用户在输入元素中输入的值

Posted 2023-05-07

【中文标题】获取包装器的 innerHTML，包括用户在输入元素中输入的值

【英文标题】：Get wrapper's innerHTML including values entered by users in input elements

【发布时间】：2013-12-28 20:13:18

【问题描述】：

我有一个基于 DIV 可见性设置为可见或隐藏显示的多页表单。一旦用户对他/她的回答“满意”，他们就会点击一个按钮。此时需要发生的一件事是为给定的 DIV 获取所有呈现的 html，并将其全部设置为字符串变量，以便可以与 mPDF 一起使用。

我发现了两种方法，实际上似乎可以抓住一些东西...只是不是我需要的！

我的 DIV 是“page1”

我正在尝试设置字符串 var 'stringContent'

这是简化的形式：

<div id="page1" class="page" style="visibility:visible;">
Applicant Name: <input type="text" size="50" name="name1" >
</form>
<p><input type="button" id="C1" value="Continue" onClick="showLayer('page2')"></p>
</div>

这是我尝试过的：

var stringContent = $('#page1').html();  
// this works, showing the exact HTML string...not the rendered HTML

var stringContent = $('#page1').text();
// this shows only "Applicant Name:"

都不显示用户对输入文本框的输入

我正在尝试做的事情是否可能？其他人似乎以类似的方式成功地使用了 mPDF……不过，也许不是我试图接近它的方式。

我是不是走错了路？有没有更好的方法把它变成我真正想要的 mPDF？

【问题讨论】：

看起来 HTML 无效： 元素需要嵌套，而不是交错。

所以您想从现有的 div 中获取 innerHTML，包括用户在输入字段中输入的值？如果是这样，那么问题在于这些值不在 html (<input value="user input" etc..) 中，而是在内存中。可能（尚未测试）您可以通过向您的输入字段添加一个 onchange/onblur 事件来解决此问题，该事件会更新它的物理值属性，从而获取 html 中的值（就好像它们是默认值一样）然后复制它..（我现在正在为这个想法设置一个测试小提琴）。

看起来有人已经遇到过类似的问题。这能解决你的问题吗？ ***.com/questions/1388893/…

jQuery: Get HTML as well as input values的可能重复

【参考方案1】：

您说从您的包装元素返回的 innerHTML/innerText“都不显示用户在输入文本框中的输入”并且您想要“获取呈现的 HTMl”。

“问题”是呈现的 html 没有（或为空）默认值。我说的是 html 源代码中的“物理”值：<input type="text">。

用户在 input-elements 中输入的是元素的“内存中”（可以这么说）值，而不是 html-source 中提供的默认值。所以，innerHTML 做的正是它应该做的事情。抓住 html 源代码。

现在，我在上面的评论中说我有一个肮脏的想法来解决这个问题：

如果输入元素值发生变化（onchange 甚至 onblur），您可以像这样更新元素的物理值属性：this.setAttribute('value', this.value);

所以，当您现在获取 wrappig 元素的 innerHTML 时，您会看到 html-source 现在具有默认值属性集。

请参阅 this rough jsfiddle 在此处演示该概念。

function foobar(wrapperId)
   var elms=document.getElementById(wrapperId).getElementsByTagName('input')
   ,      L=elms.length
   ,      F=function()this.setAttribute('value', this.value);
   ;
   while(L--) elms[L].onchange=F;
   //textarea's use innerHTML instead of value for their default in-source 'value'
   //select and radiobuttons etc might need some work to, take it from here.


window.onLoad=function()
   foobar('wrapperDivId');
;

注意，您不能在源代码中设置事件函数，因为您将通过 innerHTML 将其复制到。因此，您必须通过 javascript 设置它们。

希望这会有所帮助。

【参考方案2】：

您没有获得输入文本框，因为您从 div page1 获得文本，而不是输入。要获取输入文本框的值，试试这个。

var stringContent = $('#page1').find('input').val();

【讨论】：

只是为了澄清......我发布的代码是一个非常简化的版本......有许多文本输入和单选按钮和计算变量。我需要一种方法来获取所有呈现的 html，以便将其插入 mPDF。上面的行会显示“所有内容”还是只显示输入的答案？

在这种情况下，基于给定示例的输入，但这取决于您的 html 标记。也许你可以在 jsfiddle 上显示 html 标记，我会看到的。无论如何，因为它有很多文本输入和单选按钮，你不应该把它保存到一个字符串中，而是一个数组或对象，否则你必须创建很多字符串变量。

我希望实现的最终结果是将 mPDF 中显示的呈现 HTML 作为原始的 PDF 版本...据我所知，设置 $html 字符串变量是唯一的方法来做到这一点。 （我知道在此之前我没有对这个名称进行任何引用......但如果我可以设置 stringContent ，那么我也可以设置 $html 并让它提供 mPDF。

【参考方案3】：

我看了一会儿，我想我想出了一个很好的解决方案。我写了一个小函数，用来自另一个表单的.serializeArray() 数据的数据填充一个表单。我只在 Chrome 中尝试过。函数如下：

var populate = function ($form, data) 

  $.each( data, function (idx, field) 

    var $ctrl = $form.find(':input').filter(function() return this.name === field.name; );
    var value = field.value;
    var type = $ctrl.attr('type') ? $ctrl.attr('type') : 'text';

    switch (type) 
      case "radio":
      case "checkbox":
        $ctrl.each(function()
          var $this = $(this);
          if( $this.val() === value )
            $this.prop('checked', true);
          
        );
      break;
      default:
        $ctrl.val( value );
      break;
    

  );

;

如果您愿意，这里有一个小演示供您使用： http://jsbin.com/udirAfo/2/edit?html,js,output

【参考方案4】：

感谢所有做出贡献的人。我已经非常仔细地研究了每个答案......决定我应该朝着不同的方向前进。我现在将表单发布到不同的文件，希望我能够从生成的 HTML 中进行“干净”提取并获得该提要 mPDF。非常感谢...这都是好东西，尤其是考虑到我（显然）只是在学习！