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

我有一个多页表单，它基于DIV visibility设置为visible或hidden来显示。一旦用户对他/她的答案感到“满意”，他们将单击一个按钮。此时需要做的事情之一是获取给定DIV的所有呈现HTML，并将其全部设置为字符串变量，以便可以与mPDF一起使用

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

我的部门是“第一页”

我正在尝试设置字符串变量“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>

两者都不在输入文本框中显示用户的输入

我想做的事可能吗？其他人似乎也以类似的方式成功地使用了mPDF……不过，也许不是我试图采用的方式

---

我走错方向了吗？有没有更好的方法将其输入mPDF，这正是我在这里想要的？

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

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

---

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

“问题”是呈现的html没有（或空）默认值。我说的是html源代码中的“物理”值：

用户在输入元素中输入的是元素的“内存”（也就是说）值，而不是html源中提供的默认值。因此，innerHTML完全按照它应该做的做。。抓取html源代码

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

如果输入元素值发生更改（onchange或甚至onblur），则可以像这样更新元素的物理值属性：

this.setAttribute（'value'，this.value）

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

请参见此处演示的概念

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设置它们

希望这有帮助。
我看了一会儿，我想我找到了一个很好的解决方案。我编写了一个小函数，用另一个表单的
.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;
    }

  });

};

如果您愿意，这里有一个小演示供您使用：
感谢所有做出贡献的人。我仔细研究了每一个答案…决定我可能应该走另一个方向。我现在将表单发布到另一个文件中，希望我能够从生成的HTML中进行“干净”的提取，并将其提供给mPDF。非常感谢…这些都是好东西，特别是考虑到我（显然）只是在学习
 它看起来像是无效的HTML：元素需要嵌套，而不是交错。那么您想从现有div中获取innerHTML，包括用户在inputfields中输入的值吗？如果是这样的话，那么问题是这些值不在html中（
看起来有人已经有类似的问题了。这解决了你的问题吗？可能是重复的只是为了澄清…我发布的代码是一个非常简化的版本…有许多文本输入和单选按钮以及计算变量。我需要一种方法来获取“全部”这样就可以插入mPDF了。上面这行会显示“一切”吗或者仅仅是输入的答案？在本例中，输入基于给定的示例，但这取决于html标记。也许您可以在JSFIDLE上显示html标记，我将了解它。无论如何，由于它有很多文本输入和单选按钮，您不应该将其保存为字符串，而应该保存为数组或对象，否则您必须使用c创建大量字符串变量。我希望得到的最终结果是将mPDF中显示的呈现HTML作为原始的PDF版本…据我所知，设置$HTML字符串变量是唯一的方法。（我知道在此之前我没有提到过这个名字……但是如果我可以设置stringContent，那么我也可以设置$html并让它提供给mPDF。
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;
    }

  });

};