using html() to get changed content

Question

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 contains 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

score 0 · Answer 1 · answered May 11 '11 at 14:44

0

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);
    });
});

answered May 11 '11 at 14:44

Gary Green

22,045
6
49
75

Good point...basically my problem is I build a content switcher that pulls the HTML and places it into a container for viewing, each content pane has many input fields..so I'm gonna have to figure out something completely different... – stewart715 May 11 '11 at 15:00

score 0 · Answer 2 · answered May 11 '11 at 14:45

0

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.

answered May 11 '11 at 14:45

Grim...

16,518
7
45
61

Aravindan R · Answer 3 · 2011-05-11T15:21:45.980

0

$(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

edited May 11 '11 at 15:21

answered May 11 '11 at 14:45

Aravindan R

3,084
1
28
44

score 0 · Answer 4 · answered May 11 '11 at 14:45

0

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

answered May 11 '11 at 14:45

Abdul Kader

5,781
4
22
40

score 0 · Answer 5 · answered May 11 '11 at 14:47

0

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

answered May 11 '11 at 14:47

Naveed Ahmad

3,176
1
15
18

score 0 · Accepted Answer · answered May 11 '11 at 14:51

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);
  }); 
});

using html() to get changed content

6 Answers6