Question

我有一个多页表单，根据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，这真的是我在这里的目标？

Answer 1

你说从你的包装元素返回的innerHTML / innerText“既没有将用户的输入显示到输入文本框中”又想要“抓取渲染的HTMl”。

'问题'是渲染的html没有（或空）默认值。我在谈论html源代码中的'物理'值：<input type="text">。

用户在input-elements中输入的内容是元素的'in memory'（也就是说）值，而不是html-source中提供的默认值。因此，innerHTML正是它应该做的事情。抓住html-source。

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

如果输入元素值发生更改（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设置它们。

希望这有帮助。

Answer 2

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

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

Answer 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

Answer 4

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

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

4 个答案: