InnerHTML with current form values

Question

We need the .innerHTML function, but with the current values ​​of the form field, including input, selection (selected option) and text field.

So, considering:

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

if the user enters 123 and chooses option 2, normal f.innerHTML returns:

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

I want to return f.magicInnerHTML:

 <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 values ​​of the form.

Answer 1

Not completely satisfied, but basically it 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); 

Answer 2

I think this is what you are looking for: JSFiddle link

In this example, the "magic" innerHTML of the form is notified with all changed attributes and their values. I used jquery getAttributes plugin . Here is the code different from 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 cases of edges that you might want to consider, for example, quotation marks within values ​​(which will result in invalid HTML), but I'm sure you can just avoid it yourself if necessary in your case. As you can see, the result of the magicHTML function is an updated innerHTML:

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

Answer 3

 /** * 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']; } 

Answer 4

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 think maybe you want to add an html block with the value from the previous html form. If this case tries something in this direction ...

 $('#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/

Answer 5

You can get the value of the form input as follows:

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