jquery html() does not return changed values

Question

I have a form with a textbox like this:

<html>
<head>
    <script type="text/javascript" src="jquery-1.6.2.js"></script>
</head>
<body>
    <input type="text" id="myTextBox" />
</body>
</html>

When I type something in myTextBox, the value is available with $("#myTextBox").val(), but is not represented if i do $("body").html(). How can I grab the html string and the updated form value too? Thanks!

I need to store a 'snapshot' of the page at the time when it was submitted to generate a PDF from it. — Harper
– Harper, Commented Aug 17, 2011 at 16:06
It doesn't, thus I created this question.. Have you even tried it? — Harper
– Harper, Commented Aug 17, 2011 at 16:17

Norman Joyner · Accepted Answer · 2011-08-17 16:21:04Z

20

You can use the .attr() function.

Example:

$("input").each(function(){
    $(this).attr("value", $(this).val());
});

After this you can do the:

    $("body").html();

This should work.

edited Aug 17, 2011 at 16:21

answered Aug 17, 2011 at 16:15

Norman Joyner

9656 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Harper Over a year ago

I need a way to do this for 'all' input elements on the form.

Alex Turpin Over a year ago

The OP will have to go through all inputs and change their value using this, but it should work. +1

Harper Over a year ago

$("body").children().each(function() { $(this).attr("value", $(this).val());});

Sarfraz Over a year ago

Note that this.value will be faster than $(this).val()

JJJ Over a year ago

@Sarfraz Unless he has hundreds of inputs on the page, the difference will probably be less than a millisecond.

|

Coisox · Accepted Answer · 2013-04-05 03:38:53Z

18

$('[type=text], textarea').each(function(){ this.defaultValue = this.value; });
$('[type=checkbox], [type=radio]').each(function(){ this.defaultChecked = this.checked; });
$('select option').each(function(){ this.defaultSelected = this.selected; });

then

$("body").html()

answered Apr 5, 2013 at 3:38

Coisox

1,1141 gold badge12 silver badges24 bronze badges

2 Comments

abhishek77in Over a year ago

The accepted answer does not work well with textarea. But this solution works.

TanvirArjel Over a year ago

This should have been the accepted answer considering the a form does not contain only input element.

Senad Meškin · Accepted Answer · 2011-08-17 16:07:56Z

2

$('input').each(function(){
  $(this).attr('data-value-input', $(this).val());
});

and after that you can get your html

var bodyHtml = $('body').html().toString().replace('data-value-input', 'value');

and that is it.

answered Aug 17, 2011 at 16:07

Senad Meškin

13.8k4 gold badges39 silver badges55 bronze badges

2 Comments

Madara's Ghost Over a year ago

And what if a preset value exists in the HTML on page load? You'll have 2 values then, right?

BumbleB2na Over a year ago

+1 for @Senad to counteract a -1, for a solution that is on the right track

Syd Gillani · Accepted Answer · 2013-05-02 16:37:04Z

1

Well there is one most simpler way of doing this, by employing the live function on the input.

$(document).ready(function() {

 var checker = false;
    $("input").live("change", function() {
        checker = (this.defaultValue !== this.value);
        if (checker)
            this.defaultValue = this.value;
    });
});

answered May 2, 2013 at 16:37

Syd Gillani

3093 silver badges6 bronze badges

Comments

Botea Florin · Accepted Answer · 2023-10-26 16:08:08Z

0

Long way:

  $("input").each(function(){
    $(this).attr("value", $(this).val());
  });
  $("textarea").each(function(){
    $(this).text($(this).val());
  });
  $("input:checked").each(function(){
    $(this).attr("checked", true);
  });
  $("input:not(:checked)").each(function(){
    $(this).removeAttr("checked");
  });
  $("select option[selected]").each(function(i, el){
    $(el).removeAttr("selected");
  });
  $("select option:selected").each(function(i, el){
    $(el).attr("selected", true);
  });

answered Oct 26, 2023 at 16:08

Botea Florin

6338 silver badges24 bronze badges

Comments

V5 Studio · Accepted Answer · 2024-06-13 16:38:25Z

0

I had to do this for option

$("select option[selected]").each(function(i, el){
    $(el).removeAttr("selected");
});
$("select").each(function(i, el){
  $(this).find('option[value="' + $('#' + el.id).val() + '"]').attr('selected', true);
});

answered Jun 13, 2024 at 16:38

V5 Studio

13 bronze badges

Collectives™ on Stack Overflow

jquery html() does not return changed values

6 Answers 6

7 Comments

2 Comments

2 Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

7 Comments

2 Comments

2 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related