innerHTML with current form values

Question

Need .innerHTML functionality but with the current form field values including input, select (selected option), and 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, and 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 like f.magicInnerHTML to return:

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

reflecting the current form values.

Answer 1

I think this is what you're looking for: JSFiddle link

In this example, the 'magic' innerHTML of the form is alerted with all changed attributes and their values. I used the jquery getAttributes plugin. Here is the code, other than the plugin code:

function magicHTMLloop($el, s, notfirst){
    if (notfirst) {
        s += '<' + $el.get(0).tagName.toLowerCase();

        var attrs = $.getAttributes($el);

        for (var i in attrs){
            s += ' ' + i + '="' + $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);
}

// This is the example usage:

$('input').change(function(){
    var v = magicHTML($('form'));
    alert(v);
});

This has a few possible edge cases that you might want to consider, such as quotes within the values (which will cause invalid HTML) - but I'm sure you can just escape that yourself, if necessary in your case. As you can see, the output of the magicHTML function is the updated innerHTML:

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