using html() to get changed content

I have a div that I need to grab the HTML contents of (so naturally I use html())...

However, they are text fields. Whenever I grab the contents of the div (that co开发者_StackOverflow社区ntains the text fields), it grabs the initial HTML and not any data changed by the end user...

Here is JS bin version..change the input field, run the function and you see that it will only take the initial value of the field...

Any way around this?

http://jsbin.com/oleni3/edit

http://jsbin.com/oleni3/5/edit

Try this out ^

The code:

$(document).ready(function() {
  $('div#top input').change(function() {
      $(this).attr('value', $(this).val()); 
  });
  $('#click').click(function() {
    var _curHtml = $("div#top").html();
    $("div#bottom").html(_curHtml);
  }); 
});

Your getting the HTML of the div. You want to get the value of the input box:

$(document).ready(function() {
    $('#click').click(function() {
        var _curHtml = $("#data").val();
        $("div#bottom").html(_curHtml);
    });
});

No way to do it with html(). You'll have to get the value of each input using val(). You can use

$("input").each(function() {
    doSomething($(this).val());
}

if it make life easier.

$(document).ready(function() {
    $('#click').click(function() {
        var _curHtml = $("#data").val();
        $("div#bottom").html(_curHtml);
    });
});

The easiest hack would be like this:

$("div#bottom input").val($("div#top input").val());

Get the value of the updated input and set that to the clone.

Updated link:

http://jsbin.com/oleni3/3/edit

$(document).ready(function() {
  $('#data').change(function() {
    $(this).attr('value', $(this).val());
  }) 
  $('#click').click(function() {
        var _curHtml = $("div#top").html();
        $("div#bottom").html(_curHtml);
    });
});

This works.. here's the link http://jsbin.com/oleni3/2/edit

UPDATE: If you have many inputs inside the div, you can use this http://jsbin.com/oleni3/6/edit