jqueryhtmltext-capture

Get the current HTML of an element


I have a div with an id of "stage". In this div there are text inputs and anything else that could possibly be put in there.

When a user clicks on a button I want to get the html in the stage div and save it somewhere. My problem I'm noticing is I'm not getting the current HTML after making changes to say the TextInput on the screen.

The problem is I never know what will be in this stage div. It could be any number of things, most of the time containing form elements that the user can enter text into.

For example if stage contained

<input type='text' value="Test Content">

When it was created, and then the user changed the value of the input to "My Test Content", I want jQuery html() to get

<input type='text' value="My Test Content"> 

Upon clicking on the button.

How can this be done?

Thanks for the help!


Solution

  • Using only .html() will not change the value of the input. It will continue using the initial value: <input type='text' value="Test Content">. I recommend using .each() and .val().

    JAVASCRIPT:

    $(document).ready(function(){
        $('#b1').click(function(){
            $('#stage input').each(function(){
               $('#stage input').attr('value', $(this).val());
            });
            $('#results').html($('#stage').html());
        });
    });
    

    DEMO: http://jsfiddle.net/dirtyd77/Yctwk/5/