innerHTML con valores de formulario actuales

Question

Necesita funcionalidad interna de HTML pero con los valores de campo de formulario actuales, incluida la entrada, seleccionar (opción seleccionada) y área de texto.

Por lo tanto, dada:

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

si el usuario entra 123 y selecciona la opción dos, f.innerHTML la normalidad vuelve:

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

me gustaría f.magicInnerHTML para volver:

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

que reflejan los valores de forma actuales.

Answer 1

no está completamente satisfecho con ella, pero esto trabaja principalmente:

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

Usted puede obtener el valor de una entrada de formulario como el siguiente:

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

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

Answer 3

intentar algo como esto ...

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

Demostración: http://jsfiddle.net/wdm954/nEXzS/

---

EDIT: Después leyendo la pregunta nuevamente, estoy pensando que tal vez quiera agregar un bloque de html con el valor del formulario html anterior. Si ese es el caso probar algo a lo largo de estas líneas ...

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

} 

Demostración: http://jsfiddle.net/wdm954/nEXzS/1/

Answer 4

Creo que esto es lo que está buscando: JSFiddle link

En este ejemplo, la 'magia 'innerHTML del formulario se alerta con todos los atributos cambiados y sus valores. Usé el jquery getAttributes plugin. Aquí está el código, que no sea el código del plugin:

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

Esto tiene algunas casos extremos posibles que puede tener en cuenta, tales como cotizaciones dentro de los valores (lo que provocará HTML no válido) -, pero estoy Seguro que puedes escapar de ti mismo, si es necesario en tu caso. Como se puede ver, la salida de la función magicHTML es el innerHTML actualización:

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

Answer 5

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