獲取包裝的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，包括用戶在輸入元素中輸入的值

回答

相關問題