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

Get wrapper's innerHTML including values entered by users in input elements

本文关键字：输入 用户 元素 包括 innerHTML 包装 获取      更新时间：2024-06-07

我有一个多页表单，它是根据设置为可见或隐藏的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，这正是我在这里追求的？

您说从包装元素返回的innerHTML/innerText"两者都不显示用户在输入文本框中的输入"，并且您希望"获取渲染的HTMl"。

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

用户在输入元素中输入的是元素的"内存中"值，而不是html源中提供的默认值。因此，innerHTML完全按照它应该做的去做…获取html源代码。

现在，我在上面的评论中表示，我有一个肮脏的想法来修复这个：

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

因此，当您现在获得wrappig元素的innerHTML时，您将看到html源现在已经设置了默认值属性。

看到这个粗糙的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设置它们。

希望这能有所帮助。

您没有得到输入文本框，因为您得到的是div page1中的文本，而不是输入。要获取输入文本框值，请尝试此操作。

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

我看了一会儿，觉得我找到了一个很好的解决方案。我编写了一个小函数，用另一个表单的.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，输出

感谢所有做出贡献的人。我仔细研究了每一个答案。。。我决定也许应该换一个方向。我现在正在将表单粘贴到另一个文件中，希望我能够从生成的HTML中进行"干净"的提取，并获得该提要mPDF。非常感谢。。。这都是好东西，尤其是考虑到我（显然）只是在学习！

相关文章：