innerHTML with current form values

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.

---

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

---

/**
 * HTML content along with the values entered by the user for form elements
 * (unlike the default browser behavior)
 *
 * @author i.carter euona.com
 * @version 1.0 2012-04-14
 * @return innerHTML (or outerHTML)
 * @param e HTMLElement
 * @param t String: "outer" OR "inner" (default)
 * 
 * @effect changes defaultValue
 * @tested FF11,IE10,GC
 */
function getHTML(e,t)
{   
    if(typeof t=='undefined') var t='inner';
    switch(e.nodeName.toUpperCase())
    {
        case 'INPUT':
            if(e.type=='checkbox' || e.type=='radio')
            {
                e.defaultChecked=e.checked;
                break;
            }
        case 'TEXTAREA':
            e.defaultValue=e.value;
            break;
        case 'SELECT':
            var o=e.options,i=o.length;
            while(--i > -1)
                o[i].defaultSelected=o[i].selected;
            break;
        default:
            var x=e.getElementsByTagName('input'),i=x.length;
            while(--i > -1) getHTML(x[i],t);
            x=e.getElementsByTagName('textarea');i=x.length;
            while(--i > -1) getHTML(x[i],t);
            x=e.getElementsByTagName('select');i=x.length;
            while(--i > -1) getHTML(x[i],t);
    }
    return e[t+'HTML'];
}

---

Try something like this...

$('#f').submit(function(e) { 
    e.preventDefault();
    var value = $('#text').val();
    if ((value != '') && $('#select').val() == '2') {
         $('#text').val(value);
    }
});

Demo: http://jsfiddle.net/wdm954/nEXzS/

---

EDIT: After reading the question again I'm thinking maybe you want to add a block of html in with the value from the previous html form. If that's the case try something along these lines...

$('#f').submit(function(e) {  
    e.preventDefault();
    var value = $('#text').val();
    if ((value != '') && $('#select').val() == '2') {
         $(this).after(insertValue(value));
    }
});

function insertValue(val) {   
    return "<input type=text name=x value='" + val + "' /><select name=y><option value='1'>one</option><option value='2' selected>two</option></select>";

}

Demo: http://jsfiddle.net/wdm954/nEXzS/1/

---

Not completely satisfied with it, but this mostly works:

$('input:text, input:hidden, input:password').each(function() {
  var v=this.value; 
  $(this).attr("magicmagic_value",v).removeAttr("value").val(v);
});
$('input:checkbox,input:radio').each(function() {
  var v=this.checked; 
  if(v) $(this).attr("magicmagic_checked","checked"); 
  $(this).removeAttr("checked"); 
  if(v) this.checked=true; 
});
$('select option').each(function() { 
  var v=this.selected; 
  if(v) $(this).attr("magicmagic_selected","selected"); 
  $(this).removeAttr("selected");
  if(v) this.selected=true; 
});
$('textarea').each(function() { 
  $(this).html(this.value); 
});

var magic=$('form').html().replace(/magicmagic_/g,"");

$('[magicmagic_value]').removeAttr('magicmagic_value');
$('[magicmagic_checked]').attr("checked","checked").
  removeAttr('magicmagic_checked');
$('[magicmagic_selected]').attr("selected","selected").
  removeAttr('magicmagic_selected');

alert(magic);

---

You can get the value of a form input like this:

<input type="text" id="name" value="Paul" />

<script type="text/javascript">
  $("#name").val();
</script>