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

Question

I have a multipage form that is displayed based on the DIV visibility being set to visible or hidden. Once the user is "happy" with his/her answers they will click a button. One of the things that needs to happen at this point is to grab all of that rendered HTML for the given DIV and set it all to a string variable so that it can be used with mPDF.

I've found two methods that actually seem to grab something...just not what I need!

my DIV is 'page1'

I'm trying to set the string var 'stringContent'

Here is the simplified form:

<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>

Here is what I've tried:

var stringContent = $('#page1').html();  
// this works, showing the exact HTML string...not the rendered HTML

var stringContent = $('#page1').text();
// this shows only "Applicant Name:"

Neither shows the user's input into the input text box

Is what I'm trying to do even possible? Others seem to have successfully used mPDF in a similar manner...perhaps not the way I'm trying to approach it, though.

Am I going about this the wrong way? Is there a better way to get this into mPDF which is really what I'm after here?

It looks like invalid HTML:
The elements need to be nested, not interlaced. — Steve Wellens, Dec 11 '13 at 02:16
so you want to get innerHTML from an existing div including the values entered by users inside inputfields? If so, then the problem is that the values are not in the html (` — GitaarLAB, Dec 11 '13 at 02:21
Looks like someone has already had a similar problem. Does this solve your problem? http://stackoverflow.com/questions/1388893/jquery-html-in-firefox-uses-innerhtml-ignores-dom-changes — smcjones, Dec 11 '13 at 02:31
possible duplicate of [jQuery: Get HTML as well as input values](http://stackoverflow.com/questions/6511593/jquery-get-html-as-well-as-input-values) — ProllyGeek, Dec 11 '13 at 03:02

GitaarLAB · Answer 1 · 2013-12-12T07:44:32.093

You say that the innerHTML/innerText returned from your wrapping element "Neither shows the user's input into the input text box" and you want to "grab the rendered HTMl".

The 'problem' is that the rendered html has no (or an empty) default value. I'm talking about the 'physical' value in the html source: <input type="text">.

What the user enters in the input-elements is then the 'in memory' (so to say) value of the element, not the default value provided in the html-source. So, innerHTML does exactly what it is supposed to do.. grab the html-source.

Now, I stated in my comment above that I had a dirty idea to fix this:

If the input-element value changes (onchange or even onblur), you could update the physical value property of the element like so: this.setAttribute('value', this.value);

So, when you now get the innerHTML of the wrappig element, you'll see that the html-source now has the default value property set.

See this rough jsfiddle demonstrating the concept here.

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');
};

Note, you cant set the event-function in the source, as you would then copy it to via innerHTML. Hence you must set them via javascript.

Hope this helps.

score 0 · Answer 2 · answered Dec 11 '13 at 02:25

0

You didn't get the input textbox because the you are getting the text from div page1 but not the input. To get the input text box value try this.

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

answered Dec 11 '13 at 02:25

iCezz

624
1
7
14

Just to clarify...the code I posted is an extremely simplified version...there are MANY text inputs and radio buttons and calculated vars. I need a way to grab "all" of this rendered html so that it can be plugged into mPDF. Will the line above show "everything" or just the answers that were input? – RCurtis Dec 11 '13 at 02:32
in this case on the input base on the example given, but it depends on your html markup. maybe you can show the html markup on jsfiddle and I will see about it. Anyway since it has a lot of text inputs and radio buttons, you should not save it into a string but rather an array or object, otherwise you have to create a lot of string variable. – iCezz Dec 11 '13 at 02:37
the end result I am looking to achive is to get that rendered HTML shown in mPDF as a PDF version of the original...as far as I know, setting the $html string variable is the only way to do this. (I know I have not made any reference to this name prior to this...but if I can set stringContent then I can also set $html and have it feed mPDF. – RCurtis Dec 11 '13 at 03:31

Bill Criswell · Answer 3 · 2013-12-11T04:35:59.123

I looked at this for a bit and I think I came up with a pretty good solution. I wrote a little function that populates a form with the data from another form's .serializeArray() data. I only tried it in Chrome. Here's the function:

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;
    }

  });

};

Here's a small demo for you to mess around with if you'd like: http://jsbin.com/udirAfo/2/edit?html,js,output

score 0 · Accepted Answer · answered Dec 13 '13 at 02:26

Thanks everybody who has contributed. I have studied each answer very closely...decided that I should probably go in a different direction. I am now POSTing the form to a different file and hopefully I will then be able to do a "clean" extract from the resulting HTML and have that feed mPDF. Many thanks...it's all good stuff, especially given that I am (obviously) just learning!

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

4 Answers4