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

StackOverflow https://stackoverflow.com/questions/20509253

  •  31-08-2022
  •  | 
  •  

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?

Was it helpful?

Solution 4

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!

OTHER TIPS

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.

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();

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

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top