javascript - innerHTML with current form values -

need .innerhtml functionality current form field values including input, select (selected option), , textarea.

so, given:

<form id=f>   <input type=text name=x />   <select name=y>     <option value='1'>one</option>     <option value='2'>two</option>   </select> </form> 

if user enters 123, , selects option two, normal f.innerhtml returns:

<input type=text name=x /> <select name=y>   <option value='1'>one</option>   <option value='2'>two</option> </select> 

i'd f.magicinnerhtml return:

<input type=text name=x value='123' /> <select name=y>   <option value='1'>one</option>   <option value='2' selected>two</option> </select> 

reflecting current form values.

i think you're looking for: jsfiddle link

in example, 'magic' innerhtml of form alerted changed attributes , values. used jquery getattributes plugin. here code, other plugin code:

function magichtmlloop($el, s, notfirst){     if (notfirst) {         s += '<' + $el.get(0).tagname.tolowercase();          var attrs = $.getattributes($el);          (var in attrs){             s += ' ' + + '="' + $el.attr(i) + '"';         }         s += '>';     }      $el.children().each(function(){         s += magichtmlloop($(this), '', true);     });      if ($el.children().length && notfirst){         s += '</' + $el.get(0).tagname + '>';     }     return s; }  function magichtml($el) {     return magichtmlloop($el, '', false); }  // example usage:  $('input').change(function(){     var v = magichtml($('form'));     alert(v); }); 

this has few possible edge cases might want consider, such quotes within values (which cause invalid html) - i'm sure can escape yourself, if necessary in case. can see, output of magichtml function updated innerhtml:

<input type="text" name="x" value="this changed value">