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

我有一个基于DIV可见性设置为可见或隐藏的多页表单。一旦用户对他/她的答案“高兴”，他们将点击一个按钮。在这一点上需要发生的事情之一是获取给定DIV的所有呈现的HTML，并将其全部设置为字符串变量，以便它可以与mPDF一起使用。获取包装的innerHTML，包括用户在输入元素中输入的值

我发现了两种方法，实际上似乎抢东西 ...只是不是我所需要的！

我的DIV是“第1页”

我正在尝试设置字符串变种“的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，这真的是我在这之后？

来源

2013-12-11 RCurtis

它看起来像无效的HTML：

元素需要嵌套，而不是交错。 –

所以你想从现有的div获得innerHTML，包括用户在inputfields中输入的值？如果是这样，那么问题是这些值不在html（' GitaarLAB

看起来有人已经有类似的问题。这是否能解决您的问题？ http://stackoverflow.com/questions/1388893/jquery-html-in-firefox-uses-innerhtml-ignores-dom-changes – smcjones

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

来源

2013-12-13 02:26:04 RCurtis

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

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

来源

2013-12-11 02:25:55 iCezz

只是为了澄清...我发布的代码是一个非常简化的版本......有许多文本输入和单选按钮并计算变量。我需要一种方法来抓取这个呈现的html的“全部”，以便它可以插入到mPDF中。上面的行会显示“一切”还是仅显示输入的答案？ – RCurtis

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

我期待的最终结果是将mPDF中显示的呈现HTML作为原始PDF版本......据我所知，设置$ html字符串变量是唯一的方法。（我知道在此之前我没有提及此名称，但是如果我可以设置stringContent，那么我也可以设置$ html并让它提供mPDF。 – RCurtis

你说的innerHTML/innerText属性从您的包装元素返回“无论是显示用户的输入到输入文本框”，并要“抢呈现的HTML”。

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

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

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

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

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

请参阅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设置它们。

希望这会有所帮助。

来源

2013-12-11 02:46:12 GitaarLAB

我看了这一点，我想我想出了一个很好的解决方案。我写了一个小函数，它用来自另一个表单的数据的数据填充表单。我只在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

来源

2013-12-11 04:27:52

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

回答

相关问题