jQuery: función html() obtener datos antiguos en el formulario

Question

Estoy usando jQuery para leer datos en una página HTML. En esa página, tengo un elemento <form> que contiene algunas etiquetas <input> para que el usuario ingrese sus valores.
Al inicializarse, este formulario tiene algunos valores predeterminados para esos elementos <input>. Cuando envío este formulario, utilizo el método html() para obtener la cadena HTML del estado actual de esta página, pero no sé por qué esta cadena de resultados todavía contiene valores antiguos (valores de entrada predeterminados), no los nuevos.
¿Hay alguna forma de actualizar o persistir el valor ingresado por el usuario a esos elementos <input> antes de llamar al html()? ¿Cómo puedo obtener la cadena que contiene el valor más nuevo mediante el uso de métodos jQuery?
¡Muchas gracias!

Answer 1

Sin embargo, es extraño lo que estás tratando de hacer, pero todo lo que necesitas es actualizar el atributo de valor de los elementos del formulario. Se puede hacer con el siguiente código (ponerlo en el controlador de formulario submit):

$("form input").attr("value", function() { 
    return this.value; 
}); 

DEMO:http://jsfiddle.net/BXha6/

Answer 2

Por defecto, la función jQuery html() preservará la defaultValue y defaultChecked propiedades en lugar de utilizar los valores/selecciones actuales (como lo hace JavaScript innerHTML). Para evitar esto, primero debe usar jQuery prop(): Read the Documentation on prop().

Por ejemplo, teniendo en cuenta el código:

<form action='/'> 
    <input type='radio' value='1' checked name='first' /> 
    <input type='radio' value='2' name='first' /> 

    <input type='checkbox' value='yes' /> 

    <input type='text' value='Start Text' name='second' /> 
</form> 

continuación

$('form').html() 

de SIEMPRE salida que código exacto, independientemente de los valores que se haya agregado/seleccionado/modificada.

Para remediar eso, basta con ejecutar una función para convertir los valores del elemento de propiedades:

$("form input[type='radio']").each(function(){ 
    if (this.checked){ 
     $(this).prop("defaultChecked",true); 
    } else { 
     $(this).prop("defaultChecked",false); 
    } 
}); 
$("form input[type='checkbox']").each(function(){ 
    if (this.checked){ 
     $(this).prop("defaultChecked",true); 
    } else { 
     $(this).prop("defaultChecked",false); 
    } 
}); 
$("form input[type='text']").each(function(){ 
    $(this).prop("defaultValue",$(this).val()); 
}); 

alert($(form).html()); //or var the_code = $(form).html(); 

Ahora tendrá el código HTML como su estado de página actual está mostrando la misma.

Answer 3

El bit área de texto es un poco diferente si estuviera buscando la manera de hacer eso tipo de elemento:

$("textarea").html(function() { 
    return this.value; 
}); 

http://jsfiddle.net/BXha6/7/