I am using jQuery to read data in a HTML page. On that page, I have a <form> element which contains some <input> tags for user to enter their values.
When being initialized, this form has some default values for those <input> elements. When I submit this form, I use the html() method to get the HTML string of current state of this page, but I do not why this result string is still contain old values (default input values), not the new ones.
Is there any way to update or persist the user-entered value to those <input> elements before calling html()? How can I get the string which contain newest value by using jQuery methods?
Thank you so much!
-
Why do you need to get the HTML string of current state of this page?VisioN– VisioN2012-07-03 09:39:40 +00:00Commented Jul 3, 2012 at 9:39
-
Why are you using html to get the entire page, seems odd. You should be able to select all of the values from the form using serialize if that's what you're after.Matthew Riches– Matthew Riches2012-07-03 09:41:12 +00:00Commented Jul 3, 2012 at 9:41
-
@VisioN: I have to get this HTML (actually a part of it), then doing some calculations, put some replacements, push and store it on server. Later, I use it to render another pageĐinh Hồng Châu– Đinh Hồng Châu2012-07-03 09:50:36 +00:00Commented Jul 3, 2012 at 9:50
Add a comment
|
3 Answers
However, it is strange what you are trying to do, but all you need is to update the value attribute of the form elements. It can be done with the following code (put it in the form submit handler):
$("form input").attr("value", function() {
return this.value;
});
1 Comment
Đinh Hồng Châu
Thank you so much. Actually, your suggestion did not help me solve this problem, but it gave me a clue to go on. I tried the demo you created on jsfiddle, it worked with jQuery 1.7.1, but when I downgrade it to 1.5.2, it caused error ^_^. So I think maybe there's something mysterious in jQuery 1.5.2 that I will research it deeper. I applied your clue to another way:
$("form input").attr("defaultValue", function() { return this.value; }); and it worked great!By default the jQuery html() function will preserve the defaultValue and defaultChecked properties rather than using the current values/selections (just as JavaScript innerHTML does). To get around this you need to first use the jQuery prop(): Read the Documentation on prop().
For instance, given the code:
<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>
then
$('form').html()
Will always output that exact code, regardless of what values you've added/selected/modified.
To remedy that, just run a function to convert the element's values to properties:
$("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();
You'll now have the HTML as your current page state is displaying it.
Comments
The textarea bit is a bit different if you were looking for how to do that element type:
$("textarea").html( function() {
return this.value;
});
